👨🏼‍💻 🤴🏻 📇 उत्तरदायी वेबसाइट विकास 🧑🏾‍🤝‍🧑🏼 🙌 🗽

फिनिश वेब डिजाइनर और डेवलपर, विल्जमी सलमिनन द्वारा लेख "उत्तरदायी वर्कफ़्लो" का अनुवाद।

पिछले हफ्ते मैं वेब्सपेड सम्मेलन में था, जहां स्टीफन हे ने उत्तरदायी डिजाइन प्रक्रिया के बारे में बात की थी। यह पोस्ट बिल्कुल उसी के बारे में नहीं है, लेकिन स्टीवन के दृष्टिकोण ने मुझे अपनी याद दिला दी, इसलिए मैंने इस विषय पर कुछ विचार बताने का फैसला किया, यह वर्णन करें कि पिछले दो या तीन वर्षों में मेरा काम कैसे विकसित हुआ है और भविष्य में यह कैसे बदल सकता है।

तीन या चार साल पहले, जब मैंने ज्यादातर निश्चित-चौड़ाई वाली साइटें विकसित कीं, तो मेरी परियोजनाएं सामान्य जलप्रपात प्रक्रिया के समान नीचे दिए गए चरणों से गुजरीं। तब मध्यवर्ती संशोधनों के लिए बहुत अधिक समय नहीं था: आमतौर पर ग्राहकों ने फ़ोटोशॉप में या तो रूपरेखा या लगभग तैयार डिजाइन देखा।

ऐसी योजना पहले काम करती थी, लेकिन अब एक समस्या है: झरना मॉडल अनुकूली डिजाइन के साथ अच्छी तरह से फिट नहीं है। वास्तव में, इस तरह का दृष्टिकोण कभी भी इष्टतम नहीं था, लेकिन हर कोई इसके लिए इतना अभ्यस्त था कि उन्होंने कभी इस पर सवाल नहीं उठाया।

नया तरीका

इसलिए मैं अब उत्तरदायी डिजाइन के साथ वेबसाइट विकसित करता हूं (नीचे चित्रण में)। मैंने इस पोस्ट को लिखते समय मार्क बोल्टन के लेख और स्टीफन हे की प्रस्तुति का उपयोग किया। मेरा वर्तमान दृष्टिकोण एक झरना मॉडल की तुलना में एक फुर्तीले की तरह है। आगे मैं प्रत्येक चरण को और अधिक विस्तार से बताऊंगा।

संक्षेप में। विकास उस सामग्री से शुरू होता है जिसके बारे में सोचने में बहुत समय लगता है। मैं तैयार प्रारूप सामग्री को HTML प्रोटोटाइप में परिवर्तित करता हूं और प्रस्तुति के क्रम और संगतता का मूल्यांकन करने के लिए इसे मोबाइल ब्राउज़र में खोलता हूं। मैं आमतौर पर पहले स्केच करता हूं, और प्रोटोटाइप के बाद डिजाइन करता हूं। पहले ड्राफ्ट के बाद, मैं जल्दी से HTML प्रोटोटाइप में लौटता हूं और अपने विचारों का मूल्यांकन करने के लिए सीएसएस शैलियों को जोड़ता हूं। सभी कार्य पुनरावृत्तियों के होते हैं: स्केच - प्रोटोटाइप - डिज़ाइन - परीक्षण - चर्चा, जब तक कि परिणाम प्राप्त नहीं हो जाता। आदेश वास्तविकता में इतना रैखिक नहीं हो सकता है, लेकिन इस लेख के लिए मैं इस योजना को सरल बनाना चाहता था।

ग्राहक के व्यवसाय का अध्ययन करना

पहला चरण ग्राहक जानकारी का संग्रह है। यहां मुख्य लक्ष्य ग्राहक के व्यवसाय, उसके प्रतिद्वंद्वियों और परियोजना के मुख्य उद्देश्यों को बेहतर ढंग से समझना है। पर्याप्त ज्ञान के बिना, यह समझना लगभग असंभव है कि ग्राहक को वास्तव में क्या चाहिए / चाहिए।

इस स्तर पर, मैं इस तरह के सवाल पूछता हूं: "लोगों को आपकी साइट पर क्यों जाना चाहिए?", "मुख्य लक्ष्य क्या आप प्राप्त करना चाहते हैं?", "आपके मुख्य प्रतियोगी कौन हैं?", आदि। आप अन्य डिजाइन फर्मों की सामग्री में प्रश्नों के विचारों को देख सकते हैं।

योजना

योजना पिछले चरण में एकत्रित जानकारी पर आधारित है। मैं आमतौर पर अवधारणा को परिष्कृत करके शुरू करता हूं, उपयोगकर्ता कहानियों और सूचना वास्तुकला पर काम कर रहा हूं। मैं सामग्री तत्वों का निर्माण और वर्णन करता हूं, उन्हें महत्व के स्तर के अनुसार वितरित करता हूं, जिसके आधार पर आप किसी न किसी HTML स्केच को बना सकते हैं। स्टीफन के कार्य में "सामग्री सूची" और "सामग्री लिंकेज फ्रेमवर्क" के समान चरण हैं।

पाठ डिजाइन

"टेक्स्ट डिज़ाइन" का अर्थ है कि हम साइट की सभी सामग्रियों को सरल तरीके से रिकॉर्ड करते हैं। यह विकास के सबसे महत्वपूर्ण चरणों में से एक है, लेकिन यह भी सबसे कम आंका गया है। मेरी राय में, हाथ पर वास्तविक सामग्री के बिना आगे बढ़ने का कोई मतलब नहीं है। लोग जानकारी की तलाश में साइट पर जाते हैं और पूरी प्रक्रिया इसके साथ शुरू होनी चाहिए।

मैं अक्सर इस बिंदु पर शैलियों के बिना HTML का उपयोग करता हूं। तो आप तुरंत देख सकते हैं कि सामग्री एक संकीर्ण कॉलम की तरह कैसे दिखती है और इसका क्रम कितना सही है। यह समझने का भी मुख्य तरीका है कि स्क्रीन रीडर द्वारा किसी साइट को कैसे माना जाएगा।

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

रेखाचित्र

मैं लगातार अपने विचारों को स्केच करता हूं, लेकिन ब्राउज़र में काम शुरू करने से पहले यह विशेष रूप से महत्वपूर्ण है। मैं आमतौर पर पहले किए गए टेक्स्ट एचटीएमएल की मदद से अपने स्केच की जांच करता हूं। मूल रूप से इसका मतलब है कि मैं उनके लिए कुछ सीएसएस शैलियों को जोड़ रहा हूं।

“ड्राफ्ट पर थोड़ा समय व्यतीत करने से आपको मॉनिटर के सामने घंटों की बचत होगी। इसके अलावा, आप मन की शांति पाएंगे। हर बार जब "रचनात्मक संकट" सामने आता है, तो यह अनिवार्य रूप से खुद के बारे में विनाशकारी संदेह को पीछे छोड़ देता है। मैं आपसे अपने काम में ड्राफ्ट शामिल करने का आग्रह करता हूं। आप देखेंगे कि रचनात्मक शून्यता की काल्पनिक दीवार के मुकाबले आप कितनी बार ऊपर आएंगे ”
- तारा रोस्केल

प्रोटोटाइप

HTML / CSS के साथ प्रोटोटाइप एकमात्र विश्वसनीय तरीका है कि मार्कअप कैसे विभिन्न आकारों के दायरे में प्रतिक्रिया करता है। यह आपको क्लाइंट को शुरुआती स्तर पर साइट दिखाने और टिप्पणियों का तुरंत जवाब देने की भी अनुमति देता है।

स्टीफन के विपरीत, मैं "उपयोग की गई अनुमतियों की अनुसूची" के साथ काम नहीं करता। मुख्य स्क्रीन आकारों के बारे में पता होना और क्लाइंट को यह समझाने में सक्षम होना उपयोगी है कि परिदृश्य अभिविन्यास क्या है, लेकिन मुख्य रूप से सामग्री द्वारा निर्देशित किया जाना चाहिए।

नीचे उन अनुमतियों के ग्राफ का उपयोग किया गया है, जिन्हें मैंने स्टेफ़नी राइगर द्वारा "प्रगामैटिक एडेप्टिव डिज़ाइन" और मेटल टॉड से "सिंपल डिवाइस डायग्राम" के आधार पर संकलित किया था। मैंने ऐसा इसलिए किया क्योंकि एक योजना मेरे लिए पुरानी लग रही थी, और दूसरे में अभी भी काफी लोकप्रिय सिम्बियन उपकरण थे। छवि क्लिक करने योग्य है (पीडीएफ, अंग्रेजी)।

दृश्य डिजाइन

पुनरावृति में यह चरण प्रोटोटाइप का अनुसरण करता है। मैं अभी भी अधिकांश काम के लिए फ़ोटोशॉप का उपयोग करता हूं, लेकिन मैं धीरे-धीरे ब्राउज़र में डिज़ाइन की ओर झुक रहा हूं। टाइपोग्राफी ब्राउज़र के अलावा कहीं और संभालना विशेष रूप से मुश्किल है (हालांकि, मैंने देखा कि अगर मुझे ब्राउज़र में बहुत जल्दी काम करना है, तो परिणाम सपाट, उबाऊ और गन्दा लगता है)।

एक उपकरण का उपयोग करना विशेष रूप से महत्वपूर्ण है जो आपको रचनात्मकता में सीमित नहीं करता है: ब्राउज़र, फ़ोटोशॉप, पटाखे, InDesign या कुछ और।

परीक्षण

शुरुआती चरणों में परीक्षण भविष्य में कई समस्याओं से बचेंगे। बस "उपयोग की गई अनुमतियों का ग्राफ़" देखें , ब्राउज़रों की सभी विशेषताओं पर विचार करें और आप समझेंगे कि कई वास्तविक उपकरणों पर परीक्षण किए बिना एक उत्तरदायी वेबसाइट बनाना लगभग असंभव क्यों है। प्रयोज्य समस्याओं की पहचान करने के लिए उपयोगकर्ता परीक्षण भी किया जाना चाहिए।

आमतौर पर मैं उन उपकरणों पर परीक्षण करता हूं जो मेरे पास हैं, लेकिन कभी-कभी मुझे नए लेने पड़ते हैं या यहां तक कि स्टोर पर भी जाते हैं और वहां परीक्षण करते हैं। अंत में, जबकि यह मुफ़्त है।

चर्चा

क्लाइंट के साथ प्रत्येक पुनरावृत्ति पर चर्चा करें। HTML प्रोटोटाइप और वास्तविक उपकरणों पर उनके काम को दिखाएं। मार्क बोल्टन सलाह देते हैं : "बड़े एक्सपोज़र से बचें।"

यात्रा

स्केच - प्रोटोटाइप - डिज़ाइन - परीक्षण - चर्चा। तब तक दोहराएं।

निष्कर्ष

कोई सही कार्य प्रक्रिया नहीं है। क्या सूट मुझे एक और डिजाइनर के लिए उपयुक्त नहीं हो सकता है। इसके अलावा, मैं अभी अपना दृष्टिकोण बदलना शुरू कर रहा हूं। वेबसाइट (बड़ी या छोटी) बनाने के लिए यहाँ वर्णित सबसे उपयुक्त है, लेकिन वेब एप्लिकेशन बनाते समय इसमें बदलाव की आवश्यकता हो सकती है (बेशक, एप्लिकेशन के आधार पर)।

उत्तरदायी वेबसाइट विकास