उत्तरदायी डिजाइन के लिए सामग्री व्यवस्था की योजना कैसे करें

एक हालिया पोस्ट में, मैंने चर्चा की कि कैसे दृश्य सामग्री से संबंधित लेआउट डिज़ाइन. हालाँकि यह विषय बहुत विस्तृत है, और कई उप-विषयों में विभाजित है, जिनमें से एक है उत्तरदायी लेआउट के लिए दृश्य संगठन.

इस पोस्ट में, मैं के लिए कुछ सर्वोत्तम प्रथाओं को देखने के लिए उत्तरदायी सामग्री में गहराई से तल्लीन करना चाहूंगा छोटे स्क्रीन के लिए सामग्री को फिर से व्यवस्थित करना. UI और UX डिज़ाइन में, हर प्रोजेक्ट के लिए एक ही सही उत्तर नहीं है, लेकिन हैं रुझान जो अच्छी तरह से काम करते हैं, और इन प्रवृत्तियों से आप अपने खुद के विचारों का निर्माण कर सकते हैं.

सूचियों में पुनर्व्यवस्थित ग्रिड

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

उदाहरण 1: वेलिंगटन नगर परिषद

वेलिंगटन सिटी काउंसिल की वेबसाइट पर एक नज़र डालें, जिसमें कई नंबर का इस्तेमाल किया गया है ग्रिड-स्टाइल वाले अनुभाग मुख पृष्ठ पर.

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

320px चौड़ाई वाले बहुत छोटे फोन पर आपको डिवाइस के आकार के लिए डिज़ाइन करने की आवश्यकता होती है। एक iPhone के मामले में डिवाइस व्यापक से अधिक लंबा होता है इसलिए यह उस तरह से सामग्री की व्यवस्था करने के लिए समझ में आता है.

उदाहरण 2: मोआह बर्गर

Mooyah के लिए होम पेज पर एक नज़र डालें, और लेआउट का आकार बदलने का प्रयास करें। एक छोटा स्लाइड शो क्षेत्र है जिसमें एक डेस्कटॉप स्क्रीन पर तीन आइटम हैं, लेकिन यह सिकुड़ जाता है मोबाइल पर केवल एक आइटम दिखाने के लिए (विजेट में अधिक छिपी स्लाइड्स जोड़कर).

Mooyah ऐप और मेनू का विज्ञापन करने वाले दो प्रचार बॉक्स साइड-बाय-साइड स्थिर रहते हैं जब तक स्क्रीन काफी छोटी हो जाती है उन्हें लंबवत रूप से पुनर्व्यवस्थित करने के लिए.

“हमसे जुडे!” अनुभाग सामग्री को भी पुन: व्यवस्थित करता है ताकि प्रत्येक सामाजिक पोस्ट जितना संभव हो उतना कमरा मिलता है. सामान्यतया, वाइडस्क्रीन मॉनिटर सबसे चौड़े होते हैं और स्मार्टफोन की स्क्रीन सबसे ऊंची होती है.

उदाहरण 3: थीम बाज़ार

ग्रिड के साथ एक लेआउट डिजाइन करते समय, आपको विचार करना चाहिए दोनों विस्तृत और लंबा लेआउट शैलियों कोड की एक पंक्ति लिखने से पहले। इस तरह आप तैयार रहेंगे ब्रेकप्वाइंट का निर्माण करें जो समझ में आए.

पूर्ण ग्रिड लेआउट वाला एक पृष्ठ होना चाहिए बक्से का आकार कम करें एक नई लाइन पर उन्हें तोड़ने से पहले। उदाहरण के लिए, थीम मार्केट में ए निश्चित अधिकतम चौड़ाई 1240 में, और ग्रिड में है प्रति पंक्ति चार ब्लॉक.

जैसे-जैसे स्क्रीन इन ब्लॉकों को छोटा करती जाती है चौड़ाई में कमी, लेकिन अंततः विभाजन सेवा मेरे प्रति पंक्ति तीन बक्से छोड़ दें. सबसे छोटे आकार में, आपको प्रति पंक्ति एक बॉक्स मिलता है, और यह बहुत जगह है चमक के लिए पाठ और कल्पना के लिए.

का संतुलन हमेशा बना रहता है अधिक से अधिक जानकारी रखते हुए की आवश्यकता के साथ संयुक्त पाठ को पठनीय बनाएं. जितना अधिक आप ग्रिड लेआउट का निर्माण करते हैं उतना आसान होगा कि वह इसे खोज सके सामग्री व्यवस्था का संतुलन.

कॉलम छिपाएं या निकालें

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

हालाँकि छोटे उपकरणों के लिए एक सामग्री प्रवाह की आवश्यकता होती है खड़ी समझ में आता है. मुझे दो विकल्प मिले हैं अत्यधिक साइडबार को संभालना:

1. उन्हें मुख्य सामग्री के नीचे छोड़ दें
2. उन्हें पूरी तरह से छिपाएं

उदाहरण 1: स्टॉप प्रेस

स्टॉप प्रेस वेबसाइट पर एक नज़र डालें। यह है चार ऊर्ध्वाधर स्तंभ मेरे डेस्कटॉप मॉनिटर पर.

बाएँ स्तंभ एक ऊर्ध्वाधर नौसेना मेनू है, अगला स्तंभ हाल के लेखों के साथ मुख्य सामग्री स्तंभ है। फिर हमारे पास अतिरिक्त के साथ बहने वाले दो अलग-अलग साइडबार कॉलम हैं “अलग” सामग्री.

जैसे ही ब्राउज़र विंडो का आकार बदलता है, ये कॉलम धीरे-धीरे आकार में कम करें. सबसे पहले जाने वाला बाएं नेविगेशन है जो हैमबर्गर मेनू आइकन के पीछे छिपा हुआ है.

अगला ब्रेकपॉइंट शीर्ष कॉलम को शीर्ष सामाजिक साझाकरण बटन के साथ छुपाता है। फिर अंत में सबसे छोटी स्क्रीन पर, दूर दाईं साइडबार पूरी तरह से गायब हो जाती है सिर्फ प्राथमिक केंद्र स्तंभ छोड़कर सामग्री की.

साइडबार सामग्री में से कोई भी मुख्य सामग्री के नीचे दिखाई नहीं देता है। आईटी इस देखने से पूरी तरह से छिपा हुआ, और यह पूरी तरह से स्वीकार्य विकल्प है पेज लोड कम करें और स्क्रॉलबार की ऊंचाई को एक सभ्य आकार में रखने के लिए.

दूसरी ओर, कई ब्लॉग मुख्य सामग्री के नीचे साइडबार ले जाएँ कॉन्सेप्ट आर्ट एम्पायर पर जैसे कि साइडबार में संबंधित पोस्ट जो कि अंततः हैं सामग्री के नीचे छोड़ें.

उदाहरण 2: विशपॉन्ड ब्लॉग

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

मुझे ए फॉलो करना पसंद है संकर दृष्टिकोण जहां मैं सामग्री के नीचे साइडबार को स्थानांतरित करता हूं, लेकिन साइडबार में कुछ वस्तुओं को एक निश्चित ब्रेकपॉइंट से छिपाता हूं.

उदाहरण के लिए, यदि मेरे पास पूर्ण लेआउट में तीन विज्ञापन खंड हैं, तो मैं उन दो विज्ञापन स्थानों को मोबाइल पर छिपा सकता हूँ। इस साइडबार सामग्री को सुलभ बनाता है परंतु पृष्ठ को अव्यवस्थित नहीं करता है अत्यधिक सामग्री के साथ.

उदाहरण 3: मैडम गौटियर

मुझे यह भी पसंद है कि मैडम गौटियर कैसे उनका उपयोग करती हैं “ताज़ा खबर” मुख पृष्ठ पर साइडबार। यह अंततः सामग्री से नीचे, तथा एक पूर्ण दृश्य स्थिति लेता है पेज पर.

लगभग हर वेबसाइट के डिजाइन में कम से कम एक साइडबार होगा। चाहे यह साइट-व्यापी साइडबार हो या पृष्ठ टेम्पलेट पर दिखाई देने वाली कोई चीज़ हो, साइड-बाय-साइड डिज़ाइन शैली लोकप्रिय है क्योंकि यह अधिक सामग्री फिट बैठता है स्क्रीन पर.

यह तुम्हारी पसंद है सामग्री को कैसे संभालना है. आप साइडबार को कम कर सकते हैं, इसे पूरी तरह से छिपा सकते हैं, या इन दो तकनीकों के हाइब्रिड का उपयोग कर सकते हैं। लेकिन आपको अपनी पसंद बनानी चाहिए साइडबार की प्रासंगिकता के आधार पर, और उसका ज़रूरत पृष्ठ पर.

समायोजित और निचोड़ मार्जिन

हमेशा एक बिंदु होगा जहां सामग्री को निचोड़ा नहीं जा सकता किसी भी आगे, और एक खंड की जरूरत है दूसरे के नीचे गिरा.

द्वारा मार्जिन समायोजित करना पृष्ठ पर सामग्री कम करने से पहले, आप पाठकों को चुनने के लिए सामग्री की एक विस्तृत चौड़ाई देते हैं.

उदाहरण 1: वन वर्ल्ड

वन वर्ल्ड पर पाद एक महान उदाहरण है। यह है बैठते पाद लेख लिंक सही के साथ ए ईमेल साइनअप फॉर्म बाईं तरफ.

जैसे ही लेआउट का आकार बदलता है, इन तत्वों के बीच का मार्जिन और पैडिंग सिकुड़ जाता है। लिंक कॉलम एक साथ करीब हो जाओ, और साइनअप फॉर्म थोड़ा छोटा हो जाता है, बहुत.

एक निश्चित बिंदु अतीत, यह सिर्फ समझ में आता है साइनअप फॉर्म के नीचे लिंक को छोड़ें, और पाद दे सांस लेने के लिए काफी जगह है.

हाँ, यह पृष्ठ को अधिक लंबा बनाता है, और हाँ, इसे नीचे तक स्क्रॉल करने के लिए अधिक प्रयास करना पड़ता है, लेकिन इन छोटे ब्रेकपॉइंट पर आप मान सकते हैं कि वे हैं खड़ी उन्मुख उपकरणों पर.

उदाहरण 2: गोल्डन आइल

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

पृष्ठ पर अन्य आइटम उसी पैटर्न का पालन करें. यह उदाहरण शक्ति का प्रदर्शन करता है हाशिये का आकार बदलना लेआउट को पूरी तरह से पुनर्व्यवस्थित करने से पहले.

छोटे स्क्रीन पर वर्टिकल फ्लो

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

उदाहरण 1: BodyBuilding.com सिंगल पोस्ट

उदाहरण के लिए इस बॉडीबिल्डिंग पोस्ट को लीजिए छोटे बक्से का उपयोग करता है विभिन्न ग्लूट वर्कआउट को दिखाने के लिए.

इन बक्सों में शामिल हैं दाईं ओर थंबनेल है व्यायाम का प्रदर्शन करने के लिए। छोटी स्क्रीन पर, ये थंबनेल एक नई लाइन पर टूट गया, और आखिरकार एक दूसरे के ऊपर ढेर.

आपकी उत्तरदायी CSS को वेबसाइट के प्रत्येक पृष्ठ के लिए इस छोटे minutiae को ध्यान में रखना चाहिए.

उदाहरण 2: वैनिटी फेयर

एक बड़े उदाहरण के लिए, वैनिटी फेयर होम पेज देखें पूरी तरह से चित्रित कहानी स्लाइडर को फिर से व्यवस्थित करता है. एक फुलस्क्रीन डेस्कटॉप पर कहानियां एक ओर चित्रित छवि के साथ सुर्खियों की सूची बनाती हैं। जैसे-जैसे ब्राउजर छोटा होता जाता है, यह टॉप स्टोरीज सेक्शन एक स्लाइडिंग हिंडोला बन जाता है.

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

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

विचार बंद करना

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

इस पोस्ट में दिए गए सुझावों का पालन करें सामग्री को फिर से व्यवस्थित करने के लिए डिजाइन की रणनीति की योजना बनाना सभी उपकरणों पर सर्वोत्तम संभव उपयोगकर्ता अनुभव के लिए.