अनुकूल आणि प्रतिसाद वेब डिझाइन. रिस्पॉन्सिव्ह विरुद्ध अनुकूली डिझाइन: जे वापरकर्त्यासाठी चांगले आहे

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

तथाकथित अनुकूली डिझाइन काल दिसले नाही, परंतु लोकांनी अलीकडेच याबद्दल गांभीर्याने बोलणे सुरू केले, ते वापरकर्त्याच्या अनुभवात आणू शकणाऱ्या सुधारणांबद्दल धन्यवाद.

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

प्रतिसाद वेब डिझाइन

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

लवचिक किंवा "रबर" रचना असलेल्या साइटसाठी या पद्धतीचा वापर अधिक योग्य आहे. अन्यथा, सध्याच्या लवचिकतेच्या अभावाची भरपाई करण्यासाठी विकासक टॅब्लेट आणि मोबाइल फोनसाठी साइटची पुनर्रचना करण्यासाठी बराच वेळ आणि संसाधने खर्च करतील.

त्याच्या बदलत्या संरचनेव्यतिरिक्त, प्रतिसादात्मक डिझाइनचे इतर अनेक फायदे आहेत:

1. वेगवेगळ्या ब्राउझरमध्ये आणि वेगवेगळ्या प्लॅटफॉर्मवर संसाधनाचे समान स्वरूप
2. साइटची समान URL आहे, जी एसइओ ऑप्टिमायझेशनमध्ये योगदान देते
3. विकसकांना फक्त एक साइट राखणे आवश्यक आहे, जे डिझाइन आणि सामग्रीवर घालवलेला वेळ कमी करते

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

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

प्रतिसाद वेब डिझाइन

प्रतिसादात्मक डिझाइन थोडे वेगळे कार्य करते. हे वापरकर्त्यांना ते ज्या डिव्हाइसवरून साइट पाहत आहेत त्या डिव्हाइसच्या आधारे श्रेणींमध्ये विभागते.

रिस्पॉन्सिव्ह डिझाईन तंत्रज्ञानाचा वापर करून तयार केलेल्या साइट्स डिव्हाइसच्या आकाराकडे दुर्लक्ष करून सारख्याच दिसतात, तर प्रतिसाद देणारा संसाधन वापरकर्ता कोणत्या डिव्हाइसवरून साइटवर प्रवेश करत आहे हे शोधतो आणि त्याची आवृत्ती प्रदर्शित करतो जी विशेषतः त्या प्रकारच्या डिव्हाइससाठी डिझाइन केलेली होती.

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

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

प्रतिमा अधिक जलद लोड होतात कारण त्या संकुचित केल्या जातात आणि वापरकर्त्याच्या उपकरणाशी जुळवून घेतल्या जातात

साइट जलद लोड होते कारण सर्व्हर वापरकर्त्याचे डिव्हाइस प्रकार निर्धारित करतो आणि संबंधित प्रोग्राम कोड लोड करतो

डेव्हलपर सर्जनशील स्वातंत्र्याचा आनंद घेतात कारण ते साइटच्या विविध आवृत्त्या तयार करू शकतात आणि त्यांना मोबाइल वापरकर्त्यांसाठी अधिक सोयीस्कर बनवण्यासाठी विविध डिव्हाइस प्रकारांनुसार सानुकूलित करू शकतात.

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

कोणता पर्याय कशासाठी योग्य आहे?

जरी तुम्ही वर्णन केलेल्या दोन प्रकारच्या डिझाईनपैकी एकाला प्राधान्य देत असलात तरीही, हे लक्षात घेणे महत्त्वाचे आहे की तुम्हाला वापरकर्त्याच्या अनुभवाचा सर्वात आधी विचार करणे आवश्यक आहे.

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

प्रत्येकजण प्रतिसाद वेब डिझाइनबद्दल बोलत आहे. पण याचा अर्थ प्रत्येकाला ते कशासाठी आहे हे समजते का?

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

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

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

वापरकर्ता निराशा

काही लोकांना असे वाटते की वापरकर्त्यासाठी कार्यक्षमता कमी करणे आणि त्यांना महत्वाची नसलेली सामग्री काढून टाकणे सामान्य आहे. परंतु तुम्ही कट केलेली किंवा दुय्यम पृष्ठावर हलवलेली माहिती माझ्यासाठी सर्वात महत्त्वाची सामग्री नाही याची खात्री कशी बाळगता येईल?!

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

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

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

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

चरण-दर-चरण मार्गदर्शक

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

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

मूलभूत HTML रचना:

प्रतिसाद साइट डेमो

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

लोगो

• घर
• खरेदी करा
• सेवा
• संपर्क

कथा

मर्सिडीज एसएल मॉडेलचा इतिहास 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 वर बूटस्ट्रॅप शैली लागू करणे.

सर्व नमस्कार! अलीकडे, माझ्या एका प्रकल्पाची आकडेवारी पाहिल्यानंतर, मला जाणवले की प्रतिसाद देणारी वेबसाइट डिझाइन कशी तयार करावी हे शिकण्याची वेळ आली आहे, म्हणजेच डेस्कटॉप संगणक आणि लॅपटॉप आणि मोबाइल डिव्हाइसवर चांगले दिसेल. स्वतःसाठी एक नजर टाका, मेट्रिका इशारे.

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

मोबाइल डिव्हाइस वापरकर्ते तुमची साइट कशी पाहतात हे तुम्हाला माहिती आहे का? सुदैवाने, तपासणीसाठी एक उत्कृष्ट सेवा आहे - responsinator.com

येथे सर्व काही आश्चर्यकारकपणे सोपे आहे - आपण साइट पत्ता प्रविष्ट करा आणि मोबाइल डिव्हाइसवर ते कसे दिसते ते पहा. चला एका ब्लॉगचे उदाहरण घेऊ ज्यास कदाचित प्रत्येकजण परिचित असेल.

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

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

प्रतिसादात्मक डिझाइन म्हणजे काय

स्क्रीनच्या रुंदीनुसार ब्लॉक्सचा आकार बदलतो तेव्हा सुरुवातीला मला अडॅप्टिव्ह आणि “फ्लुइड” लेआउटमधील फरक दिसला नाही. तथापि, एक फरक आहे.

रिस्पॉन्सिव्ह डिझाईन फक्त रुंदीमध्ये वाढवत नाही किंवा कमी करत नाही, ते स्क्रीनच्या आकाराशी जुळवून घेते, कधीकधी ब्लॉक्सची शैली पूर्णपणे बदलते.

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

आपल्या वेबसाइटसाठी प्रतिसादात्मक डिझाइन कसे बनवायचे

तुमचे बजेट आणि CSS/HTML च्या ज्ञानावर अवलंबून, अनेक पर्याय असू शकतात.

फ्रीलांसरकडून अनुकूली लेआउट ऑर्डर करा

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

तयार डिझाइन शोधा

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

• www.templatemonster.com हे विविध CMS आणि फक्त HTML साइट्ससाठी सशुल्क टेम्पलेट्सच्या सर्वात लोकप्रिय संग्रहांपैकी एक आहे.
• www.templatemo.com - अनेक विनामूल्य आधुनिक डिझाइन पर्याय.

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

फ्रेमवर्क वापरा

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

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

लेआउट स्वतः बनवा

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

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

@मीडिया नियम
त्यामुळे आम्ही आमच्या सीएसएस फाइलमध्ये समान ब्लॉक्ससाठी वेगवेगळ्या शैली लिहू शकतो. हे असे काहीतरी दिसते:

#left(रुंदी: 600px; फ्लोट: डावीकडे; समास-उजवीकडे: 10px; ) #उजवे (रुंदी: 400px; फ्लोट: उजवीकडे; ) @media फक्त स्क्रीन आणि (कमाल-रुंदी: 1010px) ( #left, #right( रुंदी : 98%; फ्लोट: काहीही नाही; 10px ऑटो;

या उदाहरणात, # डावा ब्लॉक 600 पिक्सेल रुंद आहे आणि 400 पिक्सेल रुंद # उजव्या ब्लॉकच्या डावीकडे स्थित असेल. परंतु मॉनिटरचे रिझोल्यूशन 1010 पिक्सेलपेक्षा कमी असल्यास, आम्ही दोन्ही ब्लॉकमधून रॅपिंग काढून टाकतो आणि त्यांना स्क्रीनच्या रुंदीच्या 98% पर्यंत वाढवतो.

आणि तुम्हाला खालील स्क्रीन आकारांसाठी नियम कसे लिहावे लागतील:

• उभ्या स्थितीत iPhone 3-5 साठी 320px
• क्षैतिज स्थितीत iPhone 3-4 साठी 480px
• iPhone 5 साठी क्षैतिजरित्या 568px
• उभ्या स्थितीत स्मार्टफोनसाठी 384px
• क्षैतिज स्थितीत स्मार्टफोनसाठी 600px
• iPad साठी क्षैतिजरित्या 768px
• उभ्या स्थितीत iPad साठी 1024px

रिझोल्यूशनची संपूर्ण यादी responsinator.com वर किंवा तुमच्या साइटसाठी Yandex.Metrica अहवालात आढळू शकते (विभाग तंत्रज्ञान/डिस्प्ले रिझोल्यूशन). एका शब्दात, वेबसाइट लेआउटशी परिचित असलेल्यांना ही समस्या समजून घेणे कठीण होणार नाही.

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

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

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

हा लेख साइटचे मुख्य घटक आणि ते कसे जुळवून घ्यावे ते पाहतील.

स्क्रीन रिझोल्यूशन समायोजित करत आहे

तत्वतः, आपण डिव्हाइसेसना वेगवेगळ्या श्रेणींमध्ये विभागू शकता आणि त्या प्रत्येकासाठी स्वतंत्रपणे डिझाइन करू शकता, परंतु यास खूप वेळ लागेल आणि पाच वर्षांत कोणती मानके असतील हे कोणाला माहित आहे? शिवाय, आकडेवारीनुसार, आमच्याकडे विविध रिझोल्यूशनची संपूर्ण श्रेणी आहे:

हे स्पष्ट होते की आम्ही प्रत्येक डिव्हाइससाठी स्वतंत्रपणे डिझाइन करणे सुरू ठेवू शकणार नाही. पण मग करायचं काय?

आंशिक समाधान: सर्वकाही लवचिक बनवा

अर्थात, ही एक परिपूर्ण पद्धत नाही, परंतु ती बहुतेक समस्या दूर करते.

एथन मार्कोटने प्रतिसादात्मक मांडणीचा वापर दर्शविणारा एक साधा टेम्पलेट तयार केला:

पहिल्या दृष्टीक्षेपात असे दिसते की सर्वकाही सोपे आहे, परंतु तसे नाही. लोगो पहा:

आपण संपूर्ण प्रतिमा कमी केल्यास, शिलालेख अवाचनीय होतील. म्हणून, लोगो जतन करण्यासाठी, चित्र दोन भागांमध्ये विभागले गेले आहे: पहिला भाग (चित्र) पार्श्वभूमी म्हणून वापरला जातो, दुसरा (लोगो) त्याचा आकार प्रमाणानुसार बदलतो.

h1 घटकामध्ये पार्श्वभूमी म्हणून एक प्रतिमा असते आणि प्रतिमा कंटेनरच्या (शीर्षलेख) पार्श्वभूमीशी संरेखित केलेली असते.

लवचिक प्रतिमा

प्रतिसादात्मक डिझाइनसह कार्य करताना प्रतिमांसह कार्य करणे ही सर्वात महत्वाची समस्या आहे. प्रतिमांचा आकार बदलण्याचे अनेक मार्ग आहेत आणि त्यापैकी बहुतेक अंमलात आणणे अगदी सोपे आहे. CSS मध्ये कमाल-रुंदी वापरणे हा एक उपाय आहे:

Img (कमाल-रुंदी: 100%;)

प्रतिमेची कमाल रुंदी ही स्क्रीन किंवा ब्राउझर विंडोच्या रुंदीच्या 100% असते, त्यामुळे रुंदी जितकी लहान असेल तितकी प्रतिमा लहान असेल. लक्षात ठेवा की कमाल-रुंदी IE मध्ये समर्थित नाही, म्हणून रुंदी वापरा: 100% .

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

दुसरा मार्ग: प्रतिसादात्मक प्रतिमा

फिलामेंट ग्रुपने सादर केलेले हे तंत्र केवळ प्रतिमांचा आकार बदलत नाही, तर लोडिंगला गती देण्यासाठी लहान स्क्रीनवरील प्रतिमांचे रिझोल्यूशन देखील संकुचित करते.

या तंत्रासाठी Github वर उपलब्ध अनेक फायली आवश्यक आहेत. प्रथम आपण JavaScript फाईल घेतो ( rwd-images.js), फाइल .htaccessआणि rwd.gif(प्रतिमा फाइल). मग आम्ही मोठ्या आणि लहान रिझोल्यूशनला जोडण्यासाठी काही HTML वापरतो: प्रथम उपसर्ग असलेली छोटी प्रतिमा .r(प्रतिमा प्रतिसाद देणारी असावी हे दाखवण्यासाठी), नंतर data-fullsrc वापरून मोठ्या प्रतिमेशी लिंक करा:

480 px पेक्षा रुंद कोणत्याही स्क्रीनसाठी, उच्च रिझोल्यूशन प्रतिमा लोड केली जाईल ( largeRes.jpg), आणि छोट्या पडद्यावर ते लोड होईल ( smallRes.jpg).

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

या समस्येचे निराकरण करण्यासाठी, मेटा टॅग वापरा:

प्रारंभिक-स्केल एक समान असल्यास, प्रतिमांची रुंदी स्क्रीनच्या रुंदीएवढी होईल.

सानुकूल करण्यायोग्य पृष्ठ लेआउट रचना

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

उदाहरणार्थ, तुमच्याकडे मुख्य स्टाइलिंग फाइल आहे जी #wrapper , #content , #sidebar , #nav सोबत रंग, पार्श्वभूमी आणि फॉन्ट निर्दिष्ट करते. तुमच्या मास्टर स्टाइलमुळे तुमचा लेआउट खूप अरुंद, लहान, रुंद किंवा उंच असल्यास, तुम्ही हे ओळखू शकता आणि नवीन शैली समाविष्ट करू शकता.

style.css (मुख्य):

/* मूलभूत शैली ज्या चाइल्ड स्टाइल शीटद्वारे इनहेरिट केल्या जातील */ html,बॉडी(पार्श्वभूमी... फॉन्ट... रंग... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* संरचनात्मक घटक */ #wrapper(रुंदी: 80%; समास: 0 स्वयं; पार्श्वभूमी: #fff; पॅडिंग: 20px; ) #सामग्री (रुंदी: 54%; फ्लोट: डावीकडे; समास-उजवीकडे: 3%; ) # साइडबार-डावीकडे (रुंदी: 20%; फ्लोट: डावीकडे; समास-उजवीकडे: 3%; ) # साइडबार-उजवीकडे (रुंदी: 20%; फ्लोट: डावीकडे; )

mobile.css (मुल):

#wrapper(रुंदी: 90%;) #content( रुंदी: 100%; ) #sidebar-left( रुंदी: 100%; स्पष्ट: दोन्ही; /* नवीन डिझाइनसाठी अतिरिक्त शैली */ बॉर्डर-टॉप: 1px घन #ccc ; मार्जिन-टॉप: 20px; ) #sidebar-उजवीकडे (रुंदी: 100%; स्पष्ट: दोन्ही; /* आमच्या नवीन लेआउटसाठी अतिरिक्त स्टाइलिंग */ बॉर्डर-टॉप: 1px सॉलिड #ccc; मार्जिन-टॉप: 20px;)

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

CSS3 मीडिया क्वेरी

प्रतिसादात्मक डिझाईन्स तयार करण्यासाठी तुम्ही CSS3 मीडिया क्वेरीचा वापर कसा करू शकता ते पाहू या. min-width ब्राउझर विंडो किंवा स्क्रीनची किमान रुंदी निर्दिष्ट करते ज्यावर विशिष्ट शैली लागू केल्या जातील. कोणतेही मूल्य किमान-रुंदीपेक्षा कमी असल्यास, शैलींकडे दुर्लक्ष केले जाईल. कमाल-रुंदी उलट करते.

@media स्क्रीन आणि (किमान-रुंदी: 600px) ( .hereIsMyClass (रुंदी: 30%; फ्लोट: उजवीकडे; ) )

मीडिया क्वेरी फक्त तेव्हाच कार्य करेल जेव्हा किमान-रुंदी 600 px पेक्षा जास्त किंवा समान असेल.

@media स्क्रीन आणि (कमाल-रुंदी: 600px) ( .aClassforSmallScreens (स्पष्ट: दोन्ही; फॉन्ट-आकार: 1.3em; ) )

या प्रकरणात वर्ग ( लहान स्क्रीनसाठी वर्ग) जेव्हा स्क्रीनची रुंदी 600 px पेक्षा कमी किंवा समान असेल तेव्हा कार्य करेल.

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

@media स्क्रीन आणि (कमाल-डिव्हाइस-रुंदी: 480px) ( .classForiPhoneDisplay ( फॉन्ट-आकार: 1.2em; ) ) @media स्क्रीन आणि (कम-डिव्हाइस-रुंदी: 768px) ( .minimumiPadWidth ( स्पष्ट: दोन्ही; समास-तळाशी : 2px घन #ccc; )

विशेषत: आयपॅडसाठी, मीडिया क्वेरीमध्ये मालमत्ता आहे अभिमुखता, ज्याची मूल्ये एकतर असू शकतात लँडस्केप(क्षैतिज), किंवा पोर्ट्रेट(उभ्या):

@media स्क्रीन आणि (ओरिएंटेशन: लँडस्केप) ( .iPadLandscape (रुंदी: 30%; फ्लोट: उजवीकडे; ) ) @media स्क्रीन आणि (ओरिएंटेशन: पोर्ट्रेट) ( .iPad पोर्ट्रेट (स्पष्ट: दोन्ही; ) )

तुम्ही मीडिया क्वेरी मूल्ये देखील एकत्र करू शकता:

@media स्क्रीन आणि (किमान-रुंदी: 800px) आणि (कमाल-रुंदी: 1200px) ( .classForaMediumScreen (पार्श्वभूमी: #cc0000; रुंदी: 30%; फ्लोट: उजवीकडे; ) )

हा कोड फक्त 800 आणि 1200 px रुंद स्क्रीन किंवा ब्राउझर विंडोसाठी चालेल.

तुम्ही यासारख्या भिन्न मीडिया क्वेरी मूल्यांसाठी शैलींसह विशिष्ट शीट लोड करू शकता:

JavaScript

जर तुमचा ब्राउझर CSS3 मीडिया क्वेरीस सपोर्ट करत नसेल, तर jQuery वापरून स्टाइल रिप्लेसमेंट करता येईल:

$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // रुंदी असल्यास 600 px पेक्षा कमी , मोबाईल स्टाइलशीट वापरले जाते जर(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // रुंदी 600 px पेक्षा जास्त असल्यास, डेस्कटॉप स्टाइलशीट $("लिंक").attr((href: "style.css")); ) ) ));

पर्यायी सामग्री प्रदर्शन

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

येथे आमचे मार्कअप आहे:

डावा साइडबार सामग्री | उजवी साइडबार सामग्री

मुख्य सामग्री डावा साइडबार उजवा साइडबार

style.css (मुख्य):

#सामग्री (रुंदी: 54%; फ्लोट: डावीकडे; समास-उजवीकडे: 3%; ) #साइडबार-डावीकडे (रुंदी: 20%; फ्लोट: डावीकडे; समास-उजवीकडे: 3%; ) #साइडबार-उजवीकडे (रुंदी: 20% %; फ्लोट: डावीकडे; .साइडबार-एनएव्ही

mobile.css (सरलीकृत):

#सामग्री (रुंदी: 100%; ) #साइडबार-डावीकडे (प्रदर्शन: काहीही नाही; ) #साइडबार-उजवे (प्रदर्शन: काहीही नाही; ) .साइडबार-एनएव्ही (प्रदर्शन: इनलाइन; )

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