इससे पहले कि आप अपने डिज़ाइन के लिए सटीक मॉनिटर रिज़ॉल्यूशन पर विचार करने में बहुत लंबा समय व्यतीत करें, आपको याद रखना चाहिए कि सभी आधुनिक वेब डिज़ाइन उत्तरदायी हैं, जिसका अर्थ है कि यह विभिन्न में अनुकूलित करने के लिए इंजीनियर है स्क्रीन संकल्प. एक ही डिज़ाइन के साथ, आपको सबसे छोटी मोबाइल स्क्रीन से लेकर अल्ट्रा एचडी डेस्कटॉप मॉनिटर तक सब कुछ सपोर्ट करने की आवश्यकता है।
साथ में प्रतिक्रियात्मक वेब डिज़ाइन, आप अधिक सामान्य मोबाइल, टैबलेट और डेस्कटॉप लेआउट स्थापित करते हैं। इन लेआउट के लिए प्रत्येक पृष्ठ तत्व कब और कैसे स्थानांतरित होता है, यह आपके में लिखे गए विशेष ब्रेकप्वाइंट द्वारा निर्धारित किया जाता है सीएसएस. ये ब्रेकप्वाइंट कुछ सामान्य स्क्रीन रिज़ॉल्यूशन द्वारा निर्धारित किए जाते हैं।
जब आप विशिष्ट प्रस्तावों को लक्षित नहीं करेंगे या अपने डिजाइनों के लिए एक निश्चित आकार निर्धारित नहीं करेंगे, तो आप स्क्रीन पर विचार करेंगे ब्रेकप्वाइंट स्थापित करने और सहज ट्रांज़िशन बनाने में संकल्प ताकि आपकी साइट हर डिवाइस पर अच्छी दिखे और स्क्रीन का आकार।
सामान्य डेस्कटॉप संकल्प
- 1280x720 मानक एचडी - आप इसे 720p के रूप में बेहतर जान सकते हैं। यह मानक एचडी रिज़ॉल्यूशन था जब एचडी पहली बार आम हो रहा था। आपको शायद इस रिज़ॉल्यूशन का उपयोग करने वाले कई नए मॉनिटर नहीं मिलेंगे, लेकिन उनमें से बहुत सारे अभी भी जंगली में हैं जब वे अधिक लोकप्रिय थे।
- १३६६x७६८ - यह एक असामान्य संकल्प का कुछ है, लेकिन यह छोटे लैपटॉप और कुछ टैबलेट में बहुत लोकप्रिय है। यदि आप निचले-छोर के साथ काम कर रहे हैं क्रोमबुक, इस बात की अच्छी संभावना है कि यही वह समाधान है जिसे आप लक्षित कर रहे हैं.
- 1920x1080 सबसे आम - जब आप डेस्कटॉप के बारे में सोच रहे हैं, तो आप शायद 1920x1080 के साथ काम कर रहे हैं, जिसे 1080p के रूप में जाना जाता है। यह संकल्प बिल्कुल हर जगह है। अधिकांश डेस्कटॉप मॉनिटर अभी भी 1080p हैं, और बहुत सारे पूर्ण आकार के लैपटॉप भी हैं। आपको लैंडस्केप में भी 1080p में टैबलेट का एक अच्छा हिस्सा मिलेगा।
- 2560x1440 - 1440p मॉनिटर रेजोल्यूशन पिक्चर में एक और अजीब मध्य मैदान है। यह आपके विचार से 2k से अधिक है, लेकिन यह काफी 4k नहीं है। उस ने कहा, यह गेमिंग मॉनिटर बाजार में एक सामान्य संकल्प है, और यह पूर्ण 4k जाने का एक किफायती विकल्प है। आपकी साइट के आधार पर, यह 1440p का समर्थन करने लायक हो भी सकता है और नहीं भी।
- 3840x2160 निकट भविष्य - यह फुल 4k या अल्ट्रा एचडी है। जबकि 4k आमतौर पर उच्च-अंत पीसी के लिए आरक्षित है, कीमतें गिर रही हैं, ग्राफिक्स तकनीक में सुधार हो रहा है, और 4k की मांग टीवी बाजार द्वारा संचालित की जा रही है, जहां यह बहुत अधिक सामान्य है। यह मान लेना सुरक्षित है कि अगले कुछ वर्षों में, 4k आसानी से 1080p को वास्तविक मानक के रूप में पछाड़ देगा, इसलिए यह निश्चित रूप से अब 4k के लिए लेखांकन के लायक है।
सामान्य टैबलेट/लैंडस्केप संकल्प
टैबलेट उतने लोकप्रिय नहीं हो सकते हैं जितने एक बार थे, और परिवर्तनीय लैपटॉप के साथ जोड़े गए फोन के आकार में वृद्धि से उनके बाजार हिस्सेदारी में काफी कमी आई है। फिर भी, टैबलेट रिज़ॉल्यूशन के लिए लेखांकन डेस्कटॉप और लैपटॉप के साथ महत्वपूर्ण रूप से ओवरलैप होता है। आप कुछ परेशानी वाले तत्वों के लिए ब्रेकप्वाइंट बनाने के लिए टैबलेट ब्रेकप्वाइंट का उपयोग करने में सक्षम हो सकते हैं जो कुछ निश्चित प्रस्तावों पर ठीक से फिट नहीं होते हैं।
- पोर्ट्रेट मोड में रखे गए उपकरणों के लिए आपको टैबलेट के रिज़ॉल्यूशन को भी ध्यान में रखना चाहिए। हर कोई लैंडस्केप में रखे अपने टैबलेट पर ब्राउज़ नहीं करेगा, इसलिए आपको पोर्ट्रेट में रखे सामान्य टैबलेट के लिए कम से कम एक ब्रेकपॉइंट जोड़ना चाहिए।
- 1280x800 एक संकल्प जो आम हुआ करता था - पुराने टैबलेट, लोअर-एंड टैबलेट और छोटी टैबलेट सभी में आमतौर पर अमेज़ॅन के कुछ फायर टैबलेट भी होते हैं जो अभी भी 1280x800 का उपयोग करते हैं। यह टैबलेट पर अंतिम सही मायने में मोबाइल रिज़ॉल्यूशन में से एक है।
- 1920x1200 7" और 8" टैबलेट पर सामान्य - परिदृश्य में, आप ज्यादातर समय 1080p के समान ब्रेकप्वाइंट पर भरोसा कर सकते हैं। हालाँकि, जब आप इनमें से किसी एक को परिदृश्य में देखते हैं, तो स्थिति बहुत अलग होती है। अमेज़ॅन फायर सहित 7 और 8-इंच टैबलेट के बीच यह संकल्प आम है।
- 2048x1536 एप्पल टैबलेट -यह Apple का सबसे सामान्य टैबलेट रिज़ॉल्यूशन है। यह बहुत कम अंतर करने के लिए 1440p के समान है, लेकिन फिर से, चित्र असामान्य है। किसी भी मामले में, यह सुनिश्चित करने के लिए कि iPads पर कुछ भी अजीब न हो, इस रिज़ॉल्यूशन पर अपनी साइट का परीक्षण करना एक अच्छा विचार है।
उच्च-रिज़ॉल्यूशन वाले टैबलेट डेस्कटॉप क्षेत्र में आने लगते हैं। अधिकांश समय, आपको उनका हिसाब देने की भी आवश्यकता नहीं होती है क्योंकि संकल्प उस सीमा में आता है जिसका आप पहले ही हिसाब लगा चुके हैं। हालांकि, पूरी तरह से सुनिश्चित होने के लिए परीक्षण करना हमेशा एक अच्छा विचार है।
आम मोबाइल संकल्प
मोबाइल उपकरणों को आसानी से संभालना सबसे जटिल है। ऐसे विविध प्रकार के उपकरण हैं, जिनमें पुराने अभी भी उपयोग में हैं, उन सभी को कवर करना आसान नहीं है। इसलिए मोबाइल-फर्स्ट डिजाइन इतना लोकप्रिय है। तत्त्वज्ञान सरल है। पहले सरलतम मोबाइल डिज़ाइन से प्रारंभ करें, और बड़ी और बड़ी स्क्रीन के लिए उस पर निर्माण करें। इस तरह, सबसे पुराने और सबसे छोटे डिवाइस भी काम करते हैं, लेकिन कम सामग्री और कम सुविधाओं के साथ। साइट बाधित नहीं है, यह केवल सबसे महत्वपूर्ण और आमतौर पर एक्सेस की जाने वाली जानकारी को पहले प्रदर्शित करती है।
यहाँ फोन से निपटने के लिए एक दिलचस्प तरकीब है; डेस्कटॉप रिज़ॉल्यूशन को अपनी तरफ मोड़ें। निश्चित रूप से, असामान्य आउटलेयर हैं, लेकिन अधिकांश वर्तमान फोन इस पैटर्न का पालन करते हैं।
- पुराने उपकरणों पर 720x1280 सामान्य - कई वर्षों के लिए, 720p अपने पक्ष में एक मोबाइल डिवाइस के लिए सबसे सामान्य मानक था। उस स्थिति में, आपको लैंडस्केप मोड के बारे में चिंता करने की ज़रूरत नहीं है, क्योंकि यह डेस्कटॉप 720p जैसा ही है। बस पोर्ट्रेट रिज़ॉल्यूशन को 720 पिक्सेल की चौड़ाई के साथ कवर करें।
- 1080x1920 बीच का मैदान - 1080p बहुत लंबे समय से मानक रहा है। यह अभी भी मध्य-श्रेणी के उपकरणों पर बहुत आम है। यदि आप केवल एक मोबाइल रिज़ॉल्यूशन का समर्थन करने जा रहे हैं, तो वह यह है।
- 1440x2560 वर्तमान टॉप-एंड - मोबाइल उपकरण बड़े होते रहते हैं, और स्क्रीन उच्च और उच्च रिज़ॉल्यूशन प्राप्त करते रहते हैं। 1440p एक दिलचस्प मानक है क्योंकि इस मामले में विभिन्न प्रकार की स्क्रीन चौड़ाई - लंबाई - जो उस सीमा में आती हैं। डेस्कटॉप और मोबाइल दोनों पर, सबसे आम 1440x2560 है। यह स्क्रीन को सामान्य 16:9 आस्पेक्ट रेश्यो देता है। मोबाइल पर, यह डेस्कटॉप से थोड़ा कम मायने रखता है क्योंकि डिवाइस की लंबाई आपके डिजाइन को ज्यादा प्रभावित नहीं करती है।
इससे पहले कि आप खुशी से केवल तीन मोबाइल प्रस्तावों का समर्थन करें, आपको यह भी महसूस करना चाहिए कि कुछ लोग छोटे स्क्रीन वाले हास्यास्पद पुराने फोन का उपयोग कर रहे हैं। आपको यह सुनिश्चित करने के लिए हमेशा एक रॉक बॉटम न्यूनतम रिज़ॉल्यूशन में निर्माण करना चाहिए कि आपकी साइट कई साल पहले से फ़ोन का उपयोग करने वाले किसी व्यक्ति को भी अच्छी लगे।
ध्यान में रखने के लिए सरल टिप्स
स्क्रीन रिज़ॉल्यूशन, रनऑफ़ के बारे में तथ्यों का एक गुच्छा लेना और डिज़ाइनों का मज़ाक उड़ाना शुरू करना आसान है, और ठीक यही तब होता है जब आप मुश्किल में पड़ जाते हैं। जब भी आप कोई वेबसाइट डिज़ाइन कर रहे हों, तो ध्यान में रखने के लिए कुछ महत्वपूर्ण विचार हैं, और वे अधिकांश स्थितियों में, यदि सभी नहीं, तो सही हैं।
- उत्तरदायी डिजाइन द्रव है - आप अपने सीएसएस में हर संभव स्क्रीन आकार और स्थिति के लिए खाते में ब्रेकप्वाइंट की एक विशाल सरणी बनाने के लिए झुकाव महसूस कर सकते हैं। यह अपने आप को पागल करने का एक शानदार तरीका है। रिस्पॉन्सिव वेब डिज़ाइन का मतलब इतना लचीला होना है कि वह कमियों और अनियमितताओं को भर सके। यदि आप स्वयं को बहुत अधिक स्थिर संख्याओं को परिभाषित करते हुए पाते हैं, चाहे वे मीडिया प्रश्नों में हों या स्वयं तत्वों के लिए, तो आप शायद गलत रास्ते पर जा रहे हैं।
- लोग हमेशा अपने ब्राउजर को मैक्सिमाइज नहीं करते - यह प्रकार पिछले बिंदु के साथ हाथ से जाता है। आप ऐसा कर सकते हैं स्क्रीन आकार के लिए डिजाइन, लेकिन जब कोई व्यक्ति अपनी ब्राउज़र विंडो को बड़ा नहीं करता है, तो वह सब धुएं में ऊपर चला जाता है। चीजों को अपने डिजाइन तरल में रखकर, आप अलग-अलग ब्राउज़र विंडो आकारों की समस्याओं से बच सकते हैं।
- सब कुछ परीक्षण करें - अपनी साइट को तोड़ने का प्रयास करें। यही एकमात्र तरीका है जिससे आप सभी बग और विसंगतियों का पता लगा सकते हैं जो एक आगंतुक के अनुभव को बर्बाद कर देंगे। Chrome में काम करने के लिए लोकप्रिय उपकरणों की पूरी सूची के साथ डिवाइस रिज़ॉल्यूशन का परीक्षण करने के लिए अंतर्निहित टूल हैं। आपके पास हमेशा अपनी ब्राउज़र विंडो को विभिन्न आकारों में खींचने का विकल्प होता है, यह देखने के लिए कि साइट विभिन्न आकारों को कैसे देखती है और यह कैसे अनुकूलित और टूटती है।
- अपने उपयोगकर्ताओं से नवीनतम और महानतम की अपेक्षा न करें - यह पुराने फोन और छोटे रिज़ॉल्यूशन के बारे में पिछले बिंदु पर वापस जाता है। आप लोगों से नए उपकरणों की अपेक्षा नहीं कर सकते। यह स्क्रीन रिज़ॉल्यूशन और प्रोसेसिंग पावर दोनों पर लागू होता है। बहुत अधिक ग्राफ़िक्स वाली साइट लोड हो रही है और बहुत अधिक जावास्क्रिप्ट धीमी डिवाइस वाले लोगों को छोड़ने और कभी वापस न आने के लिए एक अच्छा तरीका है।