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

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

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

@media screen and (min-width: 800px) {
  /* Add Tablet styles here */
}

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

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

@media screen and (min-width: 1200px) {
  /* Add Desktop styles here */
}

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

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

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

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

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

क्या होगा यदि आपको दो से अधिक ब्रेकप्वाइंट चाहिए?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

क्या आप किसी वेबसाइट पर केवल एक ब्रेकप्वाइंट का उपयोग करके दूर हो सकते हैं ?

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

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

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

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

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

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

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