रिस्पॉन्सिव्ह विरुद्ध अनुकूली डिझाइन: वापरकर्त्यासाठी कोणते चांगले आहे? अनुकूली आणि प्रतिसाद वेब डिझाइन

प्रत्येकजण प्रतिसाद वेब डिझाइनबद्दल बोलत आहे. पण याचा अर्थ प्रत्येकाला ते कशासाठी आहे हे समजते का?

रिस्पॉन्सिव्ह डिझाईन हे केवळ मोबाईल डिव्हाइसेससाठी वेबसाइट विकसित करण्याबद्दल नाही, तर ते वेगवेगळ्या स्क्रीन आकारांमध्ये (व्ह्यूपोर्ट) लेआउट्सचे रुपांतर करण्याबद्दल आहे.

या ट्यूटोरियलमध्ये, हे तंत्र अधिक चांगल्या प्रकारे समजून घेण्यासाठी आपण रिस्पॉन्सिव्ह वेब डिझाइनमागील मूलभूत तत्त्वे पाहू. पुढे, आम्ही एक प्रतिसाद देणारी वेबसाइट तयार करू जी मोठ्या आणि लहान स्क्रीनवर उत्तम प्रकारे मोजेल. आयफोन, आयपॅड, ब्लॅकबेरी आणि इतर इंटरनेट-सक्षम स्मार्टफोन आणि टॅब्लेट यांसारखी मोबाइल डिव्हाइस वापरणाऱ्या अधिकाधिक लोकांमध्ये रिस्पॉन्सिव्ह वेब डिझाइन खूप लोकप्रिय झाले आहे.

हे समजून घेणे महत्त्वाचे आहे की साइट विशिष्ट डेस्कटॉप किंवा मोबाइल डिव्हाइससाठी तयार केली जाऊ नये. विविध आकारांशी जुळवून घेण्याची लेआउटची क्षमता येथे महत्त्वाची आहे.

वापरकर्ता निराशा

काही लोकांना असे वाटते की वापरकर्त्यासाठी कार्यक्षमता कमी करणे आणि त्यांना महत्वाची नसलेली सामग्री काढून टाकणे सामान्य आहे. परंतु तुम्ही कट केलेली किंवा दुय्यम पृष्ठावर हलवलेली माहिती माझ्यासाठी सर्वात महत्त्वाची सामग्री नाही याची खात्री कशी बाळगता येईल?!

प्रथम, तुम्हाला हे समजून घेणे आवश्यक आहे की प्रतिसादात्मक डिझाइन केवळ मोबाइल डिझाइनसाठी नाही. दुसरे म्हणजे, एक चांगला प्रतिसाद देणारी वेबसाइट विकसित करण्यासाठी केवळ मीडिया प्रश्नांची मदतच नाही तर खूप वेळ आणि मेहनत आवश्यक आहे. वेब डिव्हाइसेसच्या मोठ्या आणि वाढत्या संख्येसह, आपल्या वेबसाइटला वापरकर्ता अनुभव प्रभावीपणे सुलभ करण्याची संधी देणे खूप महत्वाचे आहे.

प्रतिसाद देणाऱ्या वेबसाइटसाठी, आम्ही डेस्कटॉप आणि मोबाइल दोन्हीसाठी समान कोड वापरू शकतो. हे सोयीस्कर आहे कारण आम्हाला प्रत्येक डिव्हाइससाठी सामग्री स्वतंत्रपणे समायोजित करण्याची आवश्यकता नाही. परंतु अनेक वेबसाइट मोबाईल वापरकर्त्यांसाठी अनावश्यक समजत त्यांची सामग्री लपवतात. यामध्ये दोन समस्या आहेत:

• प्रथम, ते साइट ब्राउझ करणाऱ्या मोबाइल वापरकर्त्यांना प्रभावीपणे दंड करते.
• दुसरे म्हणजे, CSS मधील लपलेल्या शैलींचा अर्थ असा नाही की सामग्री लोड होत नाही. याचा कार्यक्षमतेवर मोठा परिणाम होऊ शकतो, विशेषत: खराब कनेक्टिव्हिटी असलेल्यांसाठी.

म्हणून, वेबसाइट डिझाइन करण्याचा सर्वोत्तम दृष्टीकोन म्हणजे प्रथम मोबाइल किंवा लहान उपकरणांच्या डिझाइनचा विचार करणे. अशा प्रकारे, आपण आपल्या वेबसाइटवर वितरित करण्यासाठी आवश्यक असलेल्या सर्वात महत्वाच्या माहितीवर लक्ष केंद्रित करू शकता. आणि मग, आवश्यक असल्यास, तुम्ही सशर्त लोडिंग पद्धती वापरू शकता, जेथे तुमचे लेआउट ग्रिड, मोठ्या प्रतिमा आणि मीडिया क्वेरी विद्यमान लहान-स्क्रीन डिझाइनच्या शीर्षस्थानी स्तरित आहेत.

चरण-दर-चरण मार्गदर्शक

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

रिस्पॉन्सिव्ह डिझाईनमधील लवचिकतेचा मुख्य घटक म्हणजे फ्लुइड लेआउट रुंदी. तुम्हाला फक्त रॅपर, सामग्री आणि स्तंभ रुंदी तयार करायची आहे जी वेगवेगळ्या डिव्हाइसच्या रुंदीशी जुळवून घेतील. हे काही नवीन नाही, परंतु हे आता पूर्वीपेक्षा अधिक महत्त्वाचे आहे. गोष्टी सोप्या ठेवण्यासाठी, आम्ही नेव्हिगेशन, एक मुख्य प्रतिमा आणि दोन स्तंभ असलेल्या फ्लुइड पृष्ठ तयार करू जे विविध आकारांच्या डिव्हाइसेसवर स्थापन विचारात घेतील. आम्ही प्रतिसाद.min.js देखील समाविष्ट केले आहे, जे मीडिया क्वेरींना IE6-8 मध्ये कार्य करण्यास अनुमती देते.

मूलभूत HTML रचना:

प्रतिसाद साइट डेमो

• सामग्रीवर स्क्रोल करा

लोगो

• घर
• खरेदी करा
• सेवा
• संपर्क

कथा

मर्सिडीज एसएल मॉडेलचा इतिहास 1954 पर्यंत परत जातो - तेव्हाच जर्मन लोकांनी न्यूयॉर्क ऑटो शोमध्ये दोन-दरवाज्यांची मर्सिडीज 190 एसएल सादर केली. त्यावेळच्या मोटार शोला आलेल्या अभ्यागतांमध्ये सौंदर्याचा धक्का किती असेल याची तुम्ही कल्पना करू शकता. मनमोहक सौंदर्याच्या शरीराखाली मर्सिडीज W120 पोंटन सेडान आणि स्टील मोनोकोकचा एक छोटा प्लॅटफॉर्म होता. निलंबन पूर्णपणे स्वतंत्र होते - समोर दुहेरी विशबोन आणि मागील बाजूस स्विंग एक्सल शाफ्टसह. लांबी - 4290 मिमी, एक्सलमधील अंतर - 2400 मिमी.

जेव्हा CSS चा विचार केला जातो तेव्हा कमाल-रुंदी सेट करणे ही एक चांगली कल्पना आहे ती साइटला मोठ्या स्क्रीनवर स्केलिंग करण्यापासून थांबवेल, परंतु ते पृष्ठे कमी होण्यापासून थांबवणार नाही. निश्चित रुंदीवरून द्रवपदार्थावर स्विच करताना मुख्य समस्यांपैकी एक म्हणजे प्रतिमा. CSS मध्ये, या समस्येवर एक सोपा उपाय आहे. फक्त प्रतिमेची रुंदी १००% वर सेट करा. लहान स्क्रीनवर Opera आणि Safari मधील स्क्वॅश प्रतिमा टाळण्यासाठी प्रतिमांच्या उंचीसाठी स्वयं देखील जोडूया:

/* लेआउट */ #wrapper (रुंदी: 96%; कमाल-रुंदी: 920px; समास: स्वयं; पॅडिंग: 2%; ) #मुख्य (रुंदी: 60%; समास-उजवीकडे: 5%; फ्लोट: डावीकडे; ) (रुंदी: 35%; फ्लोट: उजवीकडे; ) /* लोगो H1 */ शीर्षलेख h1 (उंची: 98px; रुंदी: 216px; फ्लोट: डावीकडे; प्रदर्शन: ब्लॉक; पार्श्वभूमी: url(images/sllogo.png) 0 0 नाही- पुनरावृत्ती; टेक्स्ट-इंडेंट: -9999px; ) /* नेव्हिगेशन */ हेडर nav (float: right; margin-top: 40px; ) हेडर nav li (डिस्प्ले: इनलाइन; समास-डावी: 15px; ) हेडर nav ul li a ( मजकूर-सजावट:कोणताही नाही; रंग:#333;) #skipTo (प्रदर्शन: काहीही नाही;) #skipTo li (पार्श्वभूमी: #ccc; ) /* मुख्य प्रतिमा*/ # बॅनर ( फ्लोट: डावीकडे; समास-तळा: 15px; रुंदी : 100%; ) #banner img (रुंदी: 100%; उंची: स्वयं; )

तुमची प्रतिमा तिच्या मूळ घटकावर पूर्ण रुंदीवर दिसेल आणि त्यासोबत लहान होईल. फक्त याची खात्री करा की प्रतिमा कमाल-रुंदी त्याच्या कंटेनरच्या कमाल रुंदीपेक्षा जास्त नाही.

मोठ्या प्रतिमा वापरल्याने लोड होण्याच्या वेळेवर परिणाम होऊ शकतो. त्यामुळे लहान स्क्रीनसाठी, एक प्रतिसादात्मक प्रतिमा पद्धत आहे जी वापरकर्त्याच्या स्क्रीनचा आकार शोधते आणि आवश्यकतेनुसार लहान/मोठी प्रतिमा तयार करते. ही पद्धत अद्याप आदर्श म्हणणे कठीण आहे, परंतु तरीही ते विचारात घेण्यासारखे आहे.

मुख्य नेव्हिगेशन स्विच करा

तुम्हाला तुमचे नेव्हिगेशन का बदलण्याची गरज आहे याचे मुख्य कारण म्हणजे होणारे कमीत कमी करणे, ज्यामुळे बटणे वाचता येत नाहीत आणि क्लिक करणे कठीण होऊ शकते. या पद्धतीचा वापर केल्यास वापरकर्त्याचे जीवन सोपे होईल. तुम्हाला कोडमध्ये हे देखील लक्षात येईल की आम्ही #मुख्य आणि बाजूला असलेल्या विभागांमध्ये बदल एका स्तंभात एकत्र करण्यासाठी केले आहेत.

/* मीडिया क्वेरी */ @media स्क्रीन आणि (कमाल-रुंदी: 480px) ( #skipTo (डिस्प्ले: ब्लॉक; ) हेडर nav, #main, बाजूला (float: left; clear: left; margin: 0 0 10px; रुंदी : १००%;

तुमच्या लक्षात येईल की काही मोबाईल डिव्हाइसेसवर, तुमची वेबसाइट स्क्रीनवर बसण्यासाठी आपोआप संकुचित होईल. जेव्हा आम्हाला गैरसोयीच्या सामग्रीमधून नेव्हिगेट करण्यासाठी स्क्रीनचा आकार वाढवावा लागतो तेव्हा हा मुद्दा समस्या बनतो.

मीडिया क्वेरी पूर्ण प्रभावात येण्यासाठी, सामान्य मोबाइल-ऑप्टिमाइझ केलेल्या, प्रतिसाद देणाऱ्या साइटमध्ये खालील गोष्टींचा समावेश असावा:

रुंदी गुणधर्म व्ह्यूपोर्टच्या आकारासाठी जबाबदार आहे. हे पिक्सेलच्या विशिष्ट संख्येवर, रुंदी=960 किंवा डिव्हाइस-रुंदी मूल्यावर सेट केले जाऊ शकते, जी स्क्रीनची रुंदी पिक्सेलमध्ये 100% स्केलवर आहे. जेव्हा पृष्ठ प्रथम लोड केले जाते तेव्हा प्रारंभिक-स्केल गुणधर्म स्केल नियंत्रित करते. कमाल-प्रमाण, किमान-प्रमाण आणि वापरकर्ता-स्केलेबल गुणधर्म हे नियंत्रित करतात की वापरकर्ते पृष्ठ कसे स्केल करू शकतात (मोठे/लहान).

इंटरनेट वापरकर्ते भिन्न स्क्रीन आकारांसह भिन्न उपकरणांवर वेबसाइट ब्राउझ करतात. स्क्रीनचे आकार सतत बदलत असतात, त्यामुळे साइट त्यांच्यापैकी कोणत्याहीशी जुळवून घेते हे महत्त्वाचे आहे. वेबसाइट तयार करण्यासाठी दोन मुख्य पध्दती आहेत ज्या सहजपणे वेगवेगळ्या प्रकारच्या डिव्हाइसेसशी जुळवून घेतात:

रिस्पॉन्सिव्ह डिझाईन (RWD) - रिस्पॉन्सिव्ह डिझाईन - विशिष्ट प्रॉपर्टी व्हॅल्यूजसह साइट डिझाइन करणे, उदाहरणार्थ, लवचिक लेआउट ग्रिड, जे एका लेआउटला वेगवेगळ्या डिव्हाइसेसवर कार्य करण्यास अनुमती देते;

अडॅप्टिव्ह डिझाइन (AWD) - अनुकूली डिझाइन किंवा डायनॅमिक डिस्प्ले - अनेक निश्चित-रुंदीच्या मांडणीवर आधारित, डिव्हाइसवर अवलंबून बदलणाऱ्या परिस्थितीसह साइट डिझाइन करणे.

1. प्रतिसादात्मक डिझाइन तंत्र

रिस्पॉन्सिव्ह वेब डिझाईनमागील तत्त्वज्ञान हे आहे की स्क्रीनच्या आकाराची पर्वा न करता साइट कोणत्याही डिव्हाइसवर पाहणे सोपे आहे. रिस्पॉन्सिव्ह डिझाईन हा वाक्यांश 2011 मध्ये इथन मार्कोट यांनी तयार केला होता. रिस्पॉन्सिव्ह वेब डिझाईनचे मुख्य वैशिष्ट्य म्हणजे फ्लुइड ग्रिडमुळे, लेआउट स्क्रीनच्या आकारातील बदलांना, फुग्याप्रमाणे फुगवणे किंवा संकुचित होण्यास आपोआप प्रतिसाद देते.

रिस्पॉन्सिव्ह वेब डिझाईन तीन तंत्रे एकत्र करते - लवचिक ग्रिड-आधारित लेआउट, लवचिक प्रतिमा आणि मीडिया क्वेरी.

लेआउट लवचिकता निश्चित पिक्सेल मूल्यांऐवजी मोजमापाच्या सापेक्ष युनिट्सच्या वापरावर आधारित आहे, उपलब्ध जागेसाठी रुंदी समायोजित करण्यास अनुमती देते.

मजकूर सामग्रीची लवचिकता ब्राउझरच्या 16px च्या डीफॉल्ट फॉन्ट आकाराच्या सापेक्ष फॉन्ट आकारांची गणना करून प्राप्त केली जाते, उदाहरणार्थ फॉन्ट-आकाराच्या निश्चित आकारासाठी: 42px सापेक्ष आकार 42px / 16px = 2.625em आहे.

साइटवरील सर्व प्रतिमांसाठी img (रुंदी: 100%; कमाल-रुंदी: 100%;) नियम वापरून लवचिक प्रतिमांची समस्या सोडवली जाते. हा नियम सुनिश्चित करतो की प्रतिमा त्यांच्या कंटेनरपेक्षा कधीही रुंद नसतात आणि मोठ्या स्क्रीनवर त्यांचा खरा आकार कधीही ओलांडू नये.

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

तांदूळ. 1. प्रतिसादात्मक डिझाइन अतिरिक्त प्रतिसादात्मक डिझाइन तंत्र

स्केलेबल वेक्टर ग्राफिक्स - SVG प्रतिमा वापरा ज्या गुणवत्ता न गमावता कोणत्याही आकारात स्केल करतात आणि रेटिना डिस्प्लेवर छान दिसतात.

कार्ड इंटरफेस - तथाकथित कार्ड इंटरफेस वापरा - गोलाकार कोपऱ्यांसह आयताकृती आकार जे सामग्रीसाठी कंटेनर दर्शवतात. असे ब्लॉक्स स्वयंपूर्ण इंटरफेस युनिट्स आहेत आणि लेआउटभोवती फिरणे सोपे आहे.

तांदूळ. 2. Pinterest, कार्ड-आधारित लेआउट

केवळ आवश्यक गोष्टी ठेवणे हे एक चांगले तंत्र आहे, विशेषत: प्रतिसादात्मक डिझाइनसाठी. प्रतिसाद देणारे आणि अनुकूल मिनिमलिस्ट इंटरफेस तयार करा जे आजकाल अधिकाधिक लोकप्रिय होत आहेत.

तांदूळ. 3. हॉटेल लूक, वेब डिझाइनमध्ये मिनिमलिझम

योग्यरित्या सामग्रीला प्राधान्य द्या आणि लपवा - छुपी नियंत्रणे वापरा, विशेषत: लहान स्क्रीन असलेल्या डिव्हाइससाठी. पॉप-अप विंडो, टॅब, ऑफ-कॅनव्हास मेनू आणि इतर तत्सम तंत्रे पृष्ठावरील घटकांची संख्या कमी करण्यात मदत करतील. अनावश्यक घटकांपासून जागा मोकळी करून, तुम्ही इंटरफेस सोयीस्कर आणि वापरकर्ता-अनुकूल बनवाल.

तुमच्या बटणांसाठी एक मोठी क्लिक करण्यायोग्य जागा तयार करा - बटणाचे क्लिक करण्यायोग्य क्षेत्र जितके मोठे असेल तितके वापरकर्त्यासाठी त्याच्याशी संवाद साधणे सोपे होईल.

तुमच्या इंटरफेसमध्ये परस्पर क्रियाशीलता जोडा - वापरकर्त्याच्या कृतीच्या प्रतिसादात, प्रतिसाद क्रिया तयार करा - एक ॲनिमेशन जे डेस्कटॉप डिव्हाइसवर एखाद्या घटकावर फिरत असताना आणि मोबाइल डिव्हाइसवर एखाद्या घटकाला स्पर्श करताना कार्य करेल.

2. व्ह्यूपोर्ट मेटा टॅग वापरून व्ह्यूपोर्ट सानुकूल करणे

Android आणि iOS ऑपरेटिंग सिस्टीमसाठी मोबाइल ब्राउझरला साइट पृष्ठांचे स्वयंचलितपणे आकार बदलण्यापासून रोखण्यासाठी, name="viewport" विशेषतासह एक विशेष टॅग वापरला जातो. हा टॅग तुम्हाला रुंदी आणि प्रारंभिक-स्केल पॅरामीटर्ससाठी विशिष्ट मूल्य सेट करण्याची परवानगी देतो:

- आरंभिक-स्केल=1 म्हणजे ब्राउझरमधील पृष्ठाचा आकार व्ह्यूपोर्ट आकाराच्या 100% इतका असेल. म्हणजेच, फिजिकल पिक्सेल आणि सीएसएस पिक्सेलमधील गुणोत्तर 1:1 असेल;

— width=device-width म्हणजे पृष्ठाची रुंदी कोणत्याही ब्राउझरच्या विंडोच्या रुंदीच्या १००% इतकी असेल. म्हणजेच, साइट पृष्ठाची रुंदी डिव्हाइसच्या रुंदीशी संबंधित आहे, म्हणून ते मोजण्याची आवश्यकता नाही.

या उदाहरणात, ब्राउझर विंडोमधील सामग्री त्याच्या भौतिक आकाराच्या तुलनेत 2 पट मोठी असेल.

वापरकर्ते पृष्ठाची रुंदी किती वाढवू किंवा कमी करू शकतात हे नियंत्रित करण्यासाठी देखील टॅगचा वापर केला जाऊ शकतो:

हा कोड तुम्हाला पृष्ठाची रुंदी डिव्हाइस स्क्रीनच्या रुंदीच्या 3 पटीने वाढवण्याची आणि डिव्हाइस स्क्रीनच्या रुंदीच्या अर्ध्यापर्यंत कमी करण्याची अनुमती देईल.

तुम्ही वापरकर्त्यांना वापरकर्ता-स्केलेबल विशेषता वापरून स्केल करण्याची क्षमता नाकारू शकता:

3. सार्वत्रिक टेम्पलेट्स

प्रतिसाद देणारे वेब डिझाइन तयार करण्यासाठी वापरलेले बहुतेक लेआउट ल्यूक रॉब्लेव्स्कीने परिभाषित केलेल्या पाच पॅटर्न श्रेणींपैकी एकात येतात:
बहुतेक द्रव (बहुतेक रबरी),
स्तंभ ड्रॉप (एकमेकांच्या खाली स्तंभ),
लेआउट शिफ्टर (लेआउट हलवणे),
लहान बदल (लहान बदल),
कॅनव्हास बंद.
काही प्रकरणांमध्ये, एखादे पृष्ठ टेम्पलेट्सचे संयोजन वापरू शकते, जसे की कॉलम ड्रॉप आणि ऑफ कॅनव्हास.

३.१. बहुतेक द्रव

एक लोकप्रिय मांडणी ज्यामध्ये प्रामुख्याने रबर जाळी असते. मोठ्या किंवा मध्यम-रुंदीच्या स्क्रीनवर, त्याचा आकार सामान्यतः अपरिवर्तित राहतो, फक्त मार्जिन समायोजित केले जातात; लहान स्क्रीनवर, रबर ग्रिडमुळे मुख्य सामग्रीसाठी लेआउटची पुनर्गणना केली जाते आणि स्तंभ एकमेकांच्या खाली ठेवले जातात. टेम्पलेटचा फायदा असा आहे की त्याला लहान स्क्रीन आणि मोठ्या स्क्रीन दरम्यान फक्त एक नियंत्रण बिंदू आवश्यक आहे.

३.२. स्तंभ ड्रॉप

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

३.३. लेआउट शिफ्टर

सर्वात प्रतिसाद देणारा टेम्पलेट, कारण ते वेगवेगळ्या रुंदीच्या स्क्रीनसाठी एकाधिक नियंत्रण बिंदू प्रदान करते. या लेआउटमधील मुख्य फरक असा आहे की रेंडर ट्रीची पुनर्गणना करण्याऐवजी आणि एकमेकांच्या खाली स्तंभ ठेवण्याऐवजी, सामग्री हलविली जाते. मुख्य नियंत्रण बिंदूंमधील महत्त्वपूर्ण फरकांमुळे, या लेआउटची देखभाल करणे अधिक आव्हानात्मक आहे आणि तुम्हाला केवळ सामग्रीचा संपूर्ण लेआउटच नाही तर त्यातील घटक देखील बदलावे लागतील.

३.४. लहान चिमटा

टेम्पलेट लेआउटमध्ये लहान बदल करते, जसे की फॉन्ट आकार समायोजित करणे, प्रतिमांचा आकार बदलणे किंवा सामग्री हलवणे. हे एकल-स्तंभ लेआउटवर चांगले कार्य करते, जसे की एकल-पृष्ठ साइट आणि भरपूर मजकूर असलेले लेख.

३.५. कॅनव्हास बंद

नेव्हिगेशन घटक किंवा ऍप्लिकेशन मेनू यासारखी क्वचितच वापरली जाणारी सामग्री, ऑफ-स्क्रीन ठेवली जाते आणि स्क्रीन आकार अनुमती देते तेव्हाच दर्शविली जाते. छोट्या स्क्रीनवर, सामग्री एका क्लिकने उघडते.

4. प्रतिसादात्मक डिझाइन

रिस्पॉन्सिव्ह डिझाइनच्या विपरीत, अडॅप्टिव्ह वेब डिझाईन डिव्हाइस आकारांवर लक्ष केंद्रित करते. हे नियंत्रण (ब्रेकिंग) बिंदूंवर आधारित विविध प्रकारच्या उपकरणांसाठी (मोबाइल डिव्हाइसेस, टॅब्लेट, डेस्कटॉप संगणक) अनेक स्थिर मांडणी वापरते. म्हणजेच, लेआउट विशिष्ट डिव्हाइस ब्राउझर विंडो आकारांवर लोड होतात आणि लेआउटमधील संक्रमणे सहजतेने न होता अचानक होतात.

सामान्यतः, प्रतिसादात्मक लेआउटमध्ये स्क्रीनच्या रुंदीनुसार सहा लेआउट पर्याय असतात:
320
480
760
960
1200
1600.

प्रतिसादात्मक लेआउट कार्यक्षमतेवर लक्ष केंद्रित करतात, म्हणजे डिझाइन डिव्हाइस वैशिष्ट्ये विचारात घेते, जसे की मोबाइल डिव्हाइससाठी स्पर्श नियंत्रणे किंवा डेस्कटॉप मॉनिटर्ससाठी मोठी जागा.

मूलभूत प्रतिसादात्मक डिझाइन तंत्र

सातत्य राखा - कोणत्याही वेबसाइटला वापरकर्त्यांसह विश्वास निर्माण करणे आवश्यक आहे जेणेकरून त्यांना नेव्हिगेट करणे आणि त्याच्याशी संवाद साधण्यास सोयीस्कर वाटेल. सातत्यपूर्ण डिझाइनचा अर्थ असा आहे की साइटवरील दुसऱ्या पृष्ठावर जाताना, वापरकर्त्याला ते दुसऱ्या साइटवर असल्यासारखे वाटत नाही. लहान तपशीलांकडे लक्ष द्या, व्हिज्युअल पदानुक्रम तयार करा आणि महत्त्वाचे घटक ठळकपणे हायलाइट करा. संपूर्ण साइटवर एकसमान रंगसंगती वापरा, वेगवेगळ्या परिस्थितींसाठी समान घटकांचा पुन्हा वापर करा, जसे की समान पॉपअप सूचना डिझाइन.

ग्रिड वापरा—स्तंभांची रुंदी आणि स्तंभांमधील जागा नियंत्रित करण्यासाठी १२-स्तंभ रचना श्रेयस्कर आहे.

5. रिस्पॉन्सिव्ह आणि ॲडॉप्टिव्ह वेब डिझाइनमध्ये काय फरक आहे
तांदूळ. 4. विविध उपकरणांवर प्रतिसादात्मक आणि अनुकूली डिझाइन

प्रतिसादात्मक मांडणी तयार करण्यासाठी, तुम्ही मीडिया क्वेरी आणि % सह निर्दिष्ट केलेल्या ग्रिड घटकांचे सापेक्ष आकार वापरता. रिस्पॉन्सिव्ह डिझाइनमध्ये, सर्व्हर-साइड स्क्रिप्ट्स प्रथम वापरकर्ता साइटवर (डेस्कटॉप, फोन किंवा टॅबलेट) प्रवेश करण्याचा प्रयत्न करीत असलेल्या डिव्हाइसचा प्रकार निर्धारित करतात, त्यानंतर पृष्ठाची अचूक आवृत्ती लोड करते जी त्याच्यासाठी सर्वात अनुकूल आहे. ग्रिड घटकांना निश्चित px आकार दिले आहेत.

म्हणून, या तंत्रांमधील मुख्य फरक म्हणजे प्रतिसादात्मक डिझाइन - सर्व उपकरणांसाठी एक लेआउट, अनुकूली डिझाइन - प्रत्येक प्रकारच्या डिव्हाइससाठी एक लेआउट.

6. उपयुक्त सेवा आणि साधने

Windows, Linux आणि Mac OS X साठी Android एमुलेटर. iOS सिम्युलेटर फक्त Mac OS X वापरकर्त्यांसाठी उपलब्ध आहे आणि Xcode पॅकेजचा भाग आहे (ते Mac App Store वरून विनामूल्य डाउनलोड केले जाऊ शकते).

कोणत्याही वेबसाइटवर चालणारी PHP स्क्रिप्ट स्क्रीनचा आकार शोधते आणि त्यास फिट करण्यासाठी प्रतिमा आकार समायोजित करते, परिणामी लहान स्क्रीनवर लहान प्रतिमा आकारात येतो.

डिव्हाइसेसचे भौतिक परिमाण आणि उंची आणि रुंदीसाठी CSS मूल्ये, तसेच मोबाइल डिव्हाइससाठी पिक्सेल-गुणोत्तर मूल्य यांच्यातील पत्रव्यवहार सारण्या.

मीडिया क्वेरी आणि प्रतिसाद वेब डिझाइन वापरून वेबसाइट्सचा संग्रह.

12-स्तंभ लेआउटवर आधारित CSS फ्रेमवर्क, कमाल 960px. Chrome, Safari, Firefox, IE 7 आणि उच्च, ब्राउझरच्या मोबाइल आवृत्त्यांद्वारे समर्थित.

वेब अनुप्रयोग विकसित करण्यासाठी साधनांचा संच. कमी भाषा, 12-स्तंभ अनुकूली मांडणी, मोबाइल उपकरणांसाठी समर्थन, टॅब्लेट आणि मॉनिटर्स, अनेक घटक, बटणे, ड्रॉप-डाउन मेनू, इनपुट फील्डची सानुकूल शैली, सूची, शीर्षके, लेबले, चिन्ह, सूचना, टॅब, प्रगती बार, टूलटिप्स , “ॲकॉर्डियन”, “कॅरोझेल” आणि असेच, विविध Javascript प्लगइन्स, स्कॅफोल्डिंग सपोर्ट, आधीपासून तयार केलेल्या HTML वर बूटस्ट्रॅप शैली लागू करणे.

आज, बहुतेक लोक मोबाइल गॅझेट्स - टॅब्लेट, फोनद्वारे इंटरनेटवर प्रवेश करतात आणि या संदर्भात, वेबसाइट ऑप्टिमायझेशन देखील नवीन स्तरावर पोहोचते. जर एखादा वापरकर्ता आला आणि पाहतो की साइट मोबाइल डिव्हाइससाठी ऑप्टिमाइझ केलेली नाही: प्रतिमा पाहिली जाऊ शकत नाही, बटणे बाहेर गेली आहेत, फॉन्ट लहान आणि वाचता येत नाहीत, डिझाइन तिरकस आहे - 100% पैकी 99 तो सोडेल आणि आणखी एक सोयीस्कर शोधणे सुरू करा. आणि तो बॉक्स चेक करेल की संसाधन अप्रासंगिक आहे, म्हणजेच ते शोध क्वेरीशी संबंधित नाही. म्हणून, पृष्ठ डिझाइन विविध मोबाइल डिव्हाइसेसशी जुळवून घेणे आवश्यक आहे. वेबसाइटची मोबाइल आवृत्ती काय आहे, ती कशी बनवायची आणि वापरण्याची सर्वोत्तम पद्धत कोणती आहे? या लेखात अधिक वाचा.

तर, तुमची साइट मोबाइल आवृत्तीशी जुळवून घेण्याचे चार प्रमुख मार्ग आहेत.

पद्धत एक - प्रतिसादात्मक डिझाइन

अडॅप्टिव्ह टेम्प्लेट्समध्ये स्क्रीनच्या आकारानुसार वेबसाइट इमेज बदलणे समाविष्ट असते. नियमानुसार, ते मानक 1600, 1500, 1280, 1100, 1024 आणि 980 पिक्सेलवर सेट केले आहेत. अंमलबजावणीसाठी क्वेरी वापरल्या जातात. तो स्वतः बदलत नाही.

या पद्धतीच्या फायद्यांमध्ये हे समाविष्ट आहे:

• सोयीस्कर विकास, कारण रचना स्वतःच स्क्रीन पॅरामीटर्सशी जुळवून घेते आणि कोणत्याही अद्यतनासाठी सुरवातीपासून डिझाइन विकसित करण्याची आवश्यकता नसते, सीएसएस आणि एचटीएमएल दुरुस्त करणे पुरेसे आहे;
• एक URL पत्ता - वापरकर्त्याला अनेक नावे लक्षात ठेवण्याची गरज नाही, पुनर्निर्देशनाची आवश्यकता नाही (एका पत्त्यावरून दुस-या पत्त्यावर पुनर्निर्देशन), जे वेबमास्टरचे कार्य गुंतागुंतीचे करू शकते आणि शोध इंजिनसाठी क्रमवारी लावणे सोपे आहे आणि एकाच पत्त्यासह संसाधन रँक करा.

अर्थात, अनुकूली टेम्पलेट्सचे त्यांचे तोटे देखील आहेत, जे त्यांच्या फायद्यांपेक्षा जास्त आहेत. तरीही, अनेक विकासक या विशिष्ट संकल्पनेचे पालन करतात, उदाहरणार्थ, Google कॉर्पोरेशन, ज्यांच्या साइटच्या मोबाइल आवृत्तीमध्ये प्रतिसादात्मक डिझाइन आहे. तर, तोटे:

• रिस्पॉन्सिव्ह डिझाईन डेस्कटॉप प्रमाणे मोबाइल डिव्हाइसवर समान कार्यांना समर्थन देत नाही. जर ही, उदाहरणार्थ, बँकेच्या वेबसाइटची मोबाइल आवृत्ती असेल, जिथे वापरकर्त्याला बहुधा विनिमय दर किंवा जवळपासच्या एटीएमबद्दल माहिती आवश्यक असेल, तर हे डिझाइन पुरेसे आहे. परंतु जर ते अनेक विभाग आणि उपविभागांसह एक जटिल संरचित संसाधन असेल तर ते अभ्यागतांना आकर्षित करण्याची शक्यता नाही.
• स्लो लोडिंग तुमच्या आवडत्या साइटला तिरस्कारित करते. हे विशेषतः संसाधनांसाठी खरे आहे जेथे ॲनिमेशन, व्हिडिओ, पॉप-अप आणि इतर सक्रिय घटक भरपूर आहेत. मोठ्या वजनामुळे, पृष्ठ फक्त "धीमे" होईल, वापरकर्ता रागावेल आणि निघून जाईल आणि साइटची शोध स्थिती घसरेल.
• मोबाइल आवृत्ती अक्षम करण्यात अक्षमता ही आणखी एक महत्त्वपूर्ण कमतरता आहे. जर एखादा घटक अशा लेआउटद्वारे लपलेला असेल, तर तुम्ही ते उघडण्यासाठी काहीही करू शकत नाही, तुम्ही ते अक्षम करू शकता अशा साइटच्या विपरीत आणि नियमित डोमेनवर स्विच करू शकता.

तथापि, साइटची अशी मोबाइल आवृत्ती त्वरीत, विशेष कौशल्ये आणि खर्चाशिवाय, आपल्याला कोणत्याही गॅझेटमध्ये संसाधन अनुकूल करण्यास अनुमती देते. परंतु, सूचीबद्ध उणीवा लक्षात घेता, जटिल नेव्हिगेशन आणि ॲनिमेशनशिवाय, कमीतकमी माहिती आणि मल्टीमीडियासह लहान, साध्या संसाधनांसाठी ते योग्य आहे. जटिल साइटसाठी, 2 इतर पद्धती योग्य आहेत.

पद्धत दोन - साइटची स्वतंत्र आवृत्ती

ही पद्धत अतिशय सामान्य आहे आणि अनेकदा यशस्वीरित्या मोबाइल डिव्हाइसवर साइट अधिक वापरकर्ता-अनुकूल बनवते. त्याचे सार पृष्ठाची स्वतंत्र आवृत्ती तयार करणे आहे, अनुप्रयोगासाठी डिझाइन केलेले आणि वेगळ्या URL किंवा सबडोमेनवर स्थित आहे, उदाहरणार्थ, m.vk.com. त्याच वेळी, मुख्य कार्यक्षमता जतन केली जाते, साइट डिझाइन फक्त भिन्न दिसते. या पद्धतीचे फायदे स्पष्ट आहेत:

• सोयीस्कर वापरकर्ता इंटरफेस;
• ते बदलणे आणि संपादन करणे सोपे आहे, कारण आवृत्ती मुख्य स्त्रोतापासून वेगळी आहे;
• त्याच्या कमी वजनामुळे, साइटची एक वेगळी आवृत्ती अनुकूली टेम्पलेटपेक्षा खूप वेगाने कार्य करते;
• बहुतेकदा मोबाइलवरून पृष्ठाच्या मुख्य आवृत्तीवर स्विच करणे शक्य आहे.

परंतु येथे काही तोटे देखील आहेत:

• अनेक पत्ते - साइटच्या डेस्कटॉप आणि मोबाइल आवृत्त्या. वापरकर्त्याला दोन पर्याय कसे लक्षात ठेवायचे? वेब मास्टर्स अनेकदा डेस्कटॉप आवृत्तीवरून मोबाइल आवृत्तीवर हस्तांतरित करतात, परंतु हे पृष्ठ मोबाइल आवृत्तीमध्ये अस्तित्वात नसल्यास, वापरकर्त्यास त्रुटी प्राप्त होईल. येथे शोध इंजिनसह अडचणी उद्भवतात, ज्यांना 2 समान संसाधने रँक करणे कठीण वाटते आणि याचा थेट प्रमोशनवर परिणाम होतो.
• संगणकावरून साइटची मोबाइल आवृत्ती, जर एखाद्या वापरकर्त्याने चुकून त्यात प्रवेश केला तर ते हास्यास्पद दिसेल, ज्यामुळे रहदारीवर देखील परिणाम होऊ शकतो.
• ही आवृत्ती बऱ्याचदा डेस्कटॉप, खाली उतरविली जाते, त्यामुळे वापरकर्त्यास अत्यंत मर्यादित कार्यक्षमता प्राप्त होईल. परंतु त्याच वेळी, काहीतरी गहाळ असल्यास, अभ्यागत पृष्ठाच्या पूर्ण आवृत्तीवर जाऊ शकतो.

सर्वसाधारणपणे, एक स्वतंत्र मोबाइल साइट स्वतःला न्याय्य ठरवते आणि मोबाइल डिव्हाइससाठी संसाधन अनुकूल करण्याचा सर्वात सामान्य मार्ग आहे. ॲमेझॉन सारख्या मोठ्या ऑनलाइन स्टोअरमध्ये हे लोकप्रिय आहे.

तिसरा मार्ग आरईएसएस डिझाइन आहे

Google शोध इंजिन मोबाइल डिझाइनच्या या दिशेने सक्रियपणे समर्थन करते. फोन किंवा टॅब्लेटसाठी वेबसाइट अनुकूल करण्याची ही सर्वात कठीण, महाग, परंतु प्रभावी पद्धत आहे. त्याला RESS म्हणतात. हे एका मोबाइल ऍप्लिकेशनमध्ये संसाधन लक्ष्य करत आहे जे प्रत्येक डिव्हाइससाठी स्वतंत्रपणे डाउनलोड केले जाऊ शकते. Android साठी - GooglePlay वरून आणि Apple साठी - iTunes वरून.

असे ॲप्लिकेशन्स जलद, विनामूल्य, सोयीस्कर आणि विविध प्रकारची माहिती होस्ट करण्याची क्षमता आहे, तर फोन मेमरी आणि इंटरनेट ट्रॅफिक ब्राउझरद्वारे साइटला भेट देताना तितके खाल्ले जात नाही. ते प्रवेश करणे सोपे आहे, कारण लिंक नेहमी स्क्रीनवर असेल आणि ब्राउझरच्या ॲड्रेस बारमध्ये जटिल नाव प्रविष्ट करण्याची आवश्यकता नाही.

अर्थात, येथे तोटे देखील आहेत, जसे की विकासातील जटिलता, मोठ्या संख्येने प्रोग्रामरसाठी उच्च श्रम खर्च आणि अनेक लेआउट पर्याय तयार करण्याची आवश्यकता. काहीवेळा मोबाइल डिव्हाइस अनुप्रयोगाद्वारे ओळखले जात नाही. नियमित तांत्रिक समर्थन आणि दोष निराकरणे आवश्यक आहेत. तरीही, हा पर्याय त्याच्या उत्पादक, अखंड ऑपरेशनमुळे प्रस्तावित तीनपैकी सर्वोत्तम मानला जातो.

मोबाइल वेबसाइट बनवण्याचा सर्वात स्वस्त मार्ग

वरील सर्व पद्धतींसाठी आवश्यक आहे, जरी नेहमीच लांब आणि जटिल नसले तरी, वेबमास्टरसाठी सशुल्क काम. आपल्याला अशा विकासाची तातडीची आवश्यकता दिसत नसल्यास, साइटची एक साधी आणि विनामूल्य मोबाइल आवृत्ती आपल्यास अनुकूल करेल. ते करण्याचा सर्वात सोपा मार्ग कोणता आहे?

प्रतिसादात्मक डिझाइनसाठी विशेष टेम्पलेट्स (प्लगइन्स) डाउनलोड करा. उदाहरणार्थ, डब्ल्यूपी मोबाइल डिटेक्टर, वर्डप्रेस मोबाइल पॅक, डब्ल्यूपीएसमार्ट मोबाइल आणि इतर. ते तुम्हाला तुमच्या फोनवर साइट अधिक योग्यरित्या प्रदर्शित करण्यात मदत करतील आणि तुम्हाला मोबाइल आवृत्तीमध्ये पृष्ठ अधिक चांगल्या प्रकारे जुळवून घेण्यासाठी काय दुरुस्त केले पाहिजे याबद्दल अनेक टिपा प्राप्त होतील.

अर्थात, ही पद्धत गंभीर संसाधनांसाठी योग्य असण्याची शक्यता नाही. त्याऐवजी, हे विनामूल्य वैशिष्ट्य लहान आणि साध्या साइट्स, ब्लॉग आणि बातम्या फीडसाठी आहे. आम्ही हे देखील विसरू नये की Google शोध इंजिन, Yandex सारखे, आज मोबाइल आवृत्त्यांवर गंभीर मागणी ठेवते, म्हणून या पद्धतीचा वापर करून आपली रँकिंग कमी करण्याची मोठी शक्यता आहे.

या पद्धतीसह, बहुधा, जाहिराती आणि पॉप-अप बॅनर कापले जातील, परंतु पृष्ठ द्रुतपणे आणि विलंब न होता लोड होईल.

मोबाइल आवृत्त्या तयार करण्याचे सिद्धांत

साइटची मोबाइल आवृत्ती विनामूल्य तयार केली गेली किंवा वेबमास्टर्सच्या कर्मचाऱ्यांच्या मदतीने, ती RESS प्रणाली वापरून किंवा अनुकूली टेम्पलेट वापरून बनविली गेली की नाही हे महत्त्वाचे नाही. सर्वात महत्वाची गोष्ट अशी आहे की ते प्रभावीपणे कार्य करण्यासाठी, अनेक अत्यंत महत्वाच्या तत्त्वांचे पालन करणे आवश्यक आहे. तर, साइटची मोबाइल आवृत्ती कशी असावी? ते उत्पादक, कार्यक्षम आणि उत्पादक कसे बनवायचे?

आम्ही अनावश्यक सर्वकाही काढून टाकतो

मिनिमलिझम म्हणजे वेबसाइटच्या मोबाइल आवृत्तीच्या विकसकाने ज्यासाठी प्रयत्न केले पाहिजेत. कल्पना करा की रंग, बटणे, बॅनर यांनी भरलेली माहिती समजणे किती कठीण आहे आणि योग्य सामग्रीच्या शोधात तुम्हाला अविरतपणे स्क्रोल करावे लागेल. मोबाइल डिझाइन साधे आणि स्वच्छ असावे. जागा विभाजित करण्यासाठी 2-3 रंग निवडा (उदाहरणार्थ, ब्रँडेड रंग). त्यापैकी एक पांढरा असल्यास ते चांगले आहे. लहान स्क्रीन स्पेस स्पष्ट आणि वाचनीय झोनमध्ये विभाजित करा. व्हर्च्युअल की दिसल्या पाहिजेत जेणेकरून वापरकर्त्याला स्पष्टपणे कळेल की कुठे दाबायचे आणि पाहायचे - येथे उत्पादन आहे, डेटा भरण्यासाठीचा फॉर्म येथे आहे, वितरण आणि पेमेंटची माहिती येथे आहे.

सर्व अतिरिक्त पर्याय जे डेस्कटॉप आवृत्तीमध्ये उपयुक्त ठरतील आणि वापरकर्त्याचे जीवन सोपे करतील ते येथे फक्त गुंतागुंत आणतील. फक्त सर्वात महत्वाचे घटक सोडा. ॲनिमेशन, जाहिरात बॅनर आणि मल्टीमीडिया बहुधा वेबसाइट किंवा ॲप्लिकेशनचे ऑपरेशन मंद करतात आणि मुख्य गोष्टीपासून लक्ष विचलित करतात.

संरेखन

संरेखनाचा मुद्दा कमी दाबणारा नाही, कारण चुकीच्या पद्धतीने केले असल्यास, वापरकर्त्यास केवळ महत्त्वाच्या शब्दांचे शेवट प्राप्त होतील. हे सामान्यतः डावीकडे आणि अनुलंब संरेखित करण्यासाठी स्वीकारले जाते. तुमच्या फोनवरील न्यूज फीडमधून स्क्रोल करण्याची कल्पना करा. तुम्ही हे वरपासून खालपर्यंत करता, परंतु डावीकडे किंवा उजवीकडे नाही.

असोसिएशन

जेव्हा संक्रमणाची एक लांब शृंखला असण्याची शक्यता नसते, तेव्हा अनेक पायऱ्या एकामध्ये एकत्र करण्याचा प्रयत्न करा. उदाहरणार्थ, साइटला अनेक टप्प्यांत डेटा प्रविष्ट करणे आवश्यक आहे - एक नाव, नंतर पत्ता, जेथे प्रत्येक वैयक्तिक सेलमध्ये एक स्वतंत्र घर, रस्ता, अपार्टमेंट इ. आहे. वापरकर्त्याला अनेक छोट्या छोट्या गोष्टींमध्ये जाण्याचा प्रयत्न करण्यास भाग पाडू नये. सेल, त्याला फक्त 2 भरण्यास सांगा - नाव आणि पत्ता.

आणि डिस्कनेक्शन

काहीवेळा, उलटपक्षी, खूप जास्त माहिती वेगळे करणे आवश्यक आहे. उदाहरणार्थ, ड्रॉप-डाउन मेनूमध्ये तुमच्याकडे 80 पेक्षा जास्त शहरांची यादी आहे जिथे वितरण केले जाते. त्यांना प्रदेशानुसार गटबद्ध करा जेणेकरून वापरकर्त्याला या मोठ्या सूचीमधून स्क्रोल करावे लागणार नाही. जेव्हा तो प्रादेशिक केंद्र किंवा प्रदेशावर कर्सर हलवतो तेव्हा शहरांची दुसरी यादी दिसेल.

याद्या

तसे, याद्यांबद्दल. त्यापैकी दोन आहेत - वर्णक्रमानुसार किंवा इतर क्रमाने आणि प्रतिस्थापनासह निश्चित. त्यांची निवड काय सूचीबद्ध केली जाईल यावर अवलंबून असते.

जर वापरकर्त्याला तो नक्की काय शोधत आहे हे माहित असल्यास निश्चित करणे सोयीचे आहे. उदाहरणार्थ, शहर, संख्या किंवा तारीख. दुसरा पर्याय लांब, गुंतागुंतीच्या नावांसाठी किंवा एकाच नावाच्या अनेक भिन्नता असलेल्या प्रकरणांसाठी योग्य आहे आणि प्रत्येक वापरकर्त्याला ध्येयाच्या एक पाऊल जवळ आणतो. जेव्हा एखाद्या पाहुण्याला मदतीची आवश्यकता असते तेव्हा स्वयं-प्रतिस्थापन पर्याय अधिक वेळा वापरला जातो. उदाहरणार्थ, विणकाम वेबसाइट विणकाम सुया खरेदी करण्याची ऑफर देते. वापरकर्ता "मेटल विणकाम सुया" शोध क्वेरी प्रविष्ट करतो आणि इशारेमध्ये त्याला "विणकाम सुया 5 मिमी", "विणकाम सुया 4.5 मिमी" इत्यादी दिसतात.

स्वयंपूर्ण

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

हे करण्यासाठी, फॉर्ममध्ये आधीच भरलेला डेटा असू शकतो; आपण सर्वात लोकप्रिय उत्तरांचा अवलंब करू शकता. उदाहरणार्थ, तुम्ही त्याच प्रदेशात काम करत असल्यास आजची तारीख, रोख पेमेंट पद्धत, शहर घाला. ते बदलले जाऊ शकतात, परंतु जर तुम्ही लक्ष्य गाठले तर वापरकर्त्याचा वेळ वाचेल.

सर्व काही वाचले जाते, सर्व काही पाहिले जाते

साइटच्या मोबाइल आवृत्तीचे डिझाइन तयार करताना, लक्षात ठेवा की प्रत्येकाचा फोन वेगळा असतो आणि त्यांची दृष्टीही वेगळी असते. तुमची साइट लहान स्क्रीनवर पाहिली जाऊ शकते, म्हणून फॉन्ट सोपे आणि वाचण्यायोग्य असावेत, बटणे दुसऱ्या पृष्ठावर न जाता क्लिक करता येतील इतकी मोठी असावी आणि प्रतिमा स्वतंत्रपणे आणि मोठ्या उघडल्या पाहिजेत, विशेषत: जेव्हा ते इंटरनेटवर येते - स्टोअर

काही आकडेवारी

वेबसाइटला मोबाइल डिव्हाइसशी जुळवून घेण्याबद्दल बोलत असताना, ऑनलाइन प्रमोशनसाठी ही प्रक्रिया किती महत्त्वाची आहे हे समजून घेण्यासाठी कोणीही आकडेवारीचा अवलंब करू शकत नाही.

संख्या खालीलप्रमाणे आहेत. आज, 87% लोकसंख्या गॅझेट वापरते, वरवर पाहता सर्वात लहान मुले आणि काही वृद्ध लोक वगळता. पुढील 5 वर्षांत मोबाईल कॉमर्स 100 पटीने वाढेल, असा अंदाज अर्थशास्त्रज्ञांनी व्यक्त केला आहे. तथापि, केवळ 21% साइट्स मोबाइल डिव्हाइससह कार्य करण्यासाठी अनुकूल आहेत. याचा अर्थ इंटरनेट ट्रॅफिक आणि ई-कॉमर्स मार्केटचा फक्त 5 वा भाग व्यापलेला आहे.

या संख्यांचा विचार करा. आपल्या संसाधनाशी जुळवून घेण्यात अर्थ आहे का? अर्थातच होय. शिवाय, या मार्केटमध्ये खूप मोकळी जागा असताना, तुम्ही त्यात तुमचा स्वतःचा विभाग तयार करू शकता.

मोबाइल आवृत्ती कुठे आवश्यक आहे?

उच्च रेटिंग मिळवू पाहणाऱ्या कोणत्याही प्लॅटफॉर्मसाठी मोबाइल आवृत्ती वापरणे उचित आहे. शेवटी, हा वापरकर्त्यावर थेट परिणाम होतो, त्याला आपल्या साइटवर राहण्यासाठी आरामदायक परिस्थिती निर्माण करते.

मोबाइल आवृत्तीशिवाय खालील अस्तित्वात असू शकत नाहीत:

• न्यूज पोर्टल्स, कारण बहुतेक लोक कामावर किंवा शाळेत जाताना त्यांच्या फोनवरून हेच ​​पाहतात;
• सोशल नेटवर्क्स - त्याच कारणास्तव, ऑनलाइन संप्रेषणाचा घटक देखील आहे, याचा अर्थ यासाठी सोयीस्कर, समजण्यायोग्य चॅट तयार करणे आवश्यक आहे;
• संदर्भ पुस्तके, नेव्हिगेशनसह साइट इ., जिथे लोक काहीतरी शोधत असताना वळतात;
• ऑनलाइन स्टोअर्स ही ग्राहकांना आकर्षित करण्याची संधी आहे जे खरेदीसाठी वेळ वाया घालवत नाहीत, परंतु मोबाइल इंटरनेटद्वारे सर्वकाही खरेदी करतात.

निष्कर्षाऐवजी

आज, मोबाइल तंत्रज्ञान सक्रिय वाढ आणि विकासाच्या टप्प्यावर आहेत, म्हणून, बाजार नेतृत्वासाठी प्रयत्नशील, कोणत्याही कंपनीने हे सुनिश्चित केले पाहिजे की त्याचे इंटरनेट संसाधन आवश्यकता पूर्ण करते. वाढत्या वापरकर्त्यांच्या विनंत्यांमुळे, वेबसाइट्सना सतत आधुनिकीकरण करावे लागते आणि वेगवेगळ्या उपकरणांसाठी अनुकूल केले जाते. हे स्पष्ट आहे की जर एखाद्या व्यक्तीला एखाद्या विशिष्ट स्त्रोतावर राहणे गैरसोयीचे असेल, तर त्याला तेथे उत्पादन किंवा किंमतीबद्दल माहिती मिळू शकत नाही, ऑर्डर देऊ शकत नाही, डिलिव्हरीची माहिती मिळवू शकत नाही, तर त्याला ती साइट सापडेल जिथे हे सर्व शक्य होईल. म्हणून, स्पर्धा जिंकण्यासाठी, लवचिक, सोयीस्कर, कार्यात्मक आणि मनोरंजक संसाधन असणे महत्वाचे आहे.

साइट Android किंवा iOS ची मोबाइल आवृत्ती आपल्याला हे करण्यात मदत करेल. हे करण्यासाठी, तुम्हाला वरील रीडिझाइन पद्धतींपैकी एक निवडण्याची आवश्यकता आहे - एक अनुकूली टेम्पलेट, सबडोमेनवर एक नवीन साइट तयार करणे आणि त्यावर पुनर्निर्देशित करून, विनामूल्य टेम्पलेट्स वापरून किंवा एक मोबाइल अनुप्रयोग तयार करणे ज्याद्वारे वापरकर्ता अधिक सोयीस्करपणे प्रवेश करू शकेल. आणि पृष्ठावर रहा.

अलीकडे, तंत्रज्ञान आणि विविध उपकरणे (टॅब्लेट, स्मार्टफोन, मॉनिटर्स) ज्याद्वारे साइट्स पाहिल्या जातात ते अधिकाधिक विकसित होत आहेत.

या क्षेत्रात, आम्हाला विविध स्क्रीन रिझोल्यूशनची प्रचंड विविधता मिळते, ज्यामुळे साइटवरून माहिती मिळवणे कठीण होते. माहिती वाचण्यास सोपी आहे आणि बहुतेक उपकरणांवर दृश्यमान आहे याची खात्री करण्यासाठी, अनुकूली डिझाइन तंत्रज्ञान विकसित केले गेले आहे.

रिस्पॉन्सिव्ह डिझाईनचे उद्दिष्ट एक सार्वत्रिक वेबसाइट डिझाइन विकसित करणे आहे जे तुम्हाला विविध उपकरणांवरील संसाधन पाहण्याची आणि त्यांच्याशी संवाद साधण्याची अनुमती देईल.

या तंत्रज्ञानामध्ये अनेक उपकरणांऐवजी वेबसाइटची सर्व उपकरणांसाठी एक आवृत्ती विकसित करणे देखील समाविष्ट आहे.

अडॅप्टिव्ह वेब डिझाईन हे वेब पेजेसचे डिझाइन आहे जे इंटरनेटशी कनेक्ट केलेल्या विविध उपकरणांवर साइटचे योग्य प्रदर्शन सुनिश्चित करते आणि निर्दिष्ट ब्राउझर विंडो आकारांशी डायनॅमिकपणे जुळवून घेते.

प्रतिसादात्मक डिझाइनची मूलभूत तत्त्वे:

• अनुकूली वेबसाइट टेम्प्लेट, कॉम्प्युटर मॉनिटर्सपासून स्मार्टफोन्सपर्यंत वेगवेगळ्या डिव्हाइस स्क्रीन रिझोल्यूशनशी जुळवून घेण्याची टेम्पलेटची क्षमता;
• सामग्री ब्लॉक्सचे अनुकूलन आणि हालचाल, डिव्हाइस स्क्रीन रिझोल्यूशनवर अवलंबून आवश्यक परिमाणे घेण्याची सामग्री ब्लॉकची क्षमता, तसेच लेआउटमधील दुसर्या स्थानावर जाण्याची क्षमता;
• प्रतिमा प्रतिसाद, स्क्रीन रिझोल्यूशनवर अवलंबून आकार बदलण्याची किंवा कमी वजन आणि आकारासह अधिक अनुरूप प्रतिमा लोड करण्याची प्रतिमांची क्षमता;
• लवचिक ग्रिड वापरणे आपल्याला लेआउट डिझाइन द्रुतपणे बदलण्याची परवानगी देते;
• कमी महत्त्वाचे ब्लॉक लपवणे, छोट्या पडद्यावर काही ब्लॉक लपलेले असू शकतात;
• नेव्हिगेशन एलिमेंट्सच्या उपयोगितेवर पुन्हा काम करणे, कारण मोबाइल डिव्हाइसवर, त्यांच्या कमी रिझोल्यूशनमुळे, नेव्हिगेशन घटक कमी क्लिक करण्यायोग्य बनतात, ते पुन्हा डिझाइन केले जातात, ते वापरण्यास सोयीस्कर बनवतात;
• वेब पृष्ठावरील अनेक घटकांचे सरलीकरण, काही घटक मोबाइल उपकरणांवर वापरण्यासाठी सरलीकृत केले आहेत;
• व्हिडिओ सामग्रीचे अनुकूलन, व्हिडिओ अनुकूलन देखील खात्यात घेतले पाहिजे;
• मीडिया क्वेरी वापरणे तुम्हाला अनुकूली मांडणी तयार करण्यास अनुमती देते;
• मोबाइल प्रथम, प्रतिसादात्मक डिझाइन मोबाइल लेआउटसह सुरू होते.

शेवटच्या मुद्द्याबद्दल, हे बरोबर आहे की नाही हा एक कठीण प्रश्न आहे, कमीतकमी अनेकांचा असा युक्तिवाद आहे की मोबाइल डिव्हाइससाठी आवृत्तीसह लेआउट विकसित करणे आवश्यक आहे. मी थोडा वेगळा दृष्टिकोन घेतो; विचारपूर्वक ग्रिड आणि पूर्ण कार्यक्षमतेसह जास्तीत जास्त रिझोल्यूशनसाठी लेआउट विकसित करणे माझ्यासाठी सोपे आहे आणि त्यानंतरच ते इतर रिझोल्यूशनशी जुळवून घेते.

प्रतिसादात्मक डिझाइन लेआउट परिमाणे

एकदा 2012 मध्ये, मी एक लहान लेख लिहिला होता की डिझाइन विकसित करताना कोणती निवडली पाहिजे - निश्चित साइटसाठी लेआउट. या लेखाला वाचकांमध्ये खूप रस आहे हे दिसून आले की हा मुद्दा अनेक नवशिक्या डिझाइनर आणि विकसकांसाठी आहे. या संदर्भात, मी या लेखात हा मुद्दा हायलाइट करण्याचे देखील ठरवले आहे.

म्हणून, पूर्णपणे माझ्या दृष्टीकोनातून, मी तत्त्व आणि परिमाणे ज्यासाठी मांडणी विकसित केली जावी.

आपण प्रथम मोबाइलच्या तत्त्वाचे अनुसरण केल्यास, नंतर तेथे रिझोल्यूशन आकार असतील ज्यासाठी आपल्याला 320px / 480px / 768px / 1024px / 1280px लेआउट विकसित करणे आवश्यक आहे, कदाचित अधिक कार्यांवर अवलंबून असेल.

चित्र असे काहीतरी दिसते, परंतु बऱ्याचदा विशिष्ट रिझोल्यूशनसाठी लेआउट तयार करण्याची आवश्यकता नसते, उदाहरणार्थ, 480px. जर लेआउट 768 - 320px च्या अंतराने खंडित होत नसेल.

अर्थात, आम्ही नियमित लेआउटप्रमाणेच पॅडिंग, स्क्रोलबार आणि इतर सर्व गोष्टी विचारात घेऊन फोटोशॉपमध्ये कॅनव्हास तयार करू. विकास सुलभतेसाठी, तसेच जलद लेआउट डिझाइनसाठी. बरेच लोक त्यांच्या कामात फ्रेमवर्क वापरतात आणि म्हणून ते विकसित केलेल्या फ्रेमवर्कच्या ग्रिडवर अवलंबून असतात.

याबद्दल धन्यवाद, आम्ही लेआउट डिझायनरला दर्शवू शकतो की लेआउट वेगवेगळ्या स्क्रीन रिझोल्यूशन आणि डिव्हाइसेसवर कसे वागेल. उदाहरण म्हणून, मी एक लहान लेआउट स्केच केले आहे, आपण ते खालील स्क्रीनशॉटमध्ये पाहू शकता.

प्रतिसादात्मक डिझाइनमध्ये मीडिया क्वेरी आणि व्ह्यूपोर्ट

व्ह्यूपोर्ट मेटा टॅग ब्राउझरला पृष्ठ आकारमान कसे प्रदर्शित करावे आणि त्याचे स्केल कसे बदलावे हे सांगण्यासाठी वापरला जातो. हा मेटा टॅग साइटवर लिहिलेला आहे. हे विकसकांना उपकरणांसाठी स्क्रीन रुंदी सेट करण्यास अनुमती देते, जे css मध्ये लिहिलेले आहे.

व्ह्यूपोर्ट मेटा टॅग असे लिहिले आहे: