प्रगतिशील वृद्धि + मोबाइल पहला = उत्तरदायी वेब डिज़ाइन

5 महीने, 26 दिन और कुछ घंटे बीत चुके हैं क्योंकि फुतुब्रा कोड की पहली लाइनें गिट में बनाई गई थीं। इतना समय हमें एक टीम को इकट्ठा करने, अध्ययन की एक श्रृंखला आयोजित करने, एक अवधारणा तैयार करने और एक परियोजना को लागू करने में लगा, जो लोगों के जीवन को बहुत दिलचस्प बना देगा।

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

मैं सबसे महत्वपूर्ण - बुनियादी सिद्धांत जिस पर Futoubra बनाया गया है - पहली पोस्ट को समर्पित करना चाहूंगा:

• प्रगतिशील वृद्धि
• पहले मोबाइल
• उत्तरदायी वेब डिज़ाइन

फुतुब्रा एक मल्टीमीडिया माइक्रोब्लॉगिंग सेवा है जिसका सार्वजनिक बीटा हमने कल लॉन्च किया।

फुतुब्रा बनाते समय, हम सबसे पहले उन लोगों के बारे में सोचते थे जो आपके और मेरे जैसे हैं - सक्रिय, नई तकनीकों में रुचि रखने वाले, मोबाइल, दुनिया को पहचानने वाली घटनाओं के बीच रखने के लिए प्रयासरत हैं और सब कुछ नया करने के लिए खुले हैं। इस तरह के दर्शकों को अधिक दिलचस्प तरीके से जीने की स्पष्ट आवश्यकता होती है और इस आवश्यकता को पूरा करने के लिए Futoubra बनाया जाता है। हम एक ऐसी परियोजना कर रहे हैं, जिसका हम स्वयं आनंद के साथ उपयोग करेंगे और जिस पर हमें गर्व हो सकता है।

पहला सिद्धांत जिसे हम फुतुबरा बनाते समय पालन करने के लिए सहमत हुए थे ...

प्रगतिशील वृद्धि

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

यह सिद्धांत सुशोभित गिरावट के पारंपरिक सिद्धांत के विपरीत है, जब डेवलपर्स सबसे विकसित ब्राउज़रों द्वारा निर्देशित होते हैं, और पुराने या असमर्थित ब्राउज़रों में परियोजना की शुद्धता अवशिष्ट सिद्धांत के अनुसार लागू की जाती है।

प्रेरणा

हर दिन मोबाइल फोन के नए मॉडल दिखाई देते हैं, उनमें विभिन्न क्षमताओं वाले मोबाइल प्लेटफॉर्म और ब्राउज़रों की संख्या भी लगातार बदल रही है। इसके अलावा, हाल ही में पहले के अज्ञात उपकरणों में ब्राउज़रों को एम्बेड करने की प्रवृत्ति रही है, उदाहरण के लिए, ऑन-बोर्ड कंप्यूटर कंप्यूटर या टीवी।

हम चाहते थे कि फूटूब्रा का उपयोग किसी भी डिवाइस से किया जाए जिसमें एक ब्राउज़र और इंटरनेट एक्सेस हो, इसलिए हमने प्रगतिशील वृद्धि के सिद्धांत का पालन करने का फैसला किया।

आकर्षण आते हैं

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

विपक्ष

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

हमारा अनुभव

हमने दो बार आनन्दित किया कि हम प्रगतिशील वृद्धि को लागू कर रहे थे, न कि शालीनता को कम करने के लिए।

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

फिर, जब उन्होंने महसूस किया कि हमारे पास सब कुछ "ठीक" करने का समय नहीं है, लेकिन मूल संस्करण पूरी तरह से काम करता है (यद्यपि पृष्ठ पुनः लोड के साथ, लेकिन यह काम करता है)।

बैकएंड और फ्रंटएंड के लिए एक समान टेम्प्लेट का तकनीकी कार्यान्वयन हमारे लिए कठिन था, हमने टेम्प्लेट इंजन को कई बार बदला और यह नहीं कह सकते कि हम वर्तमान समाधान से पूरी तरह से संतुष्ट हैं। लेकिन यह एक अलग लेख के लिए एक विषय है।

दूसरा मूल सिद्धांत जिसे हम "किनारे" पर सहमत हुए थे ...

पहले मोबाइल

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

प्रेरणा

हमारे पास यह सवाल नहीं था कि हमें मूल रूप से फुतुब्रा का मोबाइल संस्करण बनाने की आवश्यकता है या नहीं - हमने तुरंत कई कारणों से गतिशीलता पर भरोसा किया।

सबसे पहले, मोबाइल इंटरनेट की विस्फोटक वृद्धि, जो दुनिया में बहुत पहले शुरू हुई, रूस में डूबने लगी। इंटरनेट पर सभी आगंतुकों के लगभग 8% स्मार्टफोन और टैबलेट से साइटों पर जाते हैं, और यह 5 मिलियन से अधिक डिवाइस (वास्तव में, अधिक है, क्योंकि ओपेरा मिनी / मोबाइल वाले सभी फोन को ध्यान में नहीं रखा जाता है)।

दूसरी बात, परियोजना के लक्षित दर्शक (18-45, सक्रिय, प्रगतिशील) बुनियादी ज़रूरतों से प्रवाहित होते हैं (मैं और अधिक दिलचस्प जीना चाहता हूं), जो कि, आंशिक रूप से, मोबाइल इंटरनेट के विकास का चालक है।

तीसरा, सेवा के बहुत सार में "ऑन द गो" का उपयोग शामिल है - मैंने काम करने या अध्ययन करने के तरीके पर कुछ दिलचस्प देखा, एक तस्वीर ली, इसे पोस्ट किया। बोरिंग, स्टोर में कुछ करना नहीं है, जबकि लड़की एक पोशाक पर कोशिश करती है - फुतुबरा खोला, इसे पढ़ें।

"बड़े" वेब संस्करण के बिना भी, परियोजना मौजूद नहीं हो सकती है, क्योंकि सामाजिक सेवाओं के उपयोगकर्ता घर पर या काम से अपना अच्छा समय बिताते हैं।

हम, हमेशा की तरह, श्रम और समय की कमी थी, इसलिए हमें यह चुनना था कि पहले कौन सा संस्करण शुरू करना है। हमने पहले मोबाइल की अवधारणा का पालन करने का फैसला किया, अर्थात्। मोबाइल वेब संस्करण के साथ डिजाइन और विकास शुरू करें।

आकर्षण आते हैं

• सबसे महत्वपूर्ण बात पर ध्यान दें । छोटे पर्दे का आकार, प्रतिरूप, आपको बहुत सार पर ध्यान केंद्रित करता है और परियोजना में केवल सबसे महत्वपूर्ण बात छोड़ता है - स्क्रीन पर माध्यमिक के लिए कोई जगह नहीं है। परियोजना के तर्क पर विस्तार से काम किया जाने लगा, स्क्रीन पर दुर्लभ जगह का उपयोग बुद्धिमानी से और मितव्ययी रूप से किया गया था, और सभी "यहाँ हवा को थोड़ा और ऊपर जाने दें" जंगल में चला गया :)
• पूर्ण विशेषताओं वाला मोबाइल संस्करण । चूंकि शुरू में हमने केवल मोबाइल संस्करण बनाया था, सेवा की सभी उपलब्ध कार्यक्षमता इसमें है, और आपके पास ऐसी स्थिति नहीं होगी जहां आप बड़े वेब से कुछ कार्रवाई कर सकते हैं, लेकिन मोबाइल से नहीं।
• मोबाइल संस्करण बड़े वेब पर अच्छी तरह से काम कर सकता है । केवल मोबाइल संस्करण का विकास करना, हमने मुख्य रूप से अपने कार्य कंप्यूटरों से जाँच की और इसका उपयोग किया और इससे अस्वीकृति नहीं हुई।

विपक्ष

• आपके पास तुरंत बड़े वेब के लिए एक संस्करण नहीं होगा । यदि आप समझते हैं कि आप बड़े वेब के लिए एक अलग संस्करण के बिना नहीं कर सकते हैं, तो आप इसे जल्द ही प्राप्त नहीं करेंगे। और अगर आपका प्रोजेक्ट बड़े वेब पर केंद्रित है, और लॉन्च की तारीखें तंग हैं, तो आपके पास दो संस्करण बनाने के लिए समय नहीं हो सकता है।
• सैकड़ों संस्थाओं के साथ पोर्टल्स फैलाने के लिए दृष्टिकोण कठिन है । यदि आप अमेज़ॅन, ईबे या येल्प विकसित कर रहे हैं, तो इस दृष्टिकोण पर डिजाइन करने में बहुत लंबा समय लग सकता है और असफल हो सकता है।

हमारा अनुभव

सीमित स्थान ने हमें तर्क का निर्माण करने और परियोजना से अतिरिक्त कुछ भी रोकने में बहुत मदद की। हमने न्यूनतम समर्थित रिज़ॉल्यूशन - 240 पिक्सेल चौड़ा निर्धारित किया - और प्रोटोटाइप शुरू किया:




और किसी तरह, यह ध्यान दिए बिना, हम उपयोग करने आए ...

उत्तरदायी वेब डिज़ाइन

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

हेलकंट ने अच्छी तरह से और इस सिद्धांत के बारे में पर्याप्त विस्तार से लिखा है, आप एक अच्छी किताब भी पढ़ सकते हैं।

प्रेरणा

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

आकर्षण आते हैं

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

विपक्ष

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

हमारा अनुभव

हमने m.futubra.com उपडोमेन को छोड़ दिया, सभी कोड को मुख्य डोमेन में स्थानांतरित किया, चौड़ाई में पिक्सेल में स्क्रीन आकार की 3 श्रेणियों को परिभाषित किया:

• 240 से 320 तक
• 320 से 480 तक
• 480 और अधिक से

और मीडिया प्रश्नों और द्रव चित्रों की मदद से हमने प्रत्येक श्रेणी के लिए समस्या ब्लॉकों को अनुकूलित किया:


शीर्ष मेनू पर ध्यान दें, संदेश के तहत कार्रवाई लिंक और बड़े संस्करण पर पृष्ठभूमि छवि। यह सब Futubra का ही संस्करण है, कोई जादू नहीं :)

समस्याओं के बिना नहीं - साइट के कुछ ब्लॉकों के डिजाइन में हमने सभी संभव स्क्रीन आकारों को ध्यान में नहीं रखा है, इसलिए अब कलाकृतियों को छोटी स्क्रीन पर स्थानों में मनाया जाता है। हम इन कमियों को दूर करने के लिए काम कर रहे हैं।

निष्कर्ष

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

यदि आप किसी विशेष पहलू के बारे में अधिक जानने में रुचि रखते हैं - पूछें, टिप्पणियों में जवाब देना सुनिश्चित करें या एक विस्तृत समीक्षा लिखें।

पुनश्च: यदि आपके पास फुतुब्रा के बारे में कोई टिप्पणी या सुझाव है, तो उन्हें टिप्पणियों में या info@futubra.com पर लिखना सुनिश्चित करें। आपकी राय बहुत महत्वपूर्ण है।