उत्तरदायी डिजाइन (उत्तरदायी वेब डिजाइन) के लिए 62 उपयोगी उपकरण

यूपीडी उत्तरदायी डिजाइन के लिए एक संक्षिप्त परिचय के लिए, मैं लेख " सभी उपकरणों (उत्तरदायी वेब डिजाइन) के लिए एक साइट बनाने के लिए " पढ़ने की सलाह देता हूं।

मुंहतोड़ पत्रिका के डेवलपर्स के लिए लोकप्रिय ऑनलाइन प्रकाशन के अत्यधिक मूल्यवान लेख "उत्तरदायी वेब डिज़ाइन तकनीक, उपकरण और डिज़ाइन रणनीतियाँ" का अनुवाद।

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

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

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

1. सीएसएस संक्रमण और मीडिया क्वेरी
सीएसएस संक्रमण और मीडिया क्वेरी

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




2. उत्तरदायी डेटा टेबल्स
अनुकूली डेटा टेबल्स

क्रिस कॉयियर और स्कॉट जेहल तालिकाओं को सही ढंग से प्रस्तुत करने के लिए उत्तरदायी डिजाइन तकनीकों के साथ प्रयोग कर रहे हैं (<तालिका>)। टेबल्स विस्तृत हो सकते हैं, और इसके आस-पास कोई नहीं है। आप पूरी तालिका को ज़ूम आउट और देख सकते हैं, लेकिन फिर पाठ का आकार पढ़ने के लिए बहुत छोटा होगा। आप इसमें ज़ूम कर सकते हैं ताकि आप इसे पढ़ सकें, लेकिन फिर आपको पूरी तरह से देखने के लिए तालिका को लंबवत और क्षैतिज रूप से स्क्रॉल करना होगा।

एक समाधान पठनीयता के लिए तालिका को पुन: स्वरूपित करना है। एक अन्य डेटा का पाई चार्ट प्रदर्शित करना है। और तीसरा समाधान छोटी स्क्रीन के लिए एक मिनी-छवि में तालिका का अनुकूलन है, जिस पर क्लिक करने से यह पूरी तरह से खुल जाएगा।



3. उत्तरदायी नेविगेशन मेनू: छोटे स्क्रीन के लिए एक मेनू को ड्रॉपडाउन में बदलें
उत्तरदायी मेनू: छोटे स्क्रीन पर एक मेनू को ड्रॉप-डाउन सूची में बदलें

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



4. सीएसएस मीडिया क्वेरी और उपलब्ध स्थान का उपयोग करना
CSS Media Queries और Accessibility Management

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

उत्तरदायी छवियाँ और वीडियो

5. द्रवित चित्र
रबड़ की छवियां (ब्राउज़र द्वारा ज़ूम)

रबर की छवियां उत्तरदायी वेब डिज़ाइन में केंद्रीय विषयों में से एक हैं। एथन मार्कोटे का लेख क्लासिक कोड स्निपेट img {अधिकतम-चौड़ाई: 100% का उपयोग करके उन्हें बनाने का एक विस्तृत अवलोकन प्रदान करता है ; } , साथ ही आरंभ करने के लिए आवश्यक सभी आवश्यक विवरण।



6. उत्तरदायी छवि: संदर्भ-जागरूक छवि आकार के साथ प्रयोग
उत्तरदायी छवियां (छवियों का आकार बदलना)

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

फिलामेंट समूह द्वारा विकसित विधि आगंतुक स्क्रीन की चौड़ाई के आधार पर विभिन्न आकारों की छवियों को खिलाने के लिए .htaccess और JavaScript फ़ाइलों का उपयोग करती है। एक वैकल्पिक समाधान है कि टाइनीस्कैन जैसे उपकरण का उपयोग किया जाए (यह उपकरण अब सेन्चा का हिस्सा है)।



7. उत्तरदायी छवियां और संदर्भ-जागरूक छवि आकार
उत्तरदायी चित्र और संदर्भ-संवेदनशील छवि का आकार बदलना

क्रेग रसेल ने एक विधि विकसित की है जो विभिन्न प्रस्तावों और संस्करणों की छवियों को खिलाने के लिए एक सर्वर-साइड स्क्रिप्ट (PHP में) का उपयोग करती है। विचार यह है कि PHP स्क्रिप्ट एक सरणी का उपयोग करती है जिसमें छवि फाइलें और प्रतिशत में उनके सापेक्ष पैमाने दर्ज किए जाते हैं। IMG टैग की SRC विशेषता को इस तरह से सेट किया जाना चाहिए जैसे कि अनुरोधित छवि की आईडी प्राप्त करना है, लेकिन पैमाने को निर्दिष्ट किए बिना।

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



8. उत्तरदायी छवियाँ अभी
उत्तरदायी छवियां अब

हैरी रॉबर्ट्स मौजूदा डिवाइस के लिए सबसे उपयुक्त छवि का चयन करने के लिए DIV और IMG के संयोजन का उपयोग करने के विचार के साथ आए थे। मूल DIV की पृष्ठभूमि-छवि और IMG में संग्रहीत एक बड़ी छवि है, मोबाइल संस्करण। मीडिया क्वेरी का उपयोग करते हुए, IMG की एक छोटी छवि या पृष्ठभूमि DIV से एक बड़ी छवि का चयन किया जाएगा:
<div class="r-img" style="background:url(link/to/large/version); width:[width-of-image]px; height:[height-of-image]px;">
<img src="link/to/small/version" />
</div>



9. CSS3 का उपयोग करके उत्तरदायी छवियां
सीएसएस का उपयोग कर उत्तरदायी छवियां

निकोलस गैलाघेर विधि मीडिया क्वेरी ( वाह! - लगभग। अनुवादक ), सामग्री संपत्ति, और attr () अभिव्यक्ति के उपयोग पर निर्भर करती है। दुर्भाग्य से, यह विधि केवल विचार के दृष्टिकोण से दिलचस्प है - यह वर्तमान में मौजूद किसी भी ब्राउज़र में काम नहीं करता है।



कुकीज़ का उपयोग कर उत्तरदायी छवियाँ
कुकीज़ का उपयोग कर उत्तरदायी छवियाँ

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

दूसरे शब्दों में, सर्वर को HTML से छवियों को लोड करने से पहले डिवाइस का स्क्रीन आकार पता चल जाएगा। इसका उपयोग सर्वर साइड पर छवियों के आकार को कम करने के लिए किया जा सकता है।



11. ExpressionEngine के साथ उत्तरदायी छवियां
ExpressionEngine के साथ उत्तरदायी छवियाँ

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



12. सीएसएस: लोचदार वीडियो
सीएसएस: उत्तरदायी वीडियो

निक ला, अधिकतम-चौड़ाई लागू करने के आधार पर : वीडियो के लिए 100% , HTML5 वीडियो, ऑब्जेक्ट- और iframe- एम्बेडेड वीडियो अनुकूली बनाने वाली एक विधि का परिचय देता है। उत्तरार्द्ध के संबंध में, विधि बहुत सरल है। बस उल्लिखित कोड को DIV ब्लॉक में पेस्ट करें और पैडिंग-बॉटम को 50% से 60% तक निर्दिष्ट करें। और बाल तत्वों (जैसे कि iframe, ऑब्जेक्ट एम्बेड) के लिए - चौड़ाई और ऊंचाई गुण 100% प्लस बिल्कुल स्थिति के बराबर। यह इनलाइन तत्वों को पूर्ण चौड़ाई में स्वचालित रूप से विस्तारित करने का कारण होगा। यह विधि मूल रूप से थियरी कोब्लेन्टज़ द्वारा प्रस्तावित की गई थी।



13. Resizeable छवियाँ (पूर्ण संकल्प पर!)
आकार बदलने योग्य चित्र

पाठ आकार के आधार पर छवियों को आकार देने के लिए एक त्वरित मार्गदर्शिका।

उत्तरदायी ईमेल

14. मीडिया क्वेरी के साथ मोबाइल उपकरणों के लिए अपने ईमेल का अनुकूलन
मीडिया क्वेरी के साथ मोबाइल के लिए ईमेल का अनुकूलन करें

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



15. ईमेल के लिए उत्तरदायी डिजाइन, सबसे बड़ा मोबाइल ऑडियंस
ईमेल के लिए उत्तरदायी डिजाइन, सबसे बड़ा मोबाइल दर्शकों के साथ उपकरण

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



16. HTML ईमेल में मीडिया क्वेरी
HTML पत्र में मीडिया क्वेरी

यह लेख विशिष्ट मोबाइल ईमेल क्लाइंट के लिए मीडिया क्वेरी के उपयोग पर चर्चा करता है।



17. ईमेल में CSS सपोर्ट के लिए गाइड
CSS क्लाइंट सपोर्ट गाइड

सभी प्रमुख ईमेल क्लाइंट में समान रूप से सही ढंग से प्रदर्शित होने वाला HTML मेल बनाना बेहद समय लेने वाला और समय लेने वाला हो सकता है। सरल सीएसएस के लिए समर्थन भी क्लाइंट के बीच और यहां तक ​​कि एक ही क्लाइंट के विभिन्न संस्करणों के बीच काफी अलग है।

अभियान मॉनिटर ने आपको इन सभी विवरणों का पता लगाने के लिए समय और तंत्रिकाओं को बचाने के लिए एक गाइड रखा है। 24 विभिन्न ईमेल क्लाइंट पर परीक्षण किया गया, इसमें सभी लोकप्रिय ईमेल एप्लिकेशन शामिल हैं।

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

आप स्क्रैच से एक उत्तरदायी डिजाइन तैयार कर सकते हैं या इसे बनाने की प्रक्रिया को तेज करने और सरल बनाने के लिए नीचे सूचीबद्ध टूल का उपयोग कर सकते हैं।

18. प्रतिक्रिया। js

यह एक तेज़ और छोटी पॉलीफ़िल है (कोड का एक टुकड़ा जो ब्राउज़र असमर्थित कार्यक्षमता जोड़ता है) स्कॉट Jehl द्वारा IE6-IE8 और उच्चतर में CSS3 मीडिया क्वेरी से न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई गुणों का समर्थन करने के लिए बनाया गया था।

Css3-mediaqueries-js एक और स्क्रिप्ट है जो CSS3 Media Queries को IE 5+, Safari 2 और Firefox 1+ में काम करने की अनुमति देती है।



19. वेबपुट्टी: वैज्ञानिक प्रगति सीएसएस संपादन
WebPutty: CSS संपादन में निर्णायक

यह टूल आपकी साइट के लिए ऑटोसैविंग और वास्तविक समय में परिणाम देखने के साथ सीएसएस वेब एडिटर है। WebPutty SCSS, Sass, LESS और कम्पास का समर्थन करती है। इस उपकरण का उपयोग करने के लिए, बस अपनी साइट पर बंद </ head> टैग से पहले लिंक डालें।



20. सीएसएस मीडिया क्वेरीज़ डीबग करना
CSS3 मीडिया क्वेरीज़ डीबग करना

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



21. उत्तरदायी डिजाइन परीक्षण
उत्तरदायी डिजाइन परीक्षण

यह टूल उन सभी के लिए है, जिन्हें अलग-अलग स्क्रीन चौड़ाई के साथ बनाई गई साइट की जांच करने के लिए त्वरित और आसान तरीका चाहिए। आप साइट को ऑनलाइन और जीथब से कोड डाउनलोड करके देख सकते हैं।



22. उत्तरदायी कंटेनर: चयनकर्ता प्रश्न
अनुकूली ब्लॉक

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



23. मेरा ब्राउज़र का आकार बदलें
अपने ब्राउज़र का आकार बदलें

यदि आपको एक निश्चित विंडो आकार में सामग्री प्रदर्शित करने के लिए ब्राउज़र की आवश्यकता है, तो यह वही है जो आपको चाहिए। बस आपको जिस साइज़ की ज़रूरत है उस पर क्लिक करें और देखें कि आपकी साइट उस साइज़ में कैसी दिखती है। Chrome और Opera "ResizeTo" ईवेंट की समस्याओं के कारण भी काम नहीं करता है।




24. मीडिया क्वेरी बुकमार्कलेट
बुकमार्क मीडिया क्वेरी

एक आसान उपकरण जो दिखाता है कि कौन सी मीडिया क्वेरी वर्तमान ब्राउज़र चौड़ाई पर सक्रिय हैं। इसे बुकमार्क बार पर खींचें और यदि आवश्यक हो तो इसे लॉन्च करें।



25. उत्तरदायी

उत्तरदायी वेबसाइट बनाने के लिए इस छोटे उपकरण से जानकारी का उपयोग करें।



26. प्रोटोफ्लुइड

उत्तरदायी डिजाइन के तेजी से प्रोटोटाइप के लिए एक उपकरण। आप सीएसएस को कई लोकप्रिय स्क्रीन साइज, ओरिएंटेशन और ब्राउजर के लिए डिजाइन कर सकते हैं, चाहे वह फोन (ब्लैकबेरी मशाल, गूगल नेक्सस वन, आईफोन, मोटोरोला ड्रॉयड), टैबलेट (ब्लैकबेरी प्लेबुक, आईपैड, सैमसंग गैलेक्सी टैब, डेल स्ट्रीक), मॉनिटर या टीवी 720p, 1080p)।

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



27. द्रव ग्रिड कैलकुलेटर
रबर जाल कैलकुलेटर

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



28. मुफ्त HTML5 / CSS3 वर्डप्रेस 3.1+ थीम के साथ उत्तरदायी लेआउट: योको
नि: शुल्क HTML5 / CSS3 वर्डप्रेस 3.1 उत्तरदायी लेआउट विषय: योको

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



29. शिर्ज़ो, एक उत्तरदायी वर्डप्रेस थीम
Scherzo, उत्तरदायी वर्डप्रेस थीम

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

उत्तरदायी डिजाइन लेआउट

30.320 और ऊपर

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



31. मोबाइल बॉयलरप्लेट

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



32. कंकाल: उत्तरदायी, मोबाइल के अनुकूल विकास के लिए सुंदर बॉयलरप्लेट
कंकाल: उत्तरदायी विकास के लिए महान बॉयलरप्लेट

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

उत्तरदायी डिजाइन रूपरेखा

33.1140 सीएसएस ग्रिड

1140 सीएसएस ग्रिड मोबाइल उपकरणों के आकार से लेकर 1280px चौड़े मॉनिटर तक स्क्रीन पर काम करने के लिए अनुकूलित है। यह मीडिया क्वेरी का उपयोग करके एक सरल और लचीला ग्रिड है।



34. inuit.css

यह सीएसएस फ्रेमवर्क छोटे स्क्रीन (जैसे फोन) और छोटी स्क्रीन (जैसे टैबलेट) को कम से कम प्रयास के साथ बॉक्स के बाहर विकसित करने के लिए एक अच्छी नींव है। इसके अलावा, अपने लिए एक रबड़ सीएसएस फ्रेमवर्क बनाने के लिए एक जनरेटर है।




35. फूलना

फ्लूरिड 6, 7, 8, 9, 10, 12 और 16 कॉलम के लिए एक रबड़ की जाली है।



36. फ्लुइडग्रिड्स

फ्लुइडग्रिड एक मॉड्यूलर जाल जनरेटर है जो 6, 7, 8, 9, 10, 12 या 16 कॉलम के लेआउट बनाता है।



37. कम फ्रेमवर्क 4

उत्तरदायी लेआउट बनाने के लिए सीएसएस फ्रेमवर्क। इसमें 4 मूल लेआउट और तीन टाइपोग्राफी सेट शामिल हैं।



38. द्रव ग्रिड प्रणाली

टाइपोग्राफी पर ध्यान देने के साथ एक रबर फ्रेमवर्क।



39. टाइनी फ्लूइड ग्रिड

टाइनी फ्लुइड ग्रिड आपको 12, 16 या 24 कॉलम के अपने रबर ग्रिड बनाने में मदद करेगा, उनकी अधिकतम और न्यूनतम चौड़ाई निर्धारित करेगा और प्रतिशत में इंडेंट करेगा।

उत्तरदायी डिजाइन रणनीतियाँ

40. उत्तरदायी डिज़ाइनर का वर्कफ़्लो
उत्तरदायी वेब डिज़ाइन डेवलपर वर्कफ़्लो

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



41. गोल्डीलॉक्स दृष्टिकोण को उत्तरदायी वेब डिजाइन
गोल्डीलॉक्स उत्तरदायी वेब डिज़ाइन दृष्टिकोण

गोल्डीलॉक्स एम-आधारित लेआउट पर विचार करता है, जो उस उपकरण की परवाह किए बिना बहुत अच्छे लगते हैं जो वे देख रहे हैं।



42. कंटेंट कोरियोग्राफी
कंटेंट कोरियोग्राफी

लेख में आप पढ़ सकते हैं कि आज के मानकों को पूरा करने के लिए अपनी साइट की योजना कैसे ठीक से बनाएं। अपनी सामग्री का प्रबंधन करना शुरू करें ताकि यह किसी भी चौड़ाई पर सबसे अच्छा काम करे।



43. पहले संरचित सामग्री
पहले संरचित सामग्री

इस प्रस्तुति में, स्टीफन हे ने एक उत्तरदायी वेबसाइट बनाते समय आने वाली परेशानियों का वर्णन किया है।

स्टीफन से पता चलता है कि हमें पहले सामग्री की उचित संरचना के बारे में सोचना चाहिए, जो इसे एक छोटी स्क्रीन से और एक पाठ ब्राउज़र से सार्वभौमिक और आसानी से सुलभ बना देगा। आपकी सामग्री कहीं भी उपयोग करने के लिए तैयार होनी चाहिए।



44. पहले एक लक्ष्य अनुभव के लिए डिजाइन
पहले लक्ष्य अनुभव के लिए डिजाइन

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

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



45. अधिक उत्तरदायी डिजाइन, कृपया
अधिक उत्तरदायी डिजाइन कृपया

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



46. ब्रेकिंग डेवलपमेंट

ल्यूक व्रोबेल्स्की ने स्टीफन हेय की विभिन्न उपकरणों के लिए डिजाइन वास्तविकताओं के बारे में बात करने के दौरान ब्रेकिंग डेवलपमेंट कॉन्फ्रेंस में नोट्स लिए।



47. मल्टीस्क्रीन रणनीतियाँ के लिए पैटर्न
मल्टीस्क्रीन रणनीतियाँ के लिए टेम्पलेट

इस सरल लेकिन बहुत उपयोगी प्रस्तुति पर एक नज़र डालें, जिसमें यह जानने के लिए कि कौन से प्रमुख कारक मल्टी-स्क्रीन अवधारणाओं में निर्णायक भूमिका निभाते हैं।



48. भविष्य से उत्तरदायी वेब डिज़ाइन
भविष्य से उत्तरदायी वेब डिज़ाइन

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



49. प्रगतिशील मोबाइल रणनीति विकसित करना
एक प्रगतिशील मोबाइल रणनीति विकसित करना

इस प्रस्तुति में, डेव ओल्सेन एक प्रगतिशील मोबाइल रणनीति प्रस्तुत करते हैं जिसमें दर्शकों, सामग्री और मंच रणनीतियों शामिल हैं। डेव का मानना ​​है कि एक स्थायी और स्केलेबल मोबाइल रणनीति विकसित करने के लिए, आपको निम्नलिखित प्रश्नों का उत्तर देना होगा: "लक्षित दर्शकों के लिए इस सामग्री का क्या मूल्य है?"



50. अपनी वेबसाइट का मोबाइल संस्करण बनाने के लिए CSS3 मीडिया क्वेरी का उपयोग कैसे करें
साइट का मोबाइल संस्करण बनाने के लिए CSS3 मीडिया क्वेरी का उपयोग कैसे करें

इस स्मैशिंग मैगज़ीन के लेख में, राहेल एंड्रयू बताते हैं कि कैसे, बस कुछ CSS नियमों का उपयोग करके, आप CSS3 का उपयोग करके अपनी साइट का एक iPhone संस्करण बना सकते हैं जो अभी काम करेगा। लेख एक बहुत ही सरल उदाहरण प्रदान करता है और एक साइट पर मोबाइल उपकरणों के लिए शैलियों को जोड़ने की प्रक्रिया यह दिखाने के लिए कि हम किसी मौजूदा साइट पर कितनी आसानी से मोबाइल-उन्मुख शैलियों को जोड़ सकते हैं।

आप इस विषय पर निम्नलिखित लेखों में भी रुचि ले सकते हैं: हारून गुस्ताफसन, " मीडिया क्वेरी के साथ उत्तरदायी लेआउट, " और एमिली लुईस, " विभिन्न CSS3 मीडिया क्वेरी डिवाइस के लिए अनुकूलन "।

उत्तरदायी वेब डिज़ाइन पर चर्चा और विभिन्न दृष्टिकोण

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

51. डिफ़ॉल्ट रूप से उत्तरदायी
डिफ़ॉल्ट अनुकूलनशीलता

एंडी ह्यूम बताते हैं कि उनकी राय में, अनुकूलनशीलता हमारा सब कुछ है। यह वही है जो किसी साइट को तब काम करता है जब वह किसी अनजान व्यक्ति द्वारा किसी अज्ञात डिवाइस पर अज्ञात ब्राउजर के जरिए लोड होता है।



52. उत्तरदायी वेब डिज़ाइन या अलग मोबाइल साइट? एह, यह निर्भर करता है
उत्तरदायी वेब डिज़ाइन या एक अलग मोबाइल साइट? परिस्थितियों पर निर्भर करता है।

एक मोबाइल साइट की तुलना में उत्तरदायी वेब डिज़ाइन के पेशेवरों और विपक्षों के बारे में एक दिलचस्प लेख।



53. उत्तरदायी वेब डिज़ाइन के खिलाफ मामला
उत्तरदायी वेब डिजाइन के खिलाफ

प्रतिक्रियात्मक डिजाइन कब उपयुक्त है और कब नहीं, इस बारे में इस समीक्षा राय में शामिल करना तर्कसंगत है। यह आलेख चर्चा करता है कि उत्तरदायी डिज़ाइन हमेशा उपयोगकर्ता इंटरैक्शन के संदर्भ में समझ में नहीं आता है। लेख पर दिलचस्प टिप्पणियों पर ध्यान दें। ल्यूक जोन्स की भी ऐसी ही राय है।



54. एक उत्तरदायी मन
अनुकूल चित्त

जेरेमी कीथ ब्लॉग पर उत्तरदायी डिज़ाइन के आवश्यक घटकों और विभिन्न स्क्रीन आकारों के आधार पर अलग-अलग लेआउट बनाने की कुशलता से चर्चा की गई। उदाहरण के साथ।

55. उत्तरदायी वृद्धि

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

56. मोबाइल-फर्स्ट रिस्पॉन्सिव वेब डिज़ाइन

एक प्रकाशन दर्शन और रणनीति का एक संयोजन है जो उत्तरदायी डिजाइन में सर्वोत्तम प्रथाओं को जमा करता है।

57. मोबाइल प्रथम वेब डिज़ाइन कहाँ हैं?
मोबाइल फर्स्ट वेब डिज़ाइन कितनी दूर चला गया है?

इस लेख में, जेसन ग्रिग्बी ने उत्तरदायी डिजाइन, इसकी विशेषताओं पर अपने शोध के परिणामों के बारे में बात की और अनुकूली वेबसाइट निर्माण के क्षेत्र में चीजों की वर्तमान स्थिति के बारे में कुछ टिप्पणियां भी कीं।

अतिरिक्त संसाधन

उत्तरदायी डिजाइन प्रकाशन जो ऊपर की श्रेणियों में फिट नहीं होते हैं।

58. मीडिया क्वेरीज़ मीडिया क्वेरीज़ का

उपयोग करने वाली वेबसाइटों का नियमित रूप से अद्यतन संग्रह है। 59 उत्तरदायी डिजाइन के लिए वेब , द्वारा एतान मार्कोट उत्तरदायी वेब डिजाइन की पुस्तक, लेखक एतान मार्कोट यह पुस्तक, एतान मार्कोट द्वारा लिखित और इसके अलावा एक पुस्तक प्रकाशन द्वारा प्रकाशित - अनुकूली साइटों के विकास पर ज्ञान के भण्डार के। यह उत्तरदायी डिजाइन, मॉड्यूलर ग्रिड, उत्तरदायी छवियों और मीडिया क्वेरी की मूल बातें शामिल करता है, जो यह समझने के लिए पर्याप्त है कि एक उत्तरदायी वेबसाइट कैसे बनाई जाए। 60. बिग वेब शो एपिसोड # 9: उत्तरदायी वेब डिज़ाइन












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

अल्पाहार के लिए

61. HTML5 में नवीनतम HTML5 में
हालिया रुझान

यह प्रस्तुति HTML5 के अल्प-ज्ञात पहलुओं पर चर्चा करती है जिसे निकट भविष्य में ब्राउज़रों में लागू किया जा सकता है। अन्य बातों के अलावा, जावास्क्रिप्ट के साथ सर्वर क्वेरी मीडिया क्वेरी और डिवाइस फॉर्म फैक्टर डिटेक्शन।

अनुवादक से

62. उत्तरदायी डिजाइन के बारे में पहला रूसी भाषा का ब्लॉग ।

लेख के लिए एक महान जोड़ उत्तरदायी डिजाइन के बारे में एक ब्लॉग होगा, जिसमें डेवलपर्स अनुभव साझा करते हैं और उत्तरदायी उपकरणों की समीक्षा लिखते हैं।