मोबाइल-फर्स्ट डिज़ाइन प्रैक्टिस में कैसे काम करता है?

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

जब हम मीडिया क्वेरीज़ का उपयोग करते हैं, तो हम उन्हें ब्रेकपॉइंट्स के रूप में संदर्भित करते हैं। इसलिए यदि आप तय करते हैं कि आपकी वेबसाइट का लेआउट 800px की स्क्रीन चौड़ाई पर मोबाइल लेआउट से टैबलेट लेआउट पर स्विच होना चाहिए, तो आप इस तरह एक मीडिया क्वेरी बनाते हैं:

@media screen and (min-width: 800px) { /* टैबलेट स्टाइल्स यहाँ जोड़ें */ }

और अब 800px आपका पहला ब्रेकपॉइंट है।

मान लीजिए कि हम तय करते हैं कि हमारा डेस्कटॉप ब्रेकपॉइंट 1200px होना चाहिए, जैसे:

@media screen and (min-width: 1200px) { /* डेस्कटॉप स्टाइल्स यहाँ जोड़ें */ }

यह आपका दूसरा ब्रेकपॉइंट है, अब आपके पास कुल दो ब्रेकपॉइंट्स हैं।

उपरोक्त ब्रेकपॉइंट मॉडल का उपयोग करने वाले लेआउट का एक त्वरित डेमो यहां है:

https://codepen.io/StrengthandFreedom/pen/abzywPd

जैसा कि आप देख सकते हैं, हमारे पास अब काम करने के लिए तीन अलग-अलग स्क्रीन साइज़ रेंज हैं, मोबाइल: 0-800px, टैबलेट: 800-1200px, डेस्कटॉप: 1200-and-up, जिसके लिए हमें CSS मीडिया क्वेरीज़ के साथ कुल दो ब्रेकपॉइंट्स बनाने की आवश्यकता थी।

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

क्या होगा यदि आपको दो से अधिक ब्रेकपॉइंट्स की आवश्यकता है?

कुछ स्थितियों में अधिक बारीक दृष्टिकोण की आवश्यकता होती है, जहां आप कुछ ब्रेकपॉइंट्स का उपयोग करने से ऊपर जाते हैं। मैंने कुछ वेबसाइट्स को 10 तक उपयोग करते देखा है, हर 100 से 200px या तो पर एक ब्रेकपॉइंट का उपयोग करके।

यह शायद अधिकांश उपयोग के मामलों के लिए अति है।

वेबसाइट के लिए आदर्श ब्रेकपॉइंट्स की संख्या क्या है?

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

एक नियम के रूप में, औसत वेबसाइट को मेरी अनुभव में अधिकांश आधार को कवर करने के लिए 2 से 4 ब्रेकपॉइंट्स की आवश्यकता होती है। मैं 4 के साथ जाता हूं।

आपने पहले 2 ब्रेकपॉइंट्स का उपयोग करने का एक उदाहरण देखा, अब आइए एक और उदाहरण देखें जहां हम 4 का उपयोग कर रहे हैं।

4 ब्रेकपॉइंट्स के साथ एक रिस्पॉन्सिव लेआउट

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

इसका कारण यह है कि हालांकि हम जिन फॉन्ट साइज़ का उपयोग करते हैं वे बड़े हैंडहेल्ड डिवाइस में अच्छी तरह से काम करते हैं, h1 (हेडलाइन) थोड़ा ओवरपावरिंग है। उसी समय, कंटेंट चौड़ाई 500px चौड़ाई बिंदु से ऊपर जाने पर थोड़ी बहुत चौड़ी हो जाती है, जो हमारे माप (लाइन-लेंथ) को बहुत लंबा बना देती है, और रीडर-फ्रेंडली नहीं, प्रति लाइन बहुत सारे कैरेक्टर्स के साथ। आदर्श रूप से, इष्टतम पढ़ने के लिए, हम चाहते हैं कि हमारी लाइन-लेंथ लगभग 40 से 80 कैरेक्टर्स प्रति लाइन हो।

इस समस्या को दूर करने के लिए, आइए अपना पहला ब्रेकपॉइंट 480px पर जोड़ें, और फिर 1200px को अपने डेस्कटॉप और-अप ब्रेकपॉइंट के रूप में उपयोग करने के बजाय, आइए वास्तव में बड़ी स्क्रीन के लिए 1900px पर एक और जोड़ें।

4 ब्रेकपॉइंट डेमो यहां देखें:

https://codepen.io/StrengthandFreedom/pen/mdyMMeL

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

1900px ब्रेकपॉइंट वास्तव में बड़ी स्क्रीन के लिए उपयोगी होगा, जैसे एक्सटर्नल मॉनिटर्स — जिसे आजकल अधिक से अधिक लोग उपयोग करते हैं, और इसलिए उन्हें नजरअंदाज नहीं किया जाना चाहिए।

क्या आप वेबसाइट पर केवल एक ब्रेकपॉइंट का उपयोग करके बच सकते हैं?

मैं चीजों को सरल रखना पसंद करता हूं। सिस्टम में जितने कम मूविंग पार्ट्स, उतना आसान इसे बनाए रखना। हालांकि, आप अपने लेआउट को कितना सरल बना सकते हैं इसकी एक सीमा है।

कुछ डिज़ाइनर और डेवलपर्स अपनी पूरी वेबसाइट के लिए केवल एक ब्रेकपॉइंट का उपयोग करते हैं। एक ब्रेकपॉइंट का मतलब है कि वे उपयोग करते हैं:

1. एक मोबाइल लेआउट
2. एक डेस्कटॉप लेआउट

एक ब्रेकपॉइंट तब आमतौर पर 600-960px स्क्रीन चौड़ाई रेंज के आसपास परिभाषित किया जाएगा।

अब यह आधुनिक समय के लिए थोड़ा आशावादी है, जहां हमें असंख्य विभिन्न स्क्रीन साइज़ और डिवाइस प्रकारों के लिए डिज़ाइन करने की आवश्यकता है।

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

मैंने पहले जो कहा था उसे दोहराने के लिए: अपने डिज़ाइन निर्णयों का मार्गदर्शन संदर्भ को करने दें।