सामान्य "मोबिलायझेशन": अनुकूली डिझाइनकडे जाणे. अनुकूली मांडणी: ते काय आहे आणि ते कसे वापरावे

अलीकडे, तंत्रज्ञान आणि विविध उपकरणे (टॅब्लेट, स्मार्टफोन, मॉनिटर्स) ज्याद्वारे साइट्स पाहिल्या जातात ते अधिकाधिक विकसित होत आहेत.

या क्षेत्रात, आम्हाला विविध स्क्रीन रिझोल्यूशनची प्रचंड विविधता मिळते, ज्यामुळे साइटवरून माहिती मिळवणे कठीण होते. माहिती वाचण्यास सोपी आहे आणि बहुतेक उपकरणांवर पाहण्यायोग्य आहे याची खात्री करण्यासाठी, अनुकूली डिझाइन तंत्रज्ञान विकसित केले गेले आहे.

रिस्पॉन्सिव्ह डिझाईनचे उद्दिष्ट एक सार्वत्रिक वेबसाइट डिझाइन विकसित करणे आहे जे तुम्हाला विविध उपकरणांवरील संसाधन पाहण्याची आणि त्यांच्याशी संवाद साधण्याची अनुमती देईल.

या तंत्रज्ञानामध्ये अनेक उपकरणांऐवजी सर्व उपकरणांसाठी वेबसाइटची एक आवृत्ती विकसित करणे देखील समाविष्ट आहे.

अडॅप्टिव्ह वेब डिझाईन हे वेब पेजेसचे डिझाइन आहे जे इंटरनेटशी कनेक्ट केलेल्या विविध उपकरणांवर साइटचे योग्य प्रदर्शन सुनिश्चित करते आणि निर्दिष्ट ब्राउझर विंडो आकारांशी डायनॅमिकपणे जुळवून घेते.

प्रतिसादात्मक डिझाइनची मूलभूत तत्त्वे:

• अनुकूली वेबसाइट टेम्प्लेट, कॉम्प्युटर मॉनिटर्सपासून स्मार्टफोन्सपर्यंत वेगवेगळ्या डिव्हाइस स्क्रीन रिझोल्यूशनशी जुळवून घेण्याची टेम्पलेटची क्षमता;
• सामग्री ब्लॉक्सचे अनुकूलन आणि हालचाल, डिव्हाइस स्क्रीन रिझोल्यूशनवर अवलंबून आवश्यक परिमाणे घेण्याची सामग्री ब्लॉकची क्षमता, तसेच लेआउटमधील दुसर्या स्थानावर जाण्याची क्षमता;
• प्रतिमा प्रतिसाद, स्क्रीन रिझोल्यूशनवर अवलंबून आकार बदलण्याची किंवा कमी वजन आणि आकारासह अधिक अनुरूप प्रतिमा लोड करण्याची प्रतिमांची क्षमता;
• लवचिक ग्रिड वापरणे आपल्याला लेआउट डिझाइन द्रुतपणे बदलण्याची परवानगी देते;
• कमी महत्त्वाचे ब्लॉक लपवणे, छोट्या पडद्यावर काही ब्लॉक लपलेले असू शकतात;
• नेव्हिगेशन एलिमेंट्सच्या उपयोगितेवर पुन्हा काम करणे, कारण मोबाइल डिव्हाइसवर, त्यांच्या कमी रिझोल्यूशनमुळे, नेव्हिगेशन घटक कमी क्लिक करण्यायोग्य बनतात, ते पुन्हा डिझाइन केले जातात, ते वापरण्यास सोयीस्कर बनवतात;
• वेब पृष्ठावरील अनेक घटकांचे सरलीकरण, काही घटक मोबाइल उपकरणांवर वापरण्यासाठी सरलीकृत केले आहेत;
• व्हिडिओ सामग्रीचे अनुकूलन, व्हिडिओ अनुकूलन देखील खात्यात घेतले पाहिजे;
• मीडिया क्वेरी वापरणे तुम्हाला अनुकूली मांडणी तयार करण्यास अनुमती देते;
• मोबाइल प्रथम, प्रतिसादात्मक डिझाइन मोबाइल लेआउटसह सुरू होते.

शेवटच्या मुद्द्याबद्दल, हे बरोबर आहे की नाही हा एक कठीण प्रश्न आहे, कमीतकमी अनेकांचा असा युक्तिवाद आहे की मोबाइल डिव्हाइससाठी आवृत्तीसह लेआउट विकसित करणे आवश्यक आहे. मी थोडा वेगळा दृष्टिकोन घेतो; विचारपूर्वक ग्रिड आणि पूर्ण कार्यक्षमतेसह जास्तीत जास्त रिझोल्यूशनसाठी लेआउट विकसित करणे माझ्यासाठी सोपे आहे आणि त्यानंतरच ते इतर रिझोल्यूशनशी जुळवून घेते.

प्रतिसादात्मक डिझाइन लेआउट परिमाणे

एकदा 2012 मध्ये, मी एक लहान लेख लिहिला होता की डिझाइन विकसित करताना कोणती निवडली पाहिजे - निश्चित साइटसाठी लेआउट. या लेखाला वाचकांमध्ये खूप रस आहे हे दिसून आले की हा मुद्दा अनेक नवशिक्या डिझाइनर आणि विकसकांसाठी आहे. या संदर्भात, मी या लेखात हा मुद्दा हायलाइट करण्याचे देखील ठरवले आहे.

म्हणून, पूर्णपणे माझ्या दृष्टीकोनातून, मी तत्त्व आणि परिमाणे ज्यासाठी मांडणी विकसित केली जावी.

जर तुम्ही प्रथम मोबाइलच्या तत्त्वाचे अनुसरण केले, तर रिझोल्यूशन आकार असतील ज्यासाठी तुम्हाला 320px / 480px / 768px / 1024px / 1280px लेआउट विकसित करणे आवश्यक आहे, कदाचित अधिक कार्यांवर अवलंबून असेल.

चित्र असे काहीतरी दिसते, परंतु बऱ्याचदा विशिष्ट रिझोल्यूशनसाठी लेआउट तयार करण्याची आवश्यकता नसते, उदाहरणार्थ, 480px. जर लेआउट 768 - 320px च्या अंतराने खंडित होत नसेल.

अर्थात, आम्ही नियमित लेआउटप्रमाणेच पॅडिंग, स्क्रोलबार आणि इतर सर्व गोष्टी विचारात घेऊन फोटोशॉपमध्ये कॅनव्हास तयार करू. विकासाच्या सुलभतेसाठी, तसेच जलद लेआउट डिझाइनसाठी. बरेच लोक त्यांच्या कामात फ्रेमवर्क वापरतात आणि म्हणून ते विकसित केलेल्या फ्रेमवर्कच्या ग्रिडवर अवलंबून असतात.

याबद्दल धन्यवाद, आम्ही लेआउट डिझायनरला दर्शवू शकतो की लेआउट वेगवेगळ्या स्क्रीन रिझोल्यूशन आणि डिव्हाइसेसवर कसे वागेल. उदाहरण म्हणून, मी एक लहान लेआउट स्केच केले आहे, आपण ते खालील स्क्रीनशॉटमध्ये पाहू शकता.

प्रतिसादात्मक डिझाइनमध्ये मीडिया क्वेरी आणि व्ह्यूपोर्ट

व्ह्यूपोर्ट मेटा टॅग ब्राउझरला पृष्ठ आकारमान कसे प्रदर्शित करावे आणि त्याचे स्केल कसे बदलावे हे सांगण्यासाठी वापरला जातो. हा मेटा टॅग साइटवर लिहिलेला आहे. हे विकसकांना उपकरणांसाठी स्क्रीन रुंदी सेट करण्यास अनुमती देते, जे css मध्ये लिहिलेले आहे.

व्ह्यूपोर्ट मेटा टॅग असे लिहिले आहे:

• सामग्रीवर स्क्रोल करा

लोगो

• मुख्यपृष्ठ
• खरेदी करा
• सेवा
• संपर्क

कथा

मर्सिडीज एसएल मॉडेलचा इतिहास 1954 पर्यंत परत जातो - तेव्हाच जर्मन लोकांनी न्यूयॉर्क ऑटो शोमध्ये दोन-दरवाज्यांची मर्सिडीज 190 एसएल सादर केली. त्यावेळच्या मोटार शोला आलेल्या अभ्यागतांमध्ये सौंदर्याचा धक्का किती असेल याची तुम्ही कल्पना करू शकता. मनमोहक सौंदर्याच्या शरीराखाली मर्सिडीज W120 पोंटन सेडान आणि स्टील मोनोकोकचा एक छोटा प्लॅटफॉर्म होता. निलंबन पूर्णपणे स्वतंत्र होते - समोर दुहेरी विशबोन आणि मागील बाजूस स्विंग एक्सल शाफ्टसह. लांबी - 4290 मिमी, एक्सलमधील अंतर - 2400 मिमी.

जेव्हा CSS चा विचार केला जातो तेव्हा कमाल-रुंदी सेट करणे ही एक चांगली कल्पना आहे ती साइटला मोठ्या स्क्रीनवर स्केलिंग करण्यापासून थांबवेल, परंतु ते पृष्ठे कमी होण्यापासून थांबवणार नाही. निश्चित रुंदीवरून द्रवपदार्थावर स्विच करताना मुख्य समस्यांपैकी एक म्हणजे प्रतिमा. CSS मध्ये, या समस्येवर एक सोपा उपाय आहे. फक्त प्रतिमेची रुंदी १००% वर सेट करा. लहान स्क्रीनवर Opera आणि Safari मधील स्क्वॅश प्रतिमा टाळण्यासाठी प्रतिमांच्या उंचीसाठी स्वयं देखील जोडूया:

/* लेआउट */ #wrapper (रुंदी: 96%; कमाल-रुंदी: 920px; समास: स्वयं; पॅडिंग: 2%; ) #मुख्य (रुंदी: 60%; समास-उजवीकडे: 5%; फ्लोट: डावीकडे; ) (रुंदी: 35%; फ्लोट: उजवीकडे;) /* लोगो H1 */ शीर्षलेख h1 (उंची: 98px; रुंदी: 216px; फ्लोट: डावीकडे; प्रदर्शन: ब्लॉक; पार्श्वभूमी: url(images/sllogo.png) 0 0 नाही- पुनरावृत्ती; टेक्स्ट-इंडेंट: -9999px; ) /* नेव्हिगेशन */ हेडर nav (float: right; margin-top: 40px; ) हेडर nav li (डिस्प्ले: इनलाइन; समास-डावी: 15px; ) हेडर nav ul li a ( मजकूर-सजावट:कोणताही नाही; रंग:#333;) #skipTo (प्रदर्शन: काहीही नाही;) #skipTo li (पार्श्वभूमी: #ccc; ) /* मुख्य प्रतिमा*/ # बॅनर ( फ्लोट: डावीकडे; समास-तळा: 15px; रुंदी : 100%; ) #banner img (रुंदी: 100%; उंची: स्वयं; )

तुमची प्रतिमा तिच्या मूळ घटकावर पूर्ण रुंदीवर दिसेल आणि त्यासोबत लहान होईल. फक्त इमेजची कमाल-रुंदी त्याच्या कंटेनरच्या कमाल रुंदीपेक्षा जास्त नाही याची खात्री करा.

मोठ्या प्रतिमा वापरल्याने लोड होण्याच्या वेळेवर परिणाम होऊ शकतो. त्यामुळे लहान स्क्रीनसाठी, एक प्रतिसादात्मक प्रतिमा पद्धत आहे जी वापरकर्त्याच्या स्क्रीनचा आकार शोधते आणि आवश्यकतेनुसार लहान/मोठी प्रतिमा तयार करते. ही पद्धत अद्याप आदर्श म्हणणे कठीण आहे, परंतु तरीही ते विचारात घेण्यासारखे आहे.

मुख्य नेव्हिगेशन स्विच करा

तुम्हाला तुमचे नेव्हिगेशन का बदलण्याची गरज आहे याचे मुख्य कारण म्हणजे होणारे कमीत कमी करणे, ज्यामुळे बटणे वाचता येत नाहीत आणि क्लिक करणे कठीण होऊ शकते. या पद्धतीचा वापर केल्यास वापरकर्त्याचे जीवन सोपे होईल. तुम्हाला कोडमध्ये हे देखील लक्षात येईल की आम्ही #मुख्य आणि बाजूला असलेल्या विभागांमध्ये बदल एका स्तंभात एकत्र करण्यासाठी केले आहेत.

/* मीडिया क्वेरी */ @media स्क्रीन आणि (कमाल-रुंदी: 480px) ( #skipTo (डिस्प्ले: ब्लॉक; ) हेडर nav, #main, बाजूला (float: left; clear: left; margin: 0 0 10px; रुंदी : १००%;

तुमच्या लक्षात येईल की काही मोबाईल डिव्हाइसेसवर, तुमची वेबसाइट स्क्रीनवर बसण्यासाठी आपोआप संकुचित होईल. जेव्हा आम्हाला गैरसोयीच्या सामग्रीमधून नेव्हिगेट करण्यासाठी स्क्रीनचा आकार वाढवावा लागतो तेव्हा हा मुद्दा समस्या बनतो.

मीडिया क्वेरी पूर्ण प्रभावात येण्यासाठी, सामान्य मोबाइल-ऑप्टिमाइझ केलेल्या, प्रतिसाद देणाऱ्या साइटमध्ये खालील गोष्टींचा समावेश असावा:

रुंदी गुणधर्म व्ह्यूपोर्टच्या आकारासाठी जबाबदार आहे. हे पिक्सेलच्या विशिष्ट संख्येवर, रुंदी=960 किंवा डिव्हाइस-रुंदी मूल्यावर सेट केले जाऊ शकते, जी स्क्रीनची रुंदी पिक्सेलमध्ये 100% स्केलवर आहे. जेव्हा पृष्ठ प्रथम लोड केले जाते तेव्हा प्रारंभिक-स्केल गुणधर्म स्केल नियंत्रित करते. कमाल-प्रमाण, किमान-प्रमाण आणि वापरकर्ता-स्केलेबल गुणधर्म हे नियंत्रित करतात की वापरकर्ते पृष्ठ कसे स्केल करू शकतात (मोठे/लहान).

इंटरनेट वापरकर्ते भिन्न स्क्रीन आकारांसह भिन्न उपकरणांवर वेबसाइट ब्राउझ करतात. स्क्रीनचे आकार सतत बदलत असतात, त्यामुळे साइट त्यांच्यापैकी कोणत्याहीशी जुळवून घेते हे महत्त्वाचे आहे. वेबसाइट तयार करण्यासाठी दोन मुख्य पध्दती आहेत ज्या सहजपणे वेगवेगळ्या प्रकारच्या डिव्हाइसेसशी जुळवून घेतात:

रिस्पॉन्सिव्ह डिझाईन (RWD) - रिस्पॉन्सिव्ह डिझाईन - विशिष्ट प्रॉपर्टी व्हॅल्यूजसह साइट डिझाइन करणे, उदाहरणार्थ, लवचिक लेआउट ग्रिड, जे एका लेआउटला वेगवेगळ्या डिव्हाइसेसवर कार्य करण्यास अनुमती देते;

अडॅप्टिव्ह डिझाइन (AWD) - अनुकूली डिझाइन किंवा डायनॅमिक डिस्प्ले - अनेक निश्चित-रुंदीच्या मांडणीवर आधारित, डिव्हाइसवर अवलंबून बदलणाऱ्या परिस्थितीसह साइट डिझाइन करणे.

1. प्रतिसादात्मक डिझाइन तंत्र

रिस्पॉन्सिव्ह वेब डिझाईनमागील तत्त्वज्ञान हे आहे की स्क्रीनच्या आकाराची पर्वा न करता साइट कोणत्याही डिव्हाइसवर पाहणे सोपे आहे. रिस्पॉन्सिव्ह डिझाईन हा वाक्यांश 2011 मध्ये इथन मार्कोट यांनी तयार केला होता. रिस्पॉन्सिव्ह वेब डिझाईनचे मुख्य वैशिष्ट्य म्हणजे फ्लुइड ग्रिडमुळे, लेआउट स्क्रीनच्या आकारातील बदलांना, फुग्याप्रमाणे फुगवणे किंवा संकुचित होण्यास आपोआप प्रतिसाद देतो.

रिस्पॉन्सिव्ह वेब डिझाईन तीन तंत्रे एकत्र करते - लवचिक ग्रिड-आधारित लेआउट, लवचिक प्रतिमा आणि मीडिया क्वेरी.

लेआउट लवचिकता निश्चित पिक्सेल मूल्यांऐवजी मोजमापाच्या सापेक्ष युनिट्सच्या वापरावर आधारित आहे, उपलब्ध जागेसाठी रुंदी समायोजित करण्यास अनुमती देते.

मजकूर सामग्रीची लवचिकता ब्राउझरच्या 16px च्या डीफॉल्ट फॉन्ट आकाराच्या सापेक्ष फॉन्ट आकारांची गणना करून प्राप्त केली जाते, उदाहरणार्थ फॉन्ट-आकाराच्या निश्चित आकारासाठी: 42px सापेक्ष आकार 42px / 16px = 2.625em आहे.

साइटवरील सर्व प्रतिमांसाठी img (रुंदी: 100%; कमाल-रुंदी: 100%;) नियम वापरून लवचिक प्रतिमांची समस्या सोडवली जाते. हा नियम सुनिश्चित करतो की प्रतिमा त्यांच्या कंटेनरपेक्षा कधीही रुंद नसतात आणि मोठ्या स्क्रीनवर त्यांचे खरे परिमाण कधीही ओलांडत नाहीत.

मीडिया क्वेरी स्क्रीन प्रकार, रुंदी, उंची, अभिमुखता आणि रिझोल्यूशनसह सामग्री प्रदर्शित करण्याशी संबंधित डिव्हाइस वैशिष्ट्यांवर आधारित शैली सुधारित करतात. मीडिया क्वेरी एक प्रतिसादात्मक डिझाइन तयार करतात जी प्रत्येक स्क्रीन आकारासाठी योग्य शैली लागू करते.

तांदूळ. 1. प्रतिसादात्मक डिझाइन अतिरिक्त प्रतिसादात्मक डिझाइन तंत्र

स्केलेबल वेक्टर ग्राफिक्स - SVG प्रतिमा वापरा ज्या गुणवत्ता न गमावता कोणत्याही आकारात स्केल करतात आणि रेटिना डिस्प्लेवर छान दिसतात.

कार्ड इंटरफेस - तथाकथित कार्ड इंटरफेस वापरा - गोलाकार कोपऱ्यांसह आयताकृती आकार जे सामग्रीसाठी कंटेनर दर्शवतात. असे ब्लॉक्स स्वयंपूर्ण इंटरफेस युनिट्स आहेत आणि लेआउटभोवती फिरणे सोपे आहे.

तांदूळ. 2. Pinterest, कार्ड-आधारित लेआउट

केवळ आवश्यक गोष्टी ठेवणे हे एक चांगले तंत्र आहे, विशेषत: प्रतिसादात्मक डिझाइनसाठी. प्रतिसाद देणारे आणि अनुकूल मिनिमलिस्ट इंटरफेस तयार करा जे आजकाल अधिकाधिक लोकप्रिय होत आहेत.

तांदूळ. 3. हॉटेल लूक, वेब डिझाइनमध्ये मिनिमलिझम

योग्यरित्या सामग्रीला प्राधान्य द्या आणि लपवा - छुपी नियंत्रणे वापरा, विशेषत: लहान स्क्रीन असलेल्या डिव्हाइससाठी. पॉप-अप विंडो, टॅब, ऑफ-कॅनव्हास मेनू आणि इतर तत्सम तंत्रे पृष्ठावरील घटकांची संख्या कमी करण्यात मदत करतील. अनावश्यक घटकांपासून जागा मोकळी करून, तुम्ही इंटरफेस सोयीस्कर आणि वापरकर्ता-अनुकूल बनवाल.

तुमच्या बटणांसाठी एक मोठी क्लिक करण्यायोग्य जागा तयार करा - बटणाचे क्लिक करण्यायोग्य क्षेत्र जितके मोठे असेल तितके वापरकर्त्यासाठी त्याच्याशी संवाद साधणे सोपे होईल.

तुमच्या इंटरफेसमध्ये परस्पर क्रियाशीलता जोडा - वापरकर्त्याच्या कृतीला प्रतिसाद म्हणून, प्रतिसाद क्रिया तयार करा - एक ॲनिमेशन जे डेस्कटॉप डिव्हाइसवर एखाद्या घटकावर फिरवताना आणि मोबाइल डिव्हाइसवर एखाद्या घटकाला स्पर्श करताना कार्य करेल.

2. व्ह्यूपोर्ट मेटा टॅग वापरून व्ह्यूपोर्ट सानुकूल करणे

Android आणि iOS ऑपरेटिंग सिस्टीमसाठी मोबाइल ब्राउझरना साइटच्या पृष्ठांचा आपोआप आकार बदलण्यापासून रोखण्यासाठी, name="viewport" विशेषता असलेला एक विशेष टॅग वापरला जातो. हा टॅग तुम्हाला रुंदी आणि प्रारंभिक-स्केल पॅरामीटर्ससाठी विशिष्ट मूल्य सेट करण्याची परवानगी देतो:

- आरंभिक-स्केल=1 म्हणजे ब्राउझरमधील पृष्ठाचा आकार व्ह्यूपोर्ट आकाराच्या 100% इतका असेल. म्हणजेच, फिजिकल पिक्सेल आणि सीएसएस पिक्सेल मधील गुणोत्तर 1:1 असेल;

— width=device-width म्हणजे पृष्ठाची रुंदी कोणत्याही ब्राउझरच्या विंडोच्या रुंदीच्या १००% इतकी असेल. म्हणजेच, साइट पृष्ठाची रुंदी डिव्हाइसच्या रुंदीशी संबंधित आहे, म्हणून ते मोजण्याची आवश्यकता नाही.

या उदाहरणात, ब्राउझर विंडोमधील सामग्री त्याच्या भौतिक आकाराच्या तुलनेत 2 पट मोठी असेल.

वापरकर्ते पृष्ठाची रुंदी किती वाढवू किंवा कमी करू शकतात हे नियंत्रित करण्यासाठी देखील टॅगचा वापर केला जाऊ शकतो:

हा कोड तुम्हाला पृष्ठाची रुंदी डिव्हाइस स्क्रीनच्या रुंदीच्या 3 पटीने वाढवण्याची आणि डिव्हाइस स्क्रीनच्या रुंदीच्या अर्ध्यापर्यंत कमी करण्याची अनुमती देईल.

तुम्ही वापरकर्त्यांना वापरकर्ता-स्केलेबल विशेषता वापरून स्केल करण्याची क्षमता नाकारू शकता:

3. सार्वत्रिक टेम्पलेट्स

प्रतिसाद देणारे वेब डिझाइन तयार करण्यासाठी वापरलेले बहुतेक लेआउट ल्यूक रॉब्लेव्स्कीने परिभाषित केलेल्या पाच पॅटर्न श्रेणींमध्ये येतात:
बहुतेक द्रव
स्तंभ ड्रॉप (एकमेकांच्या खाली स्तंभ),
लेआउट शिफ्टर (लेआउट हलवत),
लहान बदल (लहान बदल),
कॅनव्हास बंद.
काही प्रकरणांमध्ये, पृष्ठ टेम्पलेट्सचे संयोजन वापरू शकते, जसे की कॉलम ड्रॉप आणि ऑफ कॅनव्हास.

३.१. बहुतेक द्रव

एक लोकप्रिय मांडणी ज्यामध्ये प्रामुख्याने रबर जाळी असते. मोठ्या किंवा मध्यम-रुंदीच्या स्क्रीनवर, त्याचा आकार सामान्यतः अपरिवर्तित राहतो, फक्त मार्जिन समायोजित केले जातात; लहान स्क्रीनवर, रबर ग्रिडमुळे मुख्य सामग्रीसाठी लेआउटची पुनर्गणना केली जाते आणि स्तंभ एकमेकांच्या खाली ठेवले जातात. टेम्पलेटचा फायदा असा आहे की त्याला लहान स्क्रीन आणि मोठ्या स्क्रीन दरम्यान फक्त एक नियंत्रण बिंदू आवश्यक आहे.

३.२. स्तंभ ड्रॉप

जर विंडोची रुंदी सर्व सामग्री प्रदर्शित करू शकत नसेल तर स्तंभ एकामागून एक उभे केले जातात. परिणामी, स्तंभ एकमेकांच्या खाली अनुलंब स्थित असतील. या लेआउट टेम्पलेटसाठी ब्रेकपॉइंट्सची निवड सामग्रीवर अवलंबून असते आणि प्रत्येक डिझाइन पर्यायासाठी स्वतंत्रपणे निर्धारित केली जाते.

३.३. लेआउट शिफ्टर

सर्वात प्रतिसाद देणारा टेम्पलेट, कारण ते वेगवेगळ्या रुंदीच्या स्क्रीनसाठी एकाधिक नियंत्रण बिंदू प्रदान करते. या लेआउटमधील मुख्य फरक असा आहे की रेंडर ट्रीची पुनर्गणना करण्याऐवजी आणि एकमेकांच्या खाली स्तंभ ठेवण्याऐवजी, सामग्री हलविली जाते. मुख्य ब्रेकपॉइंट्समधील महत्त्वपूर्ण फरकांमुळे, हा लेआउट राखणे अधिक आव्हानात्मक आहे आणि तुम्हाला केवळ सामग्रीचा संपूर्ण लेआउटच नाही तर त्यातील घटक देखील बदलावे लागतील.

३.४. लहान चिमटा

टेम्पलेट लेआउटमध्ये लहान बदल करते, जसे की फॉन्ट आकार समायोजित करणे, प्रतिमांचा आकार बदलणे किंवा सामग्री हलवणे. हे एकल-स्तंभ लेआउटवर चांगले कार्य करते, जसे की एकल-पृष्ठ साइट आणि भरपूर मजकूर असलेले लेख.

३.५. कॅनव्हास बंद

नेव्हिगेशन घटक किंवा ॲप मेनू यासारखी क्वचितच वापरली जाणारी सामग्री, ऑफ-स्क्रीन ठेवली जाते आणि जेव्हा स्क्रीन आकार अनुमती देते तेव्हाच ती दर्शविली जाते. छोट्या स्क्रीनवर, सामग्री एका क्लिकवर उघडते.

4. प्रतिसादात्मक डिझाइन

रिस्पॉन्सिव्ह डिझाइनच्या विपरीत, अडॅप्टिव्ह वेब डिझाईन डिव्हाइस आकारांवर लक्ष केंद्रित करते. हे नियंत्रण (ब्रेकिंग) बिंदूंवर आधारित विविध प्रकारच्या उपकरणांसाठी (मोबाइल डिव्हाइसेस, टॅब्लेट, डेस्कटॉप संगणक) अनेक स्थिर मांडणी वापरते. म्हणजेच, लेआउट विशिष्ट डिव्हाइस ब्राउझर विंडो आकारांवर लोड होतात आणि लेआउटमधील संक्रमणे सहजतेने न होता अचानक होतात.

सामान्यतः, प्रतिसादात्मक लेआउटमध्ये स्क्रीनच्या रुंदीनुसार सहा लेआउट पर्याय असतात:
320
480
760
960
1200
1600.

प्रतिसादात्मक लेआउट कार्यक्षमतेवर लक्ष केंद्रित करतात, म्हणजे डिझाइन डिव्हाइस वैशिष्ट्ये विचारात घेते, जसे की मोबाइल डिव्हाइससाठी स्पर्श नियंत्रणे किंवा डेस्कटॉप मॉनिटर्ससाठी मोठी जागा.

मूलभूत प्रतिसादात्मक डिझाइन तंत्र

सातत्य राखा - कोणत्याही वेबसाइटला वापरकर्त्यांसह विश्वास निर्माण करणे आवश्यक आहे जेणेकरून त्यांना नेव्हिगेट करणे आणि त्याच्याशी संवाद साधण्यास सोयीस्कर वाटेल. सातत्यपूर्ण डिझाइनचा अर्थ असा आहे की साइटवरील दुसऱ्या पृष्ठावर जाताना, वापरकर्त्याला ते दुसऱ्या साइटवर असल्यासारखे वाटत नाही. लहान तपशीलांकडे लक्ष द्या, व्हिज्युअल पदानुक्रम तयार करा आणि महत्त्वाचे घटक ठळकपणे हायलाइट करा. संपूर्ण साइटवर एकसमान रंगसंगती वापरा, वेगवेगळ्या परिस्थितींसाठी समान घटकांचा पुन्हा वापर करा, जसे की समान पॉपअप सूचना डिझाइन.

ग्रिड वापरा—स्तंभांची रुंदी आणि स्तंभांमधील जागा नियंत्रित करण्यासाठी १२-स्तंभ रचना श्रेयस्कर आहे.

5. रिस्पॉन्सिव्ह आणि ॲडॉप्टिव्ह वेब डिझाइनमध्ये काय फरक आहे
तांदूळ. 4. वेगवेगळ्या उपकरणांवर प्रतिसादात्मक आणि अनुकूली डिझाइन

प्रतिसादात्मक मांडणी तयार करण्यासाठी, तुम्ही मीडिया क्वेरी आणि % सह निर्दिष्ट केलेल्या ग्रिड घटकांचे सापेक्ष आकार वापरता. रिस्पॉन्सिव्ह डिझाइनमध्ये, सर्व्हर-साइड स्क्रिप्ट्स प्रथम वापरकर्ता साइटवर (डेस्कटॉप, फोन किंवा टॅबलेट) प्रवेश करण्याचा प्रयत्न करीत असलेल्या डिव्हाइसचा प्रकार निर्धारित करतात, त्यानंतर पृष्ठाची अचूक आवृत्ती लोड करते जी त्याच्यासाठी सर्वात अनुकूल आहे. ग्रिड घटकांना निश्चित px आकार दिले आहेत.

म्हणून, या तंत्रांमधील मुख्य फरक म्हणजे प्रतिसादात्मक डिझाइन - सर्व उपकरणांसाठी एक लेआउट, अनुकूली डिझाइन - प्रत्येक प्रकारच्या उपकरणासाठी एक लेआउट.

6. उपयुक्त सेवा आणि साधने

Windows, Linux आणि Mac OS X साठी Android एमुलेटर. iOS सिम्युलेटर फक्त Mac OS X वापरकर्त्यांसाठी उपलब्ध आहे आणि Xcode पॅकेजचा भाग आहे (ते Mac App Store वरून विनामूल्य डाउनलोड केले जाऊ शकते).

कोणत्याही वेबसाइटवर चालणारी PHP स्क्रिप्ट स्क्रीनचा आकार शोधते आणि त्यास फिट करण्यासाठी प्रतिमा आकार समायोजित करते, परिणामी लहान स्क्रीनवर लहान प्रतिमा आकारात येतो.

डिव्हाइसेसचे भौतिक परिमाण आणि उंची आणि रुंदीसाठी CSS मूल्ये, तसेच मोबाइल डिव्हाइससाठी पिक्सेल-गुणोत्तर मूल्य यांच्यातील पत्रव्यवहार सारण्या.

मीडिया क्वेरी आणि प्रतिसाद वेब डिझाइन वापरून वेबसाइट्सचा संग्रह.

12-स्तंभ लेआउटवर आधारित CSS फ्रेमवर्क, कमाल 960px. Chrome, Safari, Firefox, IE 7 आणि उच्च, ब्राउझरच्या मोबाइल आवृत्त्यांद्वारे समर्थित.

वेब अनुप्रयोग विकसित करण्यासाठी साधनांचा संच. कमी भाषा, 12-स्तंभ अनुकूली मांडणी, मोबाइल उपकरणांसाठी समर्थन, टॅब्लेट आणि मॉनिटर्स, अनेक घटक, बटणे, ड्रॉप-डाउन मेनू, इनपुट फील्डची सानुकूल शैली, सूची, शीर्षके, लेबले, चिन्ह, सूचना, टॅब, प्रगती बार, टूलटिप्स , “ॲकॉर्डियन”, “कॅरोसेल” आणि असेच, विविध Javascript प्लगइन, स्कॅफोल्डिंग सपोर्ट, आधीपासून तयार केलेल्या HTML वर बूटस्ट्रॅप शैली लागू करणे.