प्रतिसाद डिझाइन म्हणजे काय? (स्पष्टीकरणकर्ता व्हिडिओ आणि इन्फोग्राफिक)
त्याला एक दशक लागला आहे प्रतिसाद वेब डिझाइन (आरडब्ल्यूडी) पासून मुख्य प्रवाहात जाण्यासाठी प्रथम कॅमेरून अॅडम्सची ओळख झाली 2010 मधील संकल्पना. ही कल्पना कल्पक होती – आम्ही ती पाहत असलेल्या उपकरणाच्या व्ह्यूपोर्टशी जुळवून घेणार्या साइट्स का डिझाइन करू शकत नाही?
प्रतिसाद डिझाइन म्हणजे काय?
रिस्पॉन्सिव्ह वेब डिझाईन हा एक डिझाईन दृष्टीकोन आहे जो स्क्रीन आकार किंवा रिझोल्यूशनची पर्वा न करता वेबसाइट कोणत्याही डिव्हाइसवर पाहण्याचा इष्टतम अनुभव प्रदान करतो याची खात्री करतो. यामध्ये लवचिक मांडणी, ग्रिड-आधारित लेआउट आणि मीडिया क्वेरी वापरून साइट तयार केली जाते जी ती पाहत असलेल्या स्क्रीनच्या आकाराशी जुळवून घेते. याचा अर्थ असा की रिस्पॉन्सिव्ह वेब डिझाइनसह डिझाइन केलेली वेबसाइट डेस्कटॉप संगणक, टॅबलेट किंवा स्मार्टफोनवर चांगली दिसेल आणि कार्य करेल.
दुसऱ्या शब्दांत, प्रतिमांसारखे घटक तसेच त्या घटकांचे लेआउट समायोजित केले जाऊ शकतात. प्रतिसाद देणारे डिझाइन काय आहे तसेच तुमची कंपनी ते का अंमलात आणते हे स्पष्ट करणारा व्हिडिओ येथे आहे. तुम्हाला नवीन साइट डिझाइन किंवा वेब अॅप्लिकेशन विकसित होत असल्यास, प्रतिसाद देणारे वेब डिझाइन आवश्यक आहे, पर्याय नाही, कारण अर्ध्याहून अधिक वेब ट्रॅफिक मोबाइल डिव्हाइसेसवरून येते ज्यांच्या व्ह्यूपोर्टची रुंदी आणि उंची भिन्न असते.
रिस्पॉन्सिव्ह डिझाइन वेब डिझायनर्ससाठी देखील इष्टतम आहे, ज्यांना डिव्हाइस किंवा व्ह्यूपोर्टवर आधारित स्वतंत्र अनुभव तयार करण्याची गरज नाही. प्रतिसाद वेब डिझाइन वापरून पूर्ण केले जाऊ शकते CSS.
प्रतिसादात्मक डिझाइन CSS व्ह्यूपोर्ट क्वेरी
मीडिया क्वेरी वापरून व्ह्यूपोर्टवर आधारित फॉन्ट आकार समायोजित करणार्या स्टाइलशीटचे येथे एक उदाहरण आहे:
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
ब्राउझर त्यांच्या आकाराबद्दल स्वत: जागरूक असतात आणि ते स्टाईलशीट वरपासून खालपर्यंत लोड करतात. स्क्रीनच्या आकारासाठी लागू शैलींची क्वेरी करून, तुम्ही प्रत्येक किमान आणि कमाल डिव्हाइस रुंदीसाठी विशिष्ट शैली घटक सेट करू शकता. याचा अर्थ असा नाही की तुम्हाला प्रत्येक आकाराच्या स्क्रीनसाठी वेगवेगळ्या साइट्स डिझाइन कराव्या लागतील, तुम्हाला फक्त मीडिया क्वेरी वापरून आवश्यक घटक बदलण्याची आवश्यकता आहे.
मोबाइल-प्रथम मानसिकतेसह कार्य करणे हे आजचे आधारभूत प्रमाण आहे. बेस्ट-इन-क्लास ब्रँड केवळ त्यांची साइट मोबाइल-अनुकूल आहेत की नाही तर संपूर्ण ग्राहकांच्या अनुभवाबद्दल विचार करीत आहेत.
लुसिंडा डन्काल्फे, आर्थिक सीईओ
येथून इन्फोग्राफिक आहे नाणे एकाधिक उपकरणांसाठी एक प्रतिसादात्मक डिझाइन तयार करण्याचे संभाव्य फायदे स्पष्ट करणे:
तुमची साइट प्रतिसादात्मक आहे का?
तुमची साइट प्रतिसाद देणारी आहे की नाही हे पाहण्याचा एक सोपा मार्ग म्हणजे ब्राउझरच्या रुंदीवर आधारित घटक हलतात की नाही हे पाहण्यासाठी तुमची ब्राउझर विंडो वाढवणे किंवा लहान करणे.
अधिक अचूकतेसाठी, आपले निर्देश करा Google Chrome आपल्या साइटवर ब्राउझर. निवडा पहा> विकसक> विकसक साधने मेनूमधून. हे पॅनेल किंवा नवीन विंडोमध्ये साधनांचा समूह लोड करेल. डेव्हलपर टूल्स मेनू बारच्या डावीकडील लहान चिन्हावर क्लिक करा जे मोबाइल आणि टॅबलेट चिन्हासारखे दिसते. तुम्ही काही मानक उपकरणे निवडू शकता आणि तुम्हाला पृष्ठ क्षैतिज किंवा अनुलंबपणे पहायचे आहे की नाही हे देखील बदलू शकता.
आपण लँडस्केप वरून पोर्ट्रेटमध्ये दृश्य बदलण्यासाठी शीर्षस्थानी नॅव्हिगेशन पर्याय वापरू शकता किंवा कितीही प्रीप्रोग्राम व्ह्यूपोर्ट आकार निवडू शकता. आपणास हे पृष्ठ रीलोड करावे लागेल, परंतु आपल्या प्रतिसाद सेटिंग्जचे सत्यापन करण्यासाठी आणि आपली साइट सर्व डिव्हाइसवर छान दिसते हे सुनिश्चित करण्यासाठी हे जगातील सर्वात छान साधन आहे!