30 उपयोगी उत्तरदायी वेब डिज़ाइन ट्यूटोरियल
इसलिए हम अपने अंत तक पहुँच गए हैं "उत्तरदायी वेब डिज़ाइन सप्ताह", आज रात की पोस्ट श्रृंखला की अंतिम होगी। जब आप विभिन्न उपकरणों पर प्रदर्शित होते हैं, तो प्रतिक्रिया देने के लिए उन कोडों में हेरफेर करने में अपने कौशल को सुधारने में आपकी मदद करने के लिए हम सभी बाहर जा रहे हैं। और ऐसा करने के लिए, हम विशेषता रखते हैं 30 उत्तरदायी वेब डिज़ाइन ट्यूटोरियल ऑनलाइन मिला। यह सूची एक संपूर्ण नहीं है, लेकिन यह आपको एक अनुकूली वेबसाइट को डिजाइन करने की मूल बातें समझने पर शुरू होगी जो सभी प्रकार के स्क्रीन आकारों को पूरा करेगी।.
हम 'ब्रेकिंग द आइस' में परिचयात्मक ट्यूटोरियल के साथ शुरुआत करेंगे, आरडब्ल्यूडी की तरह कुछ: 101 बिल्डिंग आपको अभ्यास शुरू करने से पहले कॉन्सेप्ट के हैंग में शामिल होना चाहिए।.
अंत में हम एक 'डू मोर' सेक्शन के साथ समाप्त होंगे जिसमें हम उन ट्यूटोरियल की सुविधा देंगे जो क्षैतिज लेआउट, 'इलास्टिक' वीडियो, ड्रॉप-डाउन मेनू और स्लाइड-टू-टॉप एक्सीडेंट नेवीगेशन, थंबनेल और टेबल्स के साथ स्टिकी समस्या के साथ खेलते हैं।.
लेकिन पहले…
यहां उन दो ट्यूटोरियल्स का पुन: अवलोकन किया गया है जो इस सप्ताह के शुरू में हमारे लेखकों द्वारा प्रस्तुत किए गए थे:
उत्तरदायी वेबसाइट नेविगेशन
थोरीक फिरदौस द्वारा - [देखें ट्यूटोरियल]
यहाँ एक ट्यूटोरियल है जो आपको अपनी खुद की उत्तरदायी वेबसाइट नेविगेशन बनाने में मदद करेगा। एक वेबसाइट का सबसे महत्वपूर्ण पहलू यह है कि साइट के विभिन्न हिस्सों के माध्यम से नेविगेट करना कितना आसान है। इस ट्यूटोरियल के साथ CSS3 के साथ इसे अनुकूलित करने का तरीका जानें.
उत्तरदायी फिर से शुरू
जेक रोशेल्यू द्वारा - [देखें ट्यूटोरियल]
यदि आप एक वेब पेशेवर हैं और एक ऑनलाइन रिज्यूमे पहले से ही आपके करियर का हिस्सा और पार्सल है, तो आपको उस रिज्यूम को फिर से चालू करने का अवसर लेना चाहिए। किसी भी उपकरण पर आपको खोजने के लिए नियोक्ताओं और ग्राहकों के लिए इसे आसान बनाएं। और जब आप इस पर होते हैं, तो आपका अपना फिर से शुरू एक पोर्टफोलियो के रूप में दोगुना हो जाता है जो आप डेवलपर के रूप में कर सकते हैं.
बर्फ तोड़ना
अब, हम कहाँ थे? आह हाँ, चलो कुछ बर्फ तोड़ने की कार्रवाई शुरू करें!
शुरुआत करने के लिए उत्तरदायी वेब डिजाइन के लिए गाइड
निक पेटिट द्वारा - [देखें ट्यूटोरियल]
यह ट्यूटोरियल शुरुआती लोगों के लिए एक शानदार शुरुआती बिंदु है क्योंकि यह बताता है कि वेब उत्तरदायी डिज़ाइन का क्या अर्थ है, यह कैसे प्रकाश में आया, साथ ही साथ दूसरों के बीच द्रव ग्रिड और मीडिया प्रश्नों के बारे में स्पष्टीकरण भी। ट्यूटोरियल के निचले भाग में सूचीबद्ध संसाधनों को भी देखें.
उत्तरदायी वेब डिज़ाइन का परिचय: वीडियो
निक पेटिट द्वारा - [देखें ट्यूटोरियल]
यह एक ट्यूटोरियल है जो 9 मिनट के करीब है जो कि उत्तरदायी वेब डिज़ाइन के बारे में बताता है कि यह कैसे हुआ, यह वेबसाइट के डिज़ाइन पर क्या प्रभाव पड़ता है और उत्तरदायी वेब डिज़ाइन बनाने में कौन से तत्व शामिल हैं। । यदि आप यह समझना चाहते हैं कि पहले कोडिंग में शामिल हुए बिना उत्तरदायी वेब डिज़ाइन क्या है, तो आपको इस वीडियो से शुरू करना चाहिए.
किसी भी वेबसाइट को रिस्पॉन्सिव साइट में कैसे बदलें
रोचेस्टर ओलिवेरा द्वारा - [देखें ट्यूटोरियल]
यह एक और ट्यूटोरियल है जो मूल से शुरू होता है, लेकिन ओएस और ब्राउज़र सहित आप अपनी वेबसाइट के लिए उत्तरदायी होने के साथ-साथ उन तत्वों को भी प्रभावित करते हैं जो वेबसाइट से अलग-अलग उपकरणों से देखे जाने पर प्रभावित होते हैं। लेखक ने आपके काम को आसान बनाने के लिए कुछ उपयोगी वर्डप्रेस और jQuery प्लगइन्स भी दिखाए.
3 चरणों में उत्तरदायी डिजाइन
निक ला के द्वारा - [देखें ट्यूटोरियल]
यह ट्यूटोरियल समझाएगा कि आप मेटा टैग, एचटीएमएल संरचना और सभी महत्वपूर्ण मीडिया प्रश्नों के साथ एक उत्तरदायी वेब डिज़ाइन कैसे तैयार कर सकते हैं। आपको इसे समझने के लिए CSS के कुछ ज्ञान की आवश्यकता है ...
एक उत्तरदायी वेब के लिए डिजाइनिंग
मैक्स लुज़ुरीगा द्वारा - [देखें ट्यूटोरियल]
यहां एक लेख है जो इतना ट्यूटोरियल नहीं है क्योंकि यह उत्तरदायी वेब डिज़ाइन बनाने के लिए एक गाइड है। उस लेखक ने कहा, लेखक शाब्दिक रूप से आपको उत्तरदायी वेब डिज़ाइन के बारे में बताता है। इस बारे में स्पष्टीकरण हैं कि कुछ विशेषताएं पर्याप्त रूप से उत्तरदायी क्यों नहीं हैं, अनुपात और मॉड्यूल के साथ कैसे काम करना है, और सभी के लिए, यह अपेक्षाकृत कम है और अवशोषित करना आसान है.
उत्तरदायी वेब डिज़ाइन: एक विज़ुअल गाइड
एंड्रयू गोर्मले द्वारा - [देखें ट्यूटोरियल]
यदि पाठ-भरे ट्यूटोरियल व्यवहार्य विकल्प नहीं हैं, तो इसके बजाय इस वीडियो ट्यूटोरियल का प्रयास करें। यह अभी भी तकनीकी है, लेकिन अगर यह आपको बेहतर महसूस कराता है, तो आपको ज्यादा पढ़ने की ज़रूरत नहीं है। यह लगभग 25 मिनट लंबा है और वीडियो-निर्माता वास्तव में उन हिस्सों के माध्यम से तेजी से फ़ॉवर्ड किया गया है जहां वह कोड करता है, फिर यह समझाने के लिए वापस जाता है कि क्या करना है.
निर्माण शुरू करें
ठीक है, चलो कुछ उत्तरदायी डिजाइनों का निर्माण शुरू करते हैं ...
तरल पदार्थ
एथन मार्कोटे द्वारा - [देखें ट्यूटोरियल]
ग्रिड कहें, और आप 'कठोर संरचनाओं' को कहेंगे, तरल पदार्थ कहेंगे और आप सोचेंगे कि यह स्क्रीन के एक तरफ से नीचे या ऊपर या उस तरफ से बह सकता है जब आप ब्राउज़र पर दबाव डालते हैं, लेकिन उन दोनों को एक साथ रखें। आप शायद सोचेंगे कि इस ट्यूटोरियल को देखने के लिए आपको पूरी तरह से सराहना करने की आवश्यकता है कि द्रव ग्रिड आपके डिजाइन को और अधिक संवेदनशील बनाने में कैसे मदद कर सकते हैं.
द्रवित चित्र
एथन मार्कोटे द्वारा - [देखें ट्यूटोरियल]
इस लेख के अंत तक, आपको पता होना चाहिए कि ईथन मार्कोटे कौन हैं। यहाँ एक संकेत है: वह वह है जो वेब उत्तरदायी डिजाइनों के लिए अवधारणा और शब्द के साथ आया है। उनका नाम इस सूची में हर दूसरे ट्यूटोरियल में बहुत अधिक बदल जाएगा, इसलिए सीधे मास्टर से द्रव चित्रों के बारे में सलाह न लें?.
उत्तरदायी वेब डिज़ाइन में स्केलेबल नेविगेशन पैटर्न
माइकल मेस्कर द्वारा - [देखें ट्यूटोरियल]
यह ट्यूटोरियल उन पाठों के बारे में बात करता है जो लेखक ने बड़े पैमाने पर उत्तरदायी वेब डिज़ाइन परियोजना पर काम करने से सीखा है। उपयोगकर्ता-अनुकूल और उत्तरदायी परिणामों के लिए कॉन्फ़िगर करना आसान बनाने वाले टेम्प्लेट बनाने के बारे में उनका 'वॉकथ्रू' पढ़ें। यह समझने में पर्दे के पीछे एक शानदार नज़र है कि डेस्कटॉप, टैबलेट और मोबाइल विचारों के लिए सबसे अच्छे तरीके से इंटरफेस कैसे डिज़ाइन किया जाए.
CSS3 मीडिया क्वेरी के साथ उत्तरदायी वेब डिज़ाइन
निक ला के द्वारा - [देखें ट्यूटोरियल]
और एक और उत्कृष्ट ट्यूटोरियल आपको यह जानने के लिए कि HTML5 और CSS3 के साथ क्रॉस-ब्राउज़र उत्तरदायी वेबसाइट टेम्पलेट कैसे डिज़ाइन किया जाए। यह एक कदम-दर-चरण दृष्टिकोण है और मीडिया प्रश्नों के प्रभाव की सराहना करने के लिए मीडिया प्रश्नों को बेहतर ढंग से लागू करने से पहले और बाद में एक वेब डिज़ाइन का डेमो है।.
सीएसएस प्रभाव: अंतरिक्ष चित्र पाठ ऊंचाई से मेल खाने के लिए
ज़ो मिकले गिलेनवाटर द्वारा - [देखें ट्यूटोरियल]
यह ट्यूटोरियल आपको निश्चित-चौड़ाई वाली छवियां बनाने की चाल सीखता है, साथ-साथ पाठ के साथ लाइन करने के लिए उनके आकार और रिक्ति को बदलते हैं, भले ही ब्राउज़र विंडो का आकार बदला नहीं गया हो.
मीडिया क्वेरी के साथ अनुकूली लेआउट
हारून गुस्ताफसन द्वारा - [देखें ट्यूटोरियल]
CSS मीडिया प्रश्नों के साथ अनुकूली या लचीले लेआउट का उपयोग करना सीखें। अपने डिज़ाइन को डबल-कॉलम दृश्य या एकल-स्तंभ दृश्य के साथ-साथ iPhone और iPad के लिए डिज़ाइन तैयार करने के लिए सीखने के लिए व्यायाम का पालन करें.
उत्तरदायी छवियां: संदर्भ-जागरूक छवि आकार के साथ प्रयोग
स्कॉट जेहल द्वारा - [देखें ट्यूटोरियल]
यहाँ एक ट्यूटोरियल है जो बिल्ड-फ्रॉम मोबाइल-फर्स्ट एप्रोच का उपयोग करता है। यह तकनीक बड़ी स्क्रीन रिज़ॉल्यूशन, माइनस इमेज रिक्वेस्ट के साथ-साथ यूए सूँघने के लिए छवियों के लिए एक बड़े आकार को निर्दिष्ट करती है.
और करो
लोचदार वीडियो
निक ला के द्वारा - [देखें ट्यूटोरियल]
यह ट्यूटोरियल आपके ब्राउज़र विंडो के आकार बदलने के साथ वीडियो के स्केलिंग से संबंधित है। यह अनिवार्य रूप से एक सीएसएस चाल है और ट्यूटोरियल में काम पर चाल को देखने के लिए एक डेमो है.
छवियों के कुछ हिस्सों को छुपाना और प्रकट करना
ज़ो मिकले गिलेनवाटर द्वारा - [देखें ट्यूटोरियल]
ट्यूटोरियल वास्तव में लेखक की पुस्तक से लिया गया है, जो स्क्रीन रिज़ॉल्यूशन के आधार पर छवियों के कुछ हिस्सों को प्रकट करने या छिपाने का वर्णन करता है। यह आपको सिखाता है कि स्क्रीन के आकार में परिवर्तन होने पर आप छवियों को कैसे काटते हैं, सीमित स्थान होने पर आपको केवल पूर्ण छवि का हिस्सा दिखाते हैं.
CSS3 के साथ उत्तरदायी सामग्री नेविगेटर
मैरी लू द्वारा - [देखें ट्यूटोरियल]
उपयोगकर्ताओं को अपने पक्ष में नेविगेट करने के लिए एक कट्टर तरीका पसंद करते हैं? फिर, आपको इस ट्यूटोरियल के माध्यम से पढ़ना चाहिए कि कुछ शांत बदलावों में कैसे कोड करें: फीका, स्लाइड, घुमाव और स्केलिंग। संक्रमण अनिवार्य रूप से सामग्री परतें हैं जिन्हें विशिष्ट कोडिंग के साथ दिखाया या छिपाया गया था.
एक उत्तरदायी वेब डिज़ाइन टेम्पलेट बनाएँ
हैरी एटकिंस द्वारा - [देखें ट्यूटोरियल]
यह उत्तरदायी बनाने के लिए एक छोटा ट्यूटोरियल है वेब टेम्पलेट कि दोनों डेस्कटॉप पर और साथ ही iPhone पर काम करता है.
उत्तरदायी क्षैतिज लेआउट
मैरी लू द्वारा - [देखें ट्यूटोरियल]
यह ट्यूटोरियल आपको सिखाता है कि कई स्क्रॉल करने योग्य सामग्री पैनलों के साथ एक क्षैतिज लेआउट कैसे बनाया जाए। का उपयोग करते हुए प्रजाति की उत्पत्ति नमूना पाठ के रूप में, पुस्तक के प्रत्येक अध्याय को पूर्ण-ब्राउज़र मोड में एक-दूसरे के बगल में रखे गए स्तंभों में अलग किया जाता है, लेकिन जब यह काफी छोटा हो जाता है, तो लेआउट पूरी तरह से लंबवत स्क्रॉलिंग 'पुस्तक' में बदल जाता है.
छोटे स्क्रीन के लिए एक मेनू को ड्रॉप डाउन में बदलें
क्रिस कॉयर द्वारा - [देखें ट्यूटोरियल]
यह ट्यूटोरियल आपको दिखाएगा कि ब्राउज़र विंडो के संकीर्ण होने पर, या जब आप मोबाइल डिवाइस पर होते हैं, तो मेनू को ड्रॉप-डाउन सूची में कैसे परिवर्तित किया जाए। पृष्ठ के ऊपरी दाएं कोने में लिंक की पंक्ति नेविगेशन विकल्पों का त्याग किए बिना स्थान बचाने के लिए ड्रॉप-डाउन मेनू में परिवर्तित हो जाती है.
लचीला स्लाइड-टू-टॉप एकॉर्डियन
मैरी लू द्वारा - [देखें ट्यूटोरियल]
स्क्रीन आकार और रिज़ॉल्यूशन के आधार पर फीका-इन संक्रमण और समायोज्य चौड़ाई के साथ एक सरल और लचीला समझौते लेआउट बनाना सीखें.
CSS3 ओरिएंटेशन मीडिया क्वेरी का उपयोग कैसे करें
रयान सेड्डन द्वारा - [देखें ट्यूटोरियल]
सरल नियम के आधार पर जो पोर्ट्रेट (चौड़ाई से अधिक ऊंचाई) और लैंडस्केप (ऊंचाई से अधिक चौड़ाई) मोड को परिभाषित करता है, आप जिस मोड को देखते हैं उसके आधार पर विशिष्ट शैलियों को लक्षित करने के लिए एक मीडिया क्वेरी लिख सकते हैं। यह ट्यूटोरियल हमें दिखाएगा कि यह कैसे करना है और यह रंग बदलने वाले गिरगिट के लिंक के साथ पूरा होता है जो इस परिवर्तन को प्रदर्शित करने के लिए रंग का उपयोग करता है जैसा कि आप ब्राउज़र विंडो को सिकोड़ते हैं.
उत्तरदायी डेटा टेबल्स
क्रिस कॉयर द्वारा - [देखें ट्यूटोरियल]
जब छोटे पर्दे के आकार की बात आती है तो टेबल सिरदर्द का एक स्रोत होते हैं लेकिन इसका मतलब यह नहीं है कि हमें पूरी तरह से तालिकाओं से बचने की आवश्यकता है। जब आप मोबाइल स्क्रीन आकार पर स्विच करते हैं, तो अपने टेबल परिवर्तन स्वरूपों को बनाने के लिए मीडिया क्वेरी का उपयोग करना सीखें। इस ट्यूटोरियल के आधार पर आप जो जादू कर सकते हैं उसका अंदाजा लगाने के लिए डेमो देखें.
लंबन प्रभाव के साथ द्रव CSS3 स्लाइडशो
रिंग विंग द्वारा - [देखें ट्यूटोरियल]
CSS3 स्लाइड शो बनाएं जहां दो पृष्ठभूमि छवियों का उपयोग किया जाता है और जब पृष्ठभूमि की स्थिति बदल जाती है, तो एक लंबन प्रभाव दिखाई देता है। इसके अलावा, स्लाइड शो लचीला है, ब्राउज़र विंडो के रूप में खुद को आकार देता है.
कैसे एक उत्तरदायी थंबनेल गैलरी बनाने के लिए
यहोशू जॉनसन द्वारा - [देखें ट्यूटोरियल]
यह उन वेबसाइटों के लिए बहुत अच्छा है जो एक गैलरी में थंबनेल की सुविधा देते हैं। जैसे ही ब्राउज़र विंडो को आकार दिया जाता है, लेआउट को दो कॉलम (छोटे स्क्रीन आकार) और पांच (अधिकतम) कॉलम के बीच रखने के लिए बदल दिया जाता है। अधिक समान स्लाइडशो और स्लाइडर्स के लिए, हमारे शीर्ष 10 नि: शुल्क उत्तरदायी छवि गैलरी / स्लाइडशो लेख देखें.
मोबाइल उपकरणों के लिए अपने ईमेल का अनुकूलन
रोस हॉजिस द्वारा - [देखें ट्यूटोरियल]
यहां तक कि ईमेल को छोटे स्क्रीन दृश्य के लिए अनुकूलित किया जा सकता है, जैसे कि वेबसाइट कैसे हैं। अधिकांश समय HTML ईमेल में पाठ को एक बिंदु पर आकार दिया जाता है जो आरामदायक पढ़ने के लिए नहीं बनाया जाता है; इस ट्यूटोरियल से इसे और अधिक प्रबंधित करना सीखें.
चौखटे का उपयोग कर
कंकाल के साथ एक उत्तरदायी मोबाइल के अनुकूल वेबसाइट बनाएँ
यहोशू जॉनसन द्वारा - [देखें ट्यूटोरियल]
कंकाल इसके साथ उत्तरदायी वेबसाइटों का निर्माण करने के लिए एक भयानक रूपरेखा है। यह ट्यूटोरियल आपको एक कदम-दर-चरण गाइड में ले जाता है कि भयानक उत्तरदायी डिजाइन बनाने के लिए कंकाल ढांचे का उपयोग कैसे करें। आप यह देखकर दंग रह जाएंगे कि इसे लागू करना कितना आसान है.
HTML5 और कम फ्रेमवर्क 3 के साथ उत्तरदायी वेब डिज़ाइन
लुई सिमोनो द्वारा - [देखें ट्यूटोरियल]
यदि आपको ठीक से लोअर से परिचित नहीं कराया गया है, तो कम का स्वाद लेने के लिए पहले हमारे अपने कम सीएसएस ट्यूटोरियल की जांच करें। इस ट्यूटोरियल में, मीडिया के प्रश्नों के प्रभावों को स्पष्ट रूप से देखने के लिए कम रूपरेखा का उपयोग किया गया था.
निष्कर्ष
और जो हमारा निष्कर्ष निकालता है प्रतिक्रियात्मक वेब डिज़ाइन श्रृंखला। हमें उम्मीद है कि इस श्रृंखला में चित्रित किए गए विषयों, उपकरणों और अन्य संसाधनों ने हमारे पाठकों के लिए उत्तरदायी वेब डिज़ाइन की अवधारणा को उजागर करने में मदद की है। लेकिन अगर आप हमें नहीं बताएंगे तो हमें कैसे पता चलेगा?
हमें अपनी प्रतिक्रिया दें श्रृंखला पर और यदि आपके पास अधिक विचारों के सुझाव हैं, तो आप hongkiat.com पर देखना चाहते हैं। हमें एक पंक्ति, या नीचे एक टिप्पणी छोड़ दें.
