विषय
- अज्ञात के लिए डिजाइनिंग
- डिजाइन के लिए एक व्यावहारिक दृष्टिकोण
- लेआउट अज्ञेयवादी बनना
- उत्तरोत्तर कोडिंग
- मार्क-अप में गोता लगाना
ऐसा लगता है कि हर कोई इन दिनों उत्तरदायी वेब डिज़ाइन के बारे में बात कर रहा है, और अच्छे कारण के साथ; जैसे-जैसे वेब-सक्षम उपकरणों की संख्या बढ़ती जा रही है - प्रत्येक अलग-अलग क्षमताओं और विशेषताओं के साथ - निश्चित-चौड़ाई वाली वेबसाइट बनाने के लिए अब यह समझदारी नहीं है।
सच है, यह कभी नहीं था। फिर भी अब तक यह उन अनुभवों को डिजाइन करने के लिए सबसे अच्छा अभ्यास माना जाता था जो कई धारणाएं बनाते थे, चाहे वे स्क्रीन रिज़ॉल्यूशन, बैंडविड्थ या इनपुट विधि के आसपास हों। यदि आपने कभी 960px-चौड़ी वेबसाइट डिज़ाइन की है, केवल इसे किसी मित्र की छोटी स्क्रीन नेटबुक पर देखने के लिए (और हाँ, मैं यहाँ दर्दनाक अनुभव से लिख रहा हूँ), तो आप समझेंगे कि यह विशेष रूप से चतुर दृष्टिकोण क्यों नहीं था। अब, स्मार्टफोन और टैबलेट के मिश्रण में आने से, यह स्पष्ट है कि हमारे पारंपरिक तरीके अब उद्देश्य के लिए उपयुक्त नहीं हैं।
शुक्र है, सीएसएस मीडिया प्रश्नों का आगमन और बढ़ती स्वीकार्यता कि वेब अपने आप में एक माध्यम है, इसका मतलब है कि हम मंच की वास्तविक प्रकृति को स्वीकार करना शुरू कर रहे हैं, यह स्वीकार करते हुए कि इसकी सार्वभौमिकता एक ताकत है, कमजोरी नहीं।
अगले पांच दिनों में, मैं आपको एक ऐसी तकनीक के बारे में बताऊंगा जो इस तथ्य को पहचानती है: प्रतिक्रियात्मक वेब डिज़ाइन. एथन मार्कोटे द्वारा विकसित, यह तरल लेआउट, लचीली छवियों और मीडिया प्रश्नों को जोड़ती है ताकि हमें ऐसी साइटें बनाने में मदद मिल सके जो उनके सामने आने वाले किसी भी वातावरण के अनुकूल हों।
मैं आपको एक साधारण मीडिया गैलरी बनाने का तरीका दिखा कर इस दृष्टिकोण को प्रदर्शित करूँगा। मेरे उदाहरणों में, मैं संयुक्त राज्य भर में हाल ही में की गई एक सड़क यात्रा का दस्तावेजीकरण करने के लिए एक छोटी वेबसाइट बना रहा हूँ, लेकिन अपनी आवश्यकताओं के अनुरूप कोड और डिज़ाइन को अनुकूलित करने के लिए स्वतंत्र महसूस करें।
अज्ञात के लिए डिजाइनिंग
इस ट्यूटोरियल का अधिकांश भाग रिस्पॉन्सिव डिज़ाइन के विकास पहलू के इर्द-गिर्द केंद्रित होगा। लेकिन इससे पहले कि हम किसी भी कोड में खुदाई करें, आइए एक पल के लिए सोचें कि हम एक ऐसी वेबसाइट कैसे डिजाइन कर सकते हैं जिसमें अनंत लेआउट हो सकते हैं।
अब, मैं भाग्यशाली हूं कि मैं इंटरफेस डिजाइन कर सकता हूं तथा फ्रंटएंड कोड विकसित करें जो उन्हें वास्तविक बनाता है। यह निश्चित रूप से एक अनूठा कौशल नहीं है - यदि आप अपने लिए काम करते हैं तो आप शायद वही हैं। लेकिन यह समझना निश्चित रूप से फायदेमंद है कि द्रव डिजाइन तैयार करते समय सामग्री कैसे अनुकूलित और पुन: प्रवाहित हो सकती है।
मैं एक बड़ी टीम के हिस्से के रूप में भी काम करता हूं जहां मेरी भूमिका अधिक विशिष्ट होती है। ऐसे वातावरण में, विज़ुअल डिज़ाइनर केवल वायरफ़्रेम को आकर्षक, आकर्षक (साइन-ऑफ़, पिक्सेल-परफेक्ट) कंप्स में अनुवाद करने पर केंद्रित हो सकता है। और डेवलपर्स के लिए अलग से स्थित होना असामान्य नहीं है, इन लेआउट को दुबला और कुशल मार्कअप और सीएसएस में अनुवाद करना।
हालांकि, इस तरह के रैखिक और अलग-अलग वर्कफ़्लो जल्दी से टूट जाते हैं जब हम मूल्यांकन करना शुरू कर देते हैं कि डिज़ाइन अलग-अलग वातावरणों के अनुकूल कैसे होंगे। किसी भी नए उपकरण या तकनीक की तरह, हमें काम करने के अधिक सहयोगी और चुस्त तरीकों पर भी विचार करना चाहिए। उत्तरदायी वेबसाइटों को डिजाइन करते समय आने वाली कई कठिन समस्याओं को केवल बातचीत, प्रयोग और पुनरावृत्ति के माध्यम से हल किया जा सकता है।
डिजाइन के लिए एक व्यावहारिक दृष्टिकोण
इसका मतलब यह नहीं है कि डिजाइनरों के लिए यह सोचने की गुंजाइश नहीं है कि कोई डिज़ाइन किसी विशेष उपकरण की सीमा के बाहर कैसे काम कर सकता है।
क्लियरलेफ्ट में, हम डेस्कटॉप के नजरिए से विजुअल डिजाइन शुरू करते हैं। हम एक व्यापक डिजाइन भाषा और दृश्य सौंदर्य को परिभाषित करके शुरू करते हैं, जो अक्सर सामग्री के एक मुख्य भाग के आसपास प्रारंभिक अन्वेषणों को आधारित करते हैं। उदाहरण के लिए, यदि हम कोई फूड साइट डिजाइन कर रहे हैं, तो हम रेसिपी पेज से शुरुआत करेंगे; एक समाचार साइट, एक कहानी पृष्ठ के लिए।
यह न केवल साइट पर एक महत्वपूर्ण पृष्ठ है, बल्कि इसमें टाइपोग्राफिक पैलेट बनाने के लिए हमारे लिए पर्याप्त संरचित सामग्री शामिल है। हम इस बारे में भी सोचेंगे कि लेआउट कैसे अनुकूल हो सकता है - भले ही वह इस स्तर पर हमारे दिमाग के पीछे ही क्यों न हो।
किसी डिज़ाइन को तनाव देने का एक उपयोगी तरीका यह है कि ऐसा पृष्ठ लिया जाए और इसे एक संकरी (~ 320px चौड़ी) स्क्रीन के लिए अनुकूलित किया जाए। आपको शायद पता चलेगा कि इस चौड़ाई पर काम करने के लिए डिजाइन के कुछ पहलुओं पर पुनर्विचार करने की आवश्यकता होगी। यहां कुछ उदाहरण दिए गए हैं:
- टाइपोग्राफी: बड़े शीर्षक व्यापक लेआउट पर अच्छी तरह से काम कर सकते हैं, लेकिन छोटी स्क्रीन पर वे बहुत अधिक लंबवत स्थान ले सकते हैं और इसलिए अतिरिक्त स्क्रॉलिंग की आवश्यकता होती है। जैसे-जैसे लाइन की लंबाई बदलती है, आपको लाइन की ऊंचाई और अन्य टाइपोग्राफिक उपचारों पर भी विचार करना चाहिए।
- कड़ियाँ: आपका डिज़ाइन टचस्क्रीन डिवाइस पर कैसे काम करेगा? हालांकि हमारे पास अभी तक इनका पता लगाने का कोई आसान तरीका नहीं है (जिसका अर्थ है कि हमें अपने डिजाइन के सभी पहलुओं को ध्यान में रखना चाहिए), एक संकरी स्क्रीन के लिए डिजाइनिंग हमें लिंक और अन्य इंटरैक्टिव तत्वों के लिए लक्षित क्षेत्रों के बारे में सोचने का अवसर दे सकती है। . आईओएस दिशानिर्देश अनुशंसा करते हैं कि ये कम से कम 44 पिक्सेल/अंक वर्ग हों, जो लक्ष्य के लिए एक अच्छा आंकड़ा है।
- पथ प्रदर्शन: यह शायद किसी भी प्रतिक्रियाशील डिज़ाइन का सबसे अजीब घटक होगा, खासकर यदि आपकी साइट में कई अनुभाग और एक गहरा पदानुक्रम है। ब्रैड फ्रॉस्ट ने नेविगेशन के लिए वर्तमान में विचार किए जा रहे कुछ अलग दृष्टिकोणों का सारांश लिखा है।
- ज़रूरत से ज़्यादा सामग्री: क्या कुछ सामग्री की आवश्यकता नहीं है? क्या अन्य सामग्री को केवल कुछ परिदृश्यों में दिखाने की आवश्यकता है? मैं उपयोगकर्ता द्वारा उपयोग किए जाने वाले उपकरण के आधार पर सामग्री को छिपाने की वकालत नहीं करता, लेकिन सशर्त लोडिंग (जिसे हम इस सप्ताह के अंत में देखेंगे) जैसी तकनीकें हमें छोटे पृष्ठों की सेवा करने में मदद कर सकती हैं जो केवल आवश्यकता पड़ने पर पूरक सामग्री लोड करते हैं।
दो विपरीत लेआउट डिजाइन करना इस विचार को पुष्ट करता है कि एक डिजाइन अनुकूल होगा, जबकि संभावित गोच को जल्दी से इस्त्री करना होगा। हालांकि यह काम को दोगुना करने जैसा लगता है, ध्यान रखें कि हम प्रत्येक पृष्ठ को पिक्सेल-पूर्ण सटीकता के लिए डिज़ाइन नहीं कर रहे हैं। इसके बजाय, हम एक स्केलेबल डिज़ाइन भाषा बनाने पर ध्यान केंद्रित कर रहे हैं - एक जो विकसित होगी क्योंकि हम इसे कोड में लागू करना शुरू करते हैं, और एक जो अलग-अलग मॉड्यूल और घटकों के आसपास आधारित है।
लेआउट अज्ञेयवादी बनना
अप्रत्याशित रूप से, एक ऐसे उद्योग के लिए जिसने ऐतिहासिक रूप से वेब को प्रिंट की तरह माना है, निश्चित-चौड़ाई वाले लेआउट ने हमारे द्वारा उत्पादित कई डिलिवरेबल्स में प्रवेश किया है। जैसा कि हम एक अनुकूलनीय माध्यम के लिए डिजाइन करना शुरू करते हैं, नए दृष्टिकोणों पर विचार किया जा रहा है जो हमें माध्यम की तरल प्रकृति को स्वीकार करते हुए समस्याओं को हल करने और विचारों को संप्रेषित करने की अनुमति देते हैं। यहाँ मेरे कुछ पसंदीदा हैं:
- पृष्ठ विवरण आरेख: जबकि वायरफ्रेम अक्सर लेआउट (और इस प्रकार एक निश्चित प्रकार के उपकरण को ग्रहण करते हैं) का संकेत दे सकते हैं, पृष्ठ विवरण आरेख इस धारणा को हटाते हैं और इसके बजाय व्यक्तिगत घटकों का वर्णन करते हैं, जो प्राथमिकता के संदर्भ में दस्तावेज़ में व्यवस्थित होते हैं।
- स्टाइल टाइल्स: ग्राहकों के साथ डिजाइन विचारों को संप्रेषित करते समय, हम खुद को 'वेबसाइटों की पेंटिंग' प्रस्तुत करते हुए पा सकते हैं। यदि हम सावधान नहीं हैं, तो ग्राहक सही ढंग से उन अवधारणाओं को देखने के लिए कहेंगे जो प्रदर्शित करती हैं कि अन्य उपकरणों पर भी एक डिज़ाइन कैसा दिखेगा। यह हमें कई उपकरणों के लिए कई पेज बनाने की एक अस्थिर स्थिति में मजबूर कर सकता है। सामंथा वारेन ने इस समस्या के बारे में सोचा है और स्टाइल टाइल्स के साथ आई हैं। ये मूड बोर्ड (लेकिन कम अस्पष्ट) और पूरी तरह से महसूस किए गए कंप्स (लेकिन कम सटीक) के बीच कहीं बैठते हैं, और टाइपोग्राफी, बटन शैलियों और मास्टहेड उपचारों को संप्रेषित करने में हमारी सहायता करते हैं। वे हमारे ग्राहकों के साथ अधिक परिपक्व स्तर की चर्चा को भी प्रोत्साहित करते हैं।
- डिजाइन खेल को सक्रिय करें: सहयोगी डिजाइन कार्यशालाओं के दौरान यह अभ्यास वास्तव में अच्छी तरह से काम कर सकता है। इस अभ्यास में, हर कोई पोस्ट-इट पर उन तत्वों को लिखता है जो एक निश्चित पृष्ठ पर दिखाई दे सकते हैं। फिर इन्हें महत्व के क्रम में दीवार से चिपका दिया जाता है, जैसे कि वे मोबाइल फोन पर रैखिक रूप से दिखाई दे रहे हों। परिणामी चर्चा कुछ आश्चर्यजनक निष्कर्ष उत्पन्न कर सकती है। उदाहरण के लिए, आप महसूस कर सकते हैं कि नेविगेशन पृष्ठ पर सबसे महत्वपूर्ण घटक नहीं है। यह डिज़ाइन के माध्यम से अनुसरण कर सकता है, जहां पृष्ठ के शीर्ष पर एक स्किप लिंक पाद लेख में नेविगेशन से लिंक होता है।
हमारे द्वारा पहले से उपयोग किए जा रहे टूल के लिए अभी भी जगह है, लेकिन वेबसाइट को व्यापक रूप से डिजाइन करते समय, हमें यह ध्यान रखना होगा कि लेआउट अब ज्ञात नहीं है।
उत्तरोत्तर कोडिंग
शुक्र है, जिस उदाहरण पर हम काम कर रहे हैं, उसमें दृश्य डिज़ाइन के बारे में चिंता करने की ज़रूरत नहीं है क्योंकि हमारे लिए कड़ी मेहनत की गई है! इसके बजाय, हम अपने डिज़ाइन को पूरी तरह उत्तरदायी वेबसाइट में कोडित करने पर ध्यान केंद्रित कर सकते हैं।
शुरू करने से पहले एक और बात। जिस माध्यम के साथ हम काम कर रहे हैं, उसके संस्थापक सिद्धांत को याद रखना महत्वपूर्ण है: सार्वभौमिकता। इसका मतलब न केवल आज के वेब-सक्षम उपकरणों के लिए निर्माण करना है, बल्कि कल और आने वाले कल के उपकरणों के साथ भी संगतता सुनिश्चित करना है। जॉन ऑलसॉप ने बताया कि यह सिद्धांत अपनी पोस्ट द नेक्स्ट 6 बिलियन में क्यों मायने रखता है:
"यह अगले छह अरब ग्रामीण भारत, अफ्रीका, चीन में बच्चे हैं जहां बिजली और नेटवर्क तक पहुंच रुक-रुक कर हो सकती है। यह सुमात्रा में एक दशक पुराने विंटेल बॉक्स में है। यह ऐसे लोग हैं जो सैकड़ों अलग-अलग भाषाएं बोलते हैं, जिनमें दर्जनों अलग-अलग भाषाएं हैं। लेखन प्रणाली। यह वे लोग हैं जो अपने परिवार में सबसे पहले पढ़ने और लिखने में सक्षम हैं। यह दुनिया भर में 20 प्रतिशत लोग हैं जो पढ़ या लिख नहीं सकते हैं। फिर भी।’
हम विभिन्न फैशन (बेहतर शब्द की कमी के लिए) को देखकर वेब के बारे में अपनी समझ का पता लगा सकते हैं, जो हमारे पेशे के बीच पकड़ बना चुके हैं: वेब मानक, पहुंच, विनीत जावास्क्रिप्ट ... सभी एक ही विषय पर भिन्न हैं: प्रगतिशील वृद्धि। उत्तरदायी वेब डिज़ाइन के बारे में भी यही सच है। बनाने के लिए सही मायने में उत्तरदायी वेबसाइट एक ऐसी साइट का निर्माण करना है जो न केवल पीछे की ओर संगत हो, बल्कि भविष्य के अनुकूल भी हो।
मार्क-अप में गोता लगाना
ठीक है, प्रस्तावना के लिए पर्याप्त है, टेक्स्ट एडिटर खोलने का समय आ गया है।हमारे डिजाइनर ने हमें एक डेस्कटॉप-उन्मुख डिज़ाइन प्रदान किया है, और यह उदाहरण प्रदान करने के लिए पर्याप्त है कि यह एक संकीर्ण व्यूपोर्ट में भी कैसे दिखाई दे सकता है।
इन्हें अलग से कोड करना आकर्षक हो सकता है, लेकिन मैं एक अलग दृष्टिकोण सुझाने जा रहा हूं। अलग-अलग घटकों - या पैटर्न - जो एक ही पृष्ठ पर डिज़ाइन बनाते हैं, को रखकर, हम एक पैटर्न पोर्टफोलियो बना सकते हैं। यह हमें किसी भी पृष्ठ लेआउट की सीमाओं के बाहर घटकों को विकसित करने की अनुमति देता है, और हमें किसी भी प्रतिगमन परीक्षण के लिए बाद में संदर्भित करने के लिए कुछ देगा। आइए कुछ अलग उपकरणों में प्रारंभिक मार्कअप देखें:
हमारा मार्क-अप पैटर्न पोर्टफोलियो देखें
खैर, मुझे बहुत नुकसान होगा - हमारे पास पहले से ही एक उत्तरदायी वेबसाइट है! हमारी सामग्री प्रत्येक डिवाइस की सीमाओं के अनुकूल हो रही है, चाहे वह एक फैंसी नया आईपैड हो या एक त्याग दिया गया फीचर फोन। यह लिंक्स जैसे टेक्स्ट-ओनली ब्राउज़र में भी काम करता है।
सार्वभौमिकता के अंतर्निहित सिद्धांतों के लिए धन्यवाद, वेब है डिफ़ॉल्ट रूप से उत्तरदायी. यह बहुत अच्छा है, लेकिन इसका मतलब यह भी है कि अब से हम कोड के साथ जो कुछ भी करते हैं, वह इस मूल अनुकूलन क्षमता से समझौता कर सकता है।
आने वाला कल: हम सावधानी से चलेंगे और रिस्पॉन्सिव डिज़ाइन के पहले पहलू को लागू करना शुरू करेंगे: टाइपोग्राफी और फ्लुइड ग्रिड।
