इलेक्ट्रॉनिक गैजेट्स द्वारा उपभोग किया जाने वाला इंटरनेट ट्रैफ़िक सचमुच हर दिन बढ़ रहा है। आधुनिक उपयोगकर्ताओं को उनके लिए सबसे सुविधाजनक इंटरफ़ेस वाले संसाधनों की आवश्यकता होती है। ठीक उसी तरह, अनुकूली लेआउट इस आवश्यकता को पूरा करना संभव बनाता है, क्योंकि यह आपको वेब पेजों को मोबाइल उपकरणों की विशेषताओं में स्वचालित रूप से बदलने की अनुमति देता है।
यह क्या है
रिस्पॉन्सिव लेआउट, जिसे मोबाइल-फ्रेंडली भी कहा जाता है, में वेब पेज विकसित करने के उद्देश्य से कुछ क्रियाएं करना शामिल है जो विभिन्न स्क्रीन रिज़ॉल्यूशन के अनुकूल हो सकते हैं।
कई साल पहले, क्षेत्र के लोगों को वेब पेजों के कई संस्करण बनाने पड़ते थे ताकि एक संसाधन विभिन्न विंडो विशेषताओं वाले 'ktrnhjyys[' गैजेट्स पर ठीक से प्रदर्शित हो सके। 2010 तक लेआउट डिजाइनरों ने इस तरह काम किया। फिर साइट को अनुकूल बनाने का विचार नाटकीय रूप से बदल गया। फिर, इस कार्य को करने के लिए, एक विशेष प्रोग्रामिंग भाषा का उपयोग किया गया - जावास्क्रिप्ट।
किसी वेबसाइट को सभी स्क्रीन पर उत्तरदायी कैसे बनाएंआज मोबाइल डिवाइस? अब लेआउट CCS3 तालिकाओं के साथ-साथ एक विशेष HTML5 भाषा का उपयोग करके किया जाता है।
आपको एक प्रतिक्रियाशील वेबसाइट की आवश्यकता क्यों है
- आप विभिन्न डिस्प्ले रिज़ॉल्यूशन वाले गैजेट्स का उपयोग करके वेब तक पहुंच सकते हैं। आज, लोग घरेलू जरूरतों के लिए और इंटरनेट का उपयोग करने के लिए कई अलग-अलग उपकरणों का उपयोग करते हैं। बेशक, एक ही साइट को उच्च गुणवत्ता के साथ प्रदर्शित किया जाना चाहिए और विभिन्न आयामों और स्क्रीन रिज़ॉल्यूशन वाले उपकरणों पर अच्छा दिखना चाहिए। किसी विशेष गैजेट के साथ काम करते समय उपयोगकर्ताओं को असहज महसूस नहीं करना चाहिए।
- इंटरनेट ट्रैफ़िक में वृद्धि, मोबाइल एप्लिकेशन और उपकरणों की लोकप्रियता। इलेक्ट्रॉनिक गैजेट्स की वर्तमान मांग जिसके साथ आप नेटवर्क में प्रवेश कर सकते हैं, काफी उचित है और शायद ही कोई हो जो इस तथ्य पर बहस करे। इस तरह की लोकप्रियता को आसानी से नज़रअंदाज़ नहीं किया जा सकता है, क्योंकि ये उपयोगकर्ता शायद आपके पूरे दर्शकों के शेर के हिस्से का प्रतिनिधित्व करते हैं। इसलिए, यदि आप अपने संसाधन पर आगंतुकों की संख्या समान रखना चाहते हैं या इसे बढ़ाना चाहते हैं, तो आपको उनकी जरूरतों और रुचियों पर पूरा ध्यान देना चाहिए। दूसरे शब्दों में, आपको वास्तव में अपनी साइट के अनुभव को यथासंभव सुविधाजनक बनाने के लिए अपना सर्वश्रेष्ठ प्रयास करने की आवश्यकता है, अन्यथा आपके ग्राहक आसानी से आपके प्रतिस्पर्धियों के पास जा सकते हैं।
आपातकालीन सूचना। यदि आपकी विशेषज्ञता समाचार और अन्य ब्रेकिंग जानकारी का प्रावधान है, तो निश्चित रूप से, उपयोगकर्ता को इसकी तत्काल आवश्यकता हो सकती है, औरहो सकता है कि उसके पास उस समय एक फोन के अलावा कुछ न हो। तो आपका काम यह सुनिश्चित करना है कि उसे आवश्यक जानकारी जल्द से जल्द मिल सके।
रिस्पॉन्सिव लेआउट और मोबाइल ऐप की तुलना
अपने संबंधित गैजेट के लिए मोबाइल संस्करण का उपयोग करने वाले सभी प्रकार के प्रोग्राम और साइट भी एक अच्छा कदम है, लेकिन उनके कई नुकसान हैं।
- एक मोबाइल एप्लिकेशन आवश्यक रूप से ऑपरेटिंग सिस्टम के प्रकार के अनुरूप होना चाहिए। और इसके लिए आपको ना सिर्फ समय बल्कि पैसा भी खर्च करना होगा।
- कार्यक्रम को डाउनलोड करने की आवश्यकता है। एप्लिकेशन का उपयोग करने के लिए, निश्चित रूप से, इसे इंस्टॉल किया जाना चाहिए। बेशक, उपयोगकर्ता ऐसा कर सकता है, लेकिन केवल इस शर्त पर कि उसे अक्सर इसकी आवश्यकता होती है। यदि उसे ऐसी कोई आवश्यकता नहीं है, तो सबसे अधिक संभावना है कि वह इस उपक्रम को मना कर देगा। परिणामस्वरूप, आप अपने दर्शकों का एक महत्वपूर्ण हिस्सा खो देंगे।
आपको ऐप्स क्यों छोड़नी चाहिए
- यातायात वितरण। एप्लिकेशन का उपयोग संसाधन की उपस्थिति के स्तर को नहीं दिखाता है। दूसरे शब्दों में, प्रोग्राम और साइट के ट्रैफ़िक को सारांशित नहीं किया जाता है, जिससे उस संकेतक में कमी आती है जिसमें आप रुचि रखते हैं।
- संसाधन सामग्री का एकीकरण। यदि आपने एक आवेदन प्राप्त कर लिया है, तो आपको सभी सामग्रियों को सिंक्रनाइज़ करने के लिए अतिरिक्त पैसा खर्च करना होगा, या साइट को भरना, सामग्री को कार्यक्रम में स्थानांतरित करना भी होगा। नतीजतन, आप फिर से अपना पैसा और समय खो देते हैं।
अनुकूली कैसे बनाएंवेबसाइट डिजाइन
पहला कदम सभी कार्यों को डिजाइन करना है। इस प्रक्रिया में, डिज़ाइनर को अपेक्षाकृत छोटे डिस्प्ले और केवल एक मेनू कॉलम का उपयोग करके सार और प्रमुख विचारों को कुशलता से व्यक्त करने की आवश्यकता होती है।
यदि आवश्यक हो, सूचना ब्लॉक कम हो जाते हैं, केवल सबसे महत्वपूर्ण तत्व रहते हैं। एक शुरुआती गाइड में आमतौर पर शामिल होते हैं:
- मोबाइल फर्स्ट - इलेक्ट्रॉनिक गैजेट्स के लिए डिजाइनिंग;
- लचीली छवियां - लचीली छवियों का उपयोग करें;
- ग्रिड-आधारित लेआउट - लचीले ग्रिड-आधारित लेआउट का उपयोग करें;
- मीडिया प्रश्न - मीडिया प्रश्नों को संसाधित करना।
वेबसाइट को रेस्पॉन्सिव कैसे बनाएं? ऐसा करने के लिए, आप कई प्रकार के लेआउट का उपयोग कर सकते हैं।
- रबर। इस प्रकार को लागू करना आसान है, यह शायद ही कभी शुरुआती लोगों के लिए भी कठिनाइयों का कारण बनता है। संसाधन के मुख्य ब्लॉक तब तक संकुचित होते हैं जब तक वे मोबाइल स्क्रीन के आकार में फिट नहीं हो जाते। यदि संपीड़न संभव नहीं है, तो उन्हें टेप के रूप में रखा जाता है।
- ब्लॉक ले जाएँ। यह तकनीक कई कॉलम वाले संसाधनों के लिए पूरी तरह से काम करती है। अतिरिक्त ब्लॉकों का स्थान स्क्रीन के आयामों के अनुसार बदलता रहता है। यदि डिस्प्ले सिकुड़ जाता है, तो साइडबार नीचे की ओर चले जाते हैं।
- स्विच लेआउट। यह एक समय लेने वाली तकनीक है, जिसमें प्रत्येक स्क्रीन रिज़ॉल्यूशन के लिए विशेष रूप से बनाए गए लेआउट का उपयोग करना शामिल है। यह विधि साइट के अध्ययन की बहुत सुविधा प्रदान करती है, लेकिन कार्य की जटिलता इसे लावारिस बनाती है।
- प्राथमिक लेआउट। कार्यप्रणाली, त्रुटिहीनसरल संसाधनों के लिए उपयुक्त। डिजाइनर केवल चित्रों और टाइपोग्राफी को मापता है। हालांकि लचीलेपन की कमी के कारण इस पद्धति को मांग में नहीं कहा जा सकता है।
- पैनल. यह तकनीक मोबाइल एप्लिकेशन से आती है, जिसमें एक सहायक मेनू डिस्प्ले के किसी भी स्थान पर दिखाई दे सकता है। अब यह तरीका भी बहुत लोकप्रिय नहीं है, क्योंकि साइट पर मोबाइल नेविगेशन हमेशा उपयोगकर्ताओं के लिए स्पष्ट नहीं होता है।
वर्णित लेआउट में से कोई भी सार्वभौमिक नहीं कहा जा सकता है। वेबसाइट को रेस्पॉन्सिव कैसे बनाएं? सबसे पहले, आपको परियोजना के आधार पर एक उपयुक्त लेआउट चुनने की आवश्यकता है। इसे संसाधन की क्षमताओं का पूरी तरह पालन करना चाहिए और सभी जरूरतों को पूरा करना चाहिए।
रिस्पॉन्सिव वेबसाइट लेआउट कैसे बनाएं
आज इसके लिए CSS3 और HTML5 का उपयोग किया जाता है। पहली तकनीक कैस्केडिंग टेबल की एक उन्नत पीढ़ी है। इसकी सहायता से नियम विकसित किए जाते हैं जिसके अनुसार साइट का विवरण उपयोगकर्ता के डिस्प्ले पर प्रदर्शित किया जाएगा।
CSS3 की मदद से आप कई पैरामीटर सेट कर सकते हैं: स्पेस का प्रतिशत और एक निश्चित रिज़ॉल्यूशन पर एलिमेंट के आयाम। इस तकनीक के साथ, डिजाइनर कुछ विशेषताओं से मेल खाने वाली विभिन्न कक्षाएं बना सकते हैं।
HTML5 का उपयोग कुछ विवरणों के स्थान को इंगित करने के लिए किया जाता है, दूसरे शब्दों में, पृष्ठ को चिह्नित करने के लिए। उत्पन्न CSS3 के वर्ग HTML टैग में निर्दिष्ट हैं ताकि उपयोग की जाने वाली वस्तुओं को संकल्प के आधार पर संशोधित किया जा सके।
तो, html के साथ एक रिस्पॉन्सिव वेबसाइट डिज़ाइन कैसे बनाएं? आपको एक साधारण चित्र विकसित करके प्रारंभ करने की आवश्यकता है जोफिर खिंचाव।
यह एक इमेज प्रोसेसिंग शेल बनाता है।
सीएसएस के साथ वेबसाइट को रिस्पॉन्सिव कैसे बनाएं? निम्नलिखित पैरामीटर सेट करें:
दिव {
चौड़ाई: 100%;
}
दिव img {
चौड़ाई: 100%;
ऊंचाई: ऑटो;
}
फिर, डिव की चौड़ाई से, इमेज की चौड़ाई img सेट करें।
तो आपको एक ऐसी छवि मिलती है जो किसी भी रिज़ॉल्यूशन पर संपूर्ण प्रदर्शन स्थान पर कब्जा कर लेती है।
व्यक्तिगत वस्तुओं को अनुकूलित करें
साइट हेडर। हेडर में कई एलिमेंट रखें:
लोगो -
मेनू बटन छुपाएं -
मेन मेन्यू -
साइट खोज -
- पाठ्य सामग्री के साथ ब्लॉक करें। लेख को लपेटने के लिए तत्व का प्रयोग करें।
- साइड कॉलम। श्रेणी सूची का पता लगाने के लिए उपयोग करें, मेलिंग सूची और नवीनतम पोस्ट पर क्लिक करें।
- वेबसाइट के लिए एडेप्टिव मेन्यू कैसे बनाएं? मार्कअप में एक तत्व जोड़ें। यह कोड सामग्री को आवश्यक आयामों में फ़िट करते हुए, मेनू की ऊंचाई को बदलता है।
मिनी-गैलरी बनाना
एक प्रतिक्रियाशील html और css वेबसाइट बनाने का तरीका जानने के बाद, आप अपने संसाधन को किसी भी गैजेट के लिए उपयुक्त उपयोगी और दिलचस्प सामग्री से भर सकते हैं, उदाहरण के लिए, एक मिनी-गैलरी।
एचटीएमएल में कई चित्र जोड़ने के लिए, निम्नलिखित तत्वों का उपयोग करें:
और प्रत्येक छवि के लिए विभिन्न प्रस्तावों के साथ बातचीत करने और उसका आकार बदलने के लिए, CSS3 का उपयोग करें:
div.image_gallery {
मार्जिन: 0 ऑटो;
चौड़ाई: 1000px;
न्यूनतम-चौड़ाई: 500पीएक्स;
}
आईएमजी {
अधिकतम-चौड़ाई: 48%;
पैडिंग: 1%; / छवियों के लिए मामूली पैडिंग /
}
बस, आपकी मिनी गैलरी बनकर तैयार है। अब आप जानते हैं कि अपनी वेबसाइट को विभिन्न उपकरणों के लिए उत्तरदायी कैसे बनाया जाए।
काम की गुणवत्ता की जांच कैसे करें
- गूगल क्रोम। ब्राउजर में एक बार F12 दबाएं। उसके बाद, एक पैनल खुलेगा - उस गैजेट के आइकन पर क्लिक करें जिसमें आप रुचि रखते हैं, उदाहरण के लिए, एक टैबलेट या स्मार्टफोन। और अगले मेनू से, आवश्यक संकल्प का चयन करें।
- डिवाइसेपोंसिव। एक प्रोग्राम जिसके साथ आप एक आईफ्रेम के माध्यम से साइट लोड करके अनुकूली लेआउट की जांच कर सकते हैं। वहां आपको विभिन्न रिज़ॉल्यूशन वाले उपकरणों की एक सूची दिखाई देगी।
- उत्तरदायी डिजाइन.इस. यह मनोरंजन का साधन है। सबसे पहले, साइट को IFrame विंडो में लोड किया जाता है, और फिर Apple स्क्रीन पर स्थानांतरित किया जाता है। इससे डिस्प्ले के स्क्रीनशॉट लेना बहुत सुविधाजनक हो जाता है।
