उत्तरदायी डिजाइन (जिसे 'एडाप्टिव' डिजाइन के रूप में भी जाना जाता है), जहां एक ही वेब पेज ब्राउज़र की चौड़ाई के आधार पर दो या अधिक हाथ से तैयार किए गए लेआउट का सबसे अच्छा संस्करण प्रस्तुत करता है, अधिकांश वेबसाइटों के लिए सबसे मजबूत विकल्प है। यह देखने के लिए कि, वेब डिजाइनरों के लिए उपलब्ध सभी विकल्पों को देखने में मदद मिलती है:
फिक्स्ड लेआउट
एक निश्चित पृष्ठ चौड़ाई, जहां सामग्री की चौड़ाई ब्राउज़र चौड़ाई की परवाह किए बिना समान होती है, एक समान लुक प्रदान करती है और उपकरणों के पार महसूस करती है और अधिक लचीले डिजाइनों की तुलना में कम कोडिंग, सोच और रखरखाव की आवश्यकता हो सकती है।
कुछ लोग महसूस करते हैं कि फिक्स्ड-चौड़ाई लेआउट एक बीगॉन युग के अवशेष हैं, जहां लोग पिक्सेल पूर्णता को तरसते थे और सभी ब्राउज़रों में समान दिखते हैं। हार्डबेल्ड वेब डिज़ाइन के लेखक एंडी क्लार्क को लगता है कि यह सोचने का तरीका मर चुका है:
"अतीत में यह मानक अभ्यास था कि एक वेबसाइट बनाने के लिए कड़ी मेहनत की जाए जो सभी ब्राउज़रों में समान दिखे और काम करे - चाहे उनकी क्षमता कुछ भी हो। इसका मतलब यह है कि समझौता करना और सभी ब्राउज़रों द्वारा समर्थित प्रौद्योगिकियों का उपयोग न करने से बचें।
क्या यह कठोर है?
अपने आप को, मीठे गाल बच्चे मत करो। यह हमारे शिल्प को विकसित करने या बेहतर वेब बनाने का तरीका नहीं है। इस तरह की पुरानी सोच हमें वापस रखती है। यह हमें सही काम न करने के लिए बहाने बनाने के लिए मजबूर करता है। सबसे बुरा यह है कि हम, वेब के वर्तमान संरक्षकों के रूप में, जो कुछ भी संभव है उसे सीमित करने की अनुमति देना है। "
- एंडी क्लार्क, हार्डबोल्ड वेब डिज़ाइन, पी 6 [पीडीएफ संस्करण यहां उपलब्ध है ]
हालांकि कुछ निश्चित लेआउट्स को आलस्य की ऊंचाई के रूप में देखते हैं, फिक्स्ड-चौड़ाई डिज़ाइन अभी भी बहुत अधिक स्मार्ट डिज़ाइन टीमों द्वारा द्रव या अनुकूल लेआउट पर चुने जाते हैं। उदाहरण के लिए, Apple वर्तमान में iMacs को वैसा ही लेआउट प्रदान करता है जैसा वह iPads और iPhones को करता है। मोबाइल वेब ब्राउज़िंग को जन-जन तक पहुँचाने के लिए ज़िम्मेदार कंपनी मोबाइल उपकरणों के लिए अपनी वेबसाइट का अनुकूलन क्यों नहीं करती है?
क्योंकि यह नहीं लगता कि इसकी आवश्यकता है।
छोटे स्क्रीनों के लिए अपनी वेबसाइट को अपनाने के बजाय, Apple ने उन स्क्रीनों पर विस्तृत वेबसाइटों को आराम से संभालने के लिए हार्डवेयर और सॉफ्टवेयर का निर्माण किया। Apple को लगता है कि एक 'मोबाइल ऑप्टिमाइज़्ड' का अनुभव सबसे अच्छा देशी एप्लिकेशन में दिया जाता है, ब्राउज़र विंडो में नहीं। इसलिए यह मोबाइल-अनुकूलित वेब स्टोर की सेवा के बजाय ऐप्पल स्टोर ऐप प्रदान करता है । और यही कारण है कि यह प्रकाशकों को अनुकूलित वेबसाइटों पर पत्रिका ऐप पेश करने के लिए प्रोत्साहित करता है। Apple का वर्तमान वेब डिज़ाइन दर्शन स्पष्ट है: उन सभी को ठीक करने के लिए एक लेआउट ठीक काम करता है। बाकी सब चीजों के लिए, उसके लिए एक ऐप है।
अकेले इस कारण से, कुछ तर्क देंगे कि निश्चित लेआउट हमेशा की तरह प्रासंगिक हैं; वे कहेंगे कि जब हम मोबाइल ब्राउज़र सॉफ़्टवेयर को सुधारने के लिए प्रतीक्षा करते हैं, और HTML और JavaScript डेवलपर्स को विकसित करने और मौन ऐप स्टोर से दूर लुभाने के लिए द्रव और अनुकूली लेआउट बंद कर देते हैं।
मेरी राय में, हालांकि, एक मोबाइल डिवाइस पर किसी भी लम्बाई के लिए वेब पर अपना रास्ता चुटकी-टैप-ड्रैग-स्क्रॉल करना एक आईफोन पर भी ज्यादा मजेदार नहीं है। यदि आप मानते हैं कि सबसे अच्छा वेब अनुभव वह है जो वेबसाइटों को पढ़ने, प्रकाशित करने, और बातचीत करने के बजाय एक खुशी के साथ काम करता है, चाहे आप जिस डिवाइस का उपयोग कर रहे हों, आपको कुछ बिंदु पर यह स्वीकार करना होगा कि प्रत्येक के अनुरूप सामग्री परोसना आगंतुक विचार करने योग्य है।
द्रवित करना
द्रव लेआउट, जहां स्क्रीन को भरने के लिए पृष्ठ की चौड़ाई बहती है (अक्सर एक अधिकतम अधिकतम चौड़ाई तक), व्यूपोर्ट के अधिक अनुकूल सामग्री को वितरित करके विभिन्न प्लेटफार्मों पर बेहतर अनुभव का वादा करता है।
व्यवहार में, तरल पदार्थ लेआउट को हल करने की तुलना में अधिक समस्याएं पैदा करते हैं, जैसा कि इस चुटकी में कैमरन मोल ने नोट किया है:
"... फ्लुइड डिज़ाइन हर लेआउट की समस्या को बहुत हल करते हैं क्योंकि कंप्यूटर कार्यालयों को पेपरलेस बनाते हैं अर्थात वे नहीं करते हैं।"
- कैमरन मोल, "सभी साइटों को तरल होना चाहिए?", सितंबर 2006
जब आप एक द्रव लेआउट को अपनाते हैं, तो आप अपने डिजाइन के नियंत्रण को त्याग देते हैं और स्वीकार करते हैं कि पाठ फिर से शुरू होगा, छवियां फिर से आ जाएंगी, लाइन की लंबाई अप्रत्याशित रूप से भिन्न होगी, पाठ, चित्र, और नेविगेशन तत्व छोटी चौड़ाई पर एक साथ क्रश हो सकते हैं, और कॉलम कूदेंगे और तैरेंगे। चारों ओर बस आप को दबाने के लिए।
एक द्रव लेआउट, कुछ कह सकते हैं, यह भी एक आलसी विकल्प है। यह अनुकूली वेब डिजाइन के लिए बन्दूक दृष्टिकोण है। तीन-चार ध्यान से तय चौड़ाई वाले डिज़ाइन के साथ एक अनुरूप अनुभव प्रदान करने के बजाय, आप इस उम्मीद में अप्रत्याशित अनुभव दे रहे हैं कि यह बड़े और छोटे स्क्रीन पर काम कर सकता है, और उम्मीद है कि सभी अंतरालों को प्लग करें जिन्हें आपने पूरी तरह से नहीं माना है। के बीच में।
यह तरल पदार्थ को बेकार नहीं बनाता है। उन्हें काम करने के तरीके हैं। 456 बेरिया सेंट ब्लॉग, उदाहरण के लिए, एक तरल पदार्थ लेआउट एक दिया चौड़ाई, जिसके बाद यह बड़ा कुछ भी के लिए एक निश्चित एक का उपयोग करता करने के लिए गोद ले। और वास्तव में छोटी चौड़ाई पर, साइडबार एक एकल कॉलम का उपयोग करने के लिए दूर चला जाता है जिससे छोटे स्क्रीन पर पढ़ना आसान हो जाता है। लेकिन यह अब एक द्रव लेआउट नहीं है। यह कुछ बेहतर है। यह एक उत्तरदायी डिजाइन है।
उत्तरदायी लेआउट
एक 'उत्तरदायी' या 'अनुकूली' लेआउट - जहां एक ही वेब पेज आगंतुक के ब्राउज़र की चौड़ाई के आधार पर दो या अधिक तैयार किए गए लेआउट का एक संस्करण प्रस्तुत करता है - प्रगतिशील वृद्धि का एक महत्वपूर्ण हिस्सा है, जिसका उद्देश्य एक वेबसाइट को सबसे अच्छा दिखना है यह हर आगंतुक के लिए हो सकता है।
अनुकूली वेब डिज़ाइन के लेखक, आरोन गुस्ताफ़सन के शब्दों में, एक अनुकूली लेआउट को चुनना 'उत्कृष्ट ग्राहक सेवा' है । यदि हम अपनी साइटों को अच्छी तरह से डिजाइन करते हैं, तो वे कहते हैं, आगंतुकों को पूरी तरह से तैयार किए गए अनुभव के साथ प्रस्तुत किया जाना चाहिए बिना यह महसूस किए कि हम उनका उपद्रव कर रहे हैं:
"वेब डिज़ाइनर और डेवलपर्स के रूप में, हमें अपने काम में उतना ही अच्छा होने का प्रयास करना चाहिए जितना कि चौकस, विनीत वेटर, लेकिन यह एक सरल काम नहीं है। जैसे कि एक वेटर को कोई पता नहीं है अगर दरवाजे के माध्यम से आने वाले ग्राहक को अक्सर आवश्यकता होगी। रिफ़िल या कुछ, हमारे पास किसी विशेष उपयोगकर्ता की ज़रूरतों को जानने का कोई तरीका नहीं है जब वे हमारी साइट पर आते हैं। इसके बजाय, हमें उन आवश्यकताओं को पूरा करने के लिए उठना चाहिए। यदि हम वास्तव में अच्छे हैं, तो हम अपने ग्राहकों के बिना भी ऐसा कर सकते हैं। उनके लिए विशेष विचार करना। शुक्र है, प्रगतिशील वृद्धि के उपयोगकर्ता और सामग्री-केंद्रित दृष्टिकोण (सुशोभित गिरावट के नवीनतम-ब्राउज़र दृष्टिकोण के विपरीत) के साथ, यह आसानी से प्राप्त करने योग्य है। "
- हारून गुस्ताफ़सन, अनुकूली वेब डिज़ाइन, पृष्ठ 12 [पीडीएफ संस्करण यहां उपलब्ध है ]
वेब डिजाइनरों के रूप में हमारा काम यह है कि हमारे आगंतुकों के लिए अनुकूल हो और उन्हें हमारे अनुकूल करने के लिए मजबूर न करें - जैसा कि एप्पल का मानना है कि हो सकता है - वेब डिजाइन में एक हालिया विकास है। यह मेरी राय में, एक प्रकार का पुनर्जागरण है: हमने प्रिंट डिजाइन के वर्षों से अच्छी आदतों को चुनकर चेरी को समाप्त कर दिया है। अब हमें मुद्रित पृष्ठ पर पूर्वनिर्धारित स्थान के भीतर काम करके लगाई गई झोंपड़ियों को फेंक देना चाहिए।
एक बार जब हमने ब्राउज़र को एक निश्चित कैनवास के रूप में माना था, तो अब हम स्वीकार कर रहे हैं कि कोई भी परिभाषित कैनवास मौजूद नहीं है, और यह स्क्रीन आकारों के विशाल मिश्रण से कभी भी अधिक स्पष्ट होता जा रहा है, जिसे आप अपने आगंतुक आँकड़ों में देखना शुरू करने में कोई संदेह नहीं है। । प्रत्येक नए डिवाइस को एक अद्वितीय 'पेज साइज' के रूप में टारगेट करने के लिए (और फिर एक नई डिवाइस आने पर सैनिकों को रैली करने के लिए) होने के बजाय हम भविष्य में प्रूफ-कन्वेंशन का पालन कर सकते हैं।
हम बैंड के संदर्भ में सोच सकते हैं - 'बड़े', 'मध्यम' और 'छोटे' - विशिष्ट फोन और टैबलेट के बारे में सोचने के बजाय, फिर उन बैंड में अपना सर्वश्रेष्ठ देखने के लिए साइटों को डिज़ाइन करें। जो भी नए उपकरण सामने आएंगे, वे एक बैंड या किसी अन्य में फिट होंगे, और - भले ही वे दो बैंड के बीच सीमा पर सही हों - हम अभी भी अनुभव पर अधिक नियंत्रण रखते हैं यदि हम एक निश्चित या द्रव का उपयोग करते हैं लेआउट।
में उत्तरदायी वेब डिजाइन, एतान मार्कोट हथियारों को यह कॉल प्रदान करता है:
“हमें जाने देना चाहिए।
डिस्कनेक्ट किए गए डिज़ाइन बनाने के बजाय, प्रत्येक एक विशेष डिवाइस या ब्राउज़र के अनुरूप है, हमें इसके बजाय उन्हें उसी अनुभव के पहलुओं के रूप में व्यवहार करना चाहिए। दूसरे शब्दों में, हम उन साइटों को शिल्प कर सकते हैं जो न केवल अधिक लचीली हैं, बल्कि यह उन मीडिया के अनुकूल हो सकती है जो उन्हें प्रस्तुत करती हैं।
संक्षेप में, हमें उत्तरदायी वेब डिज़ाइन का अभ्यास करने की आवश्यकता है
। हम वेब पर निहित लचीलेपन को गले लगा सकते हैं, नियंत्रण के बिना हमें डिजाइनरों के रूप में आवश्यकता होती है। हमारे काम में मानकों-आधारित प्रौद्योगिकियों को एम्बेड करके, और ऑनलाइन डिज़ाइन की दिशा में हमारे दर्शन में थोड़ा बदलाव करके। "
- एथन मार्कोटे , उत्तरदायी वेब डिज़ाइन, पी 8 [पीडीएफ संस्करण यहां उपलब्ध है ]
लेकिन आप किन बैंड्स का इस्तेमाल करते हैं? एथन मार्कोटे ने उत्तरदायी वेब डिज़ाइन में निम्नलिखित तीन की सिफारिश की है । (यह जानने के लिए कि वे क्या करते हैं और कैविट्स को समझते हैं, आप पुस्तक को हथियाना पसंद कर सकते हैं । )
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
जेनी कोरपी के कम रूपरेखा सहित अनुकूली वेबसाइटों के निर्माण में मदद करने के लिए डिज़ाइन किए गए सीएसएस फ्रेमवर्क की एक श्रृंखला भी है ।
मनमाने ढंग से ब्रेकपॉइंट का उपयोग करने के बजाय, शायद यह बेहतर है कि अपनी साइट के डिज़ाइन को बैंड को निर्देशित करें। अपने ब्राउज़र की स्क्रीन की चौड़ाई कम करें और जब भी आपका डिज़ाइन टूटता है, तो वह चौड़ाई आपके "ब्रेकप्वाइंट" में से एक होनी चाहिए। सीएसएस मीडिया प्रश्नों के साथ चौड़ाई को कम करना और ब्रेकप्वाइंट जोड़ना जारी रखें जब तक कि आपका डिज़ाइन सभी चौड़ाई में अच्छा न हो। इस तरह, आपका डिज़ाइन केवल उन मुट्ठी भर स्क्रीन आकारों के बजाय सभी डिवाइसों पर अच्छा लगेगा, जिन्हें आपने इसमें करने की कोशिश की है। यदि आप Chrome का उपयोग करते हैं, तो डेवलपर टूल चालू करें (देखें> डेवलपर> डेवलपर टूल) और अपने ब्राउज़र की चौड़ाई कम करने से आपको शीर्ष दाएं कोने में वर्तमान चौड़ाई का एक उपयोगी रीडआउट मिलता है जिसका उपयोग आप वर्कआउट के लिए कर सकते हैं जहां आपके ब्रेकप्वाइंट होने चाहिए।
विचार करने के लिए एक और लोकप्रिय दृष्टिकोण मोबाइल फर्स्ट रिस्पॉन्सिबल डिज़ाइन है, जहाँ आपकी कोर स्टाइलशीट छोटी से छोटी डिवाइसेस के लिए स्टाइल्स को हैंडल करती है, और मीडिया क्वेश्चन बड़े स्क्रीन की चौड़ाई के बजाय दूसरे तरीके से डील करते हैं। यह मोबाइल उपकरणों पर तेजी से प्रदर्शन कर सकता है, खासकर यदि आप बहुत सीएसएस पृष्ठभूमि छवियों का उपयोग करते हैं। (आप ब्रेकपॉइंट्स का निर्माण उसी तरह से करेंगे - बस अपने ब्राउज़र की चौड़ाई को कम से कम शुरू करें और ऊपर की ओर काम करें। और कई वास्तविक उपकरणों पर परीक्षण करना न भूलें, क्योंकि आप अपने हाथों को प्राप्त कर सकते हैं - एक ओपन डिवाइस पर जाने पर विचार करें। लैब ।)
संक्षेप में, जब यह अच्छी तरह से किया जाता है, तो अनुकूली डिजाइन एक वेब डिजाइनर और एक सांप्रदायिक उद्यान वेब उपयोगकर्ता के रूप में निहारना और अनुभव करना एक खुशी है। उदाहरण के लिए, जापानी फर्म सूचना आर्किटेक्ट्स की साइट लें :
एक iPhone पर
एक iPad पर
एक iMac पर
जिस तरह हारून गुस्ताफ़सन ने भविष्यवाणी की थी, आपको पता भी नहीं है कि जब तक आप एक ही पृष्ठ पर डिज़ाइन नहीं देखते हैं, तब तक आपको कैटर किया जा सकता है।
अनुभव प्रत्येक मामले में शायद ही अधिक सुखद हो सकता है; आपको सामग्री पढ़ना शुरू करने के लिए पृष्ठ के बारे में सोचने या बातचीत करने की ज़रूरत नहीं है, यह सोचकर समय व्यतीत करें कि यह आपकी स्क्रीन पर अजीब क्यों लगता है, या नेविगेशन तत्वों को देखने के लिए ज़ूम इन करें इससे पहले कि आप उन्हें टैप कर सकें, क्योंकि किसी ने पहले से ही उन समस्याओं को हल कर लिया है आप। और है कि क्यों उत्तरदायी डिजाइन लगभग हमेशा अन्य विकल्प श्रेष्ठ माना जाता है।