टॅब्लेट आणि मोबाईल फोनद्वारे इंटरनेटवर प्रवेश करणारे वापरकर्ते वाढत आहेत. हे आपल्याला आधीच माहित आहे, याचा अर्थ असा आहे की आपल्या संगणकावर चांगले दिसणारे एखादे चांगले वेब पृष्ठ डिझाइन करणे पुरेसे नाही: प्रत्येक मोबाइल डिव्हाइसवर देखील ते पाहिले जावे. समस्या? भिन्न स्क्रीन आकार आणि निराकरणे. म्हणूनच अशी रचना तयार करणे इतके अवघड आहे की जे सर्व माध्यमांना योग्यरित्या जुळवून घेते (प्रसिद्ध प्रतिसाद डिझाइन, म्हणून अनुवादित अनुकूली रचना).
या वैशिष्ट्यांसह डिझाइन बनवताना लक्षात ठेवण्याच्या काही टीपा येथे आहेत. लक्ष द्या!
अनुकूलक डिझाइनसाठी टिपा
- एक साधा साचा बनवासाध्या अर्थाने मला मुळी नाही. मी बोलत आहे संरचना आपल्या वेबसाइटचे एचटीएमएल: हे जितके स्पष्ट होईल तितके चांगले. हे लक्षात ठेवा की संगणक स्क्रीन तीन उभ्या स्तंभांमध्ये बसू शकते; मोबाइलच्या स्क्रीनवर, आपण फक्त एक फिट बसू शकता. त्याबद्दल आणि आपण घटकांचे स्थान कसे काढता येईल याचा विचार करा.
- अनावश्यक सर्व गोष्टी काढून टाकाJQuery प्रभाव, फ्लॅश अ‍ॅनिमेशन आणि आपल्या पृष्ठाचे लोडिंग कमी करते असा कोणताही इतर कोड टाळा. आपल्याकडे या प्रकारची कमी सामग्री आहे, वेब वेगाने लोड होईल.
- शैली परिभाषित करा प्रत्येक "आकार" साठी सीएसएसएक लहान सी.एस.एस., स्मॉल सीएसएस आणि बिग सीएस (उदाहरणार्थ) तयार करा जे त्यावर पाहिलेले डिव्हाइसवर आधारित आहे. उदाहरणार्थ:
@ आयपोर्ट यूआरएल (टिनी सीएसएस) (किमान रूंदी: 300 पीएक्स);
@ आयपोर्ट यूआरएल (स्मॉल सीएसएस) (किमान रुंदी: 600 पीएक्स);
@ आयपोर्ट यूआरएल (बिग सीएसएस) (किमान रुंदी: 900 पीएक्स);
- सर्वाधिक वापरलेले ठराव320px/480px/720px/768px/900px/1024px
- आपले टेम्पलेट फ्लेक्सिबल कराजेव्हा आपण हे करू शकता तेव्हा निश्चित रकमेऐवजी टक्केवारीसह कार्य करा. येथे काही संदर्भ समतुल्य आहेत: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- टायपोग्राफी हे नेहमीपेक्षा अधिक महत्वाचे आहे कधीकधी आपल्या डिव्हाइसची स्क्रीन इतकी लहान असू शकते की आपण पहात असलेले सर्व मजकूर आहे. म्हणूनच आम्हाला आमच्या साइटवरील सर्वोत्कृष्ट फॉन्ट्स काळजीपूर्वक निवडाव्या लागतील, जेणेकरुन जेव्हा ते आकाराने कमी होतील तेव्हा त्यांची योग्यता गमावू नये. याव्यतिरिक्त, आम्हाला वेबवर आवश्यक वर्ण देणा f्या व्यक्तिमत्त्वासह इतर तटस्थ फॉन्ट्स कसे जोडावेत हे जाणून घ्यावे लागेल. म्हणून, प्रथम टीप अशी आहे की आपण वापरत असलेल्या फॉन्ट निवडून वेळ घालवा.
- वापर उच्च प्रतीची प्रतिमाजागा कमी झाल्यामुळे प्रतिमा त्यासह असतील. जे कमी झाल्यावर गुणवत्ता गमावत नाहीत आणि जे मोजमापतात तेव्हा तेच कार्य करतात त्यांना निवडा. खराब गुणवत्तेची प्रतिमा आपली वेबसाइट खराब दिसेल.
- आपल्या प्रतिमा नेहमीच पाहिल्या जातात पूर्णआपल्या CSS मध्ये img (रुंदी: 100%;) कोड जोडून आपले फोटो कापण्यापासून प्रतिबंधित करा. अशाप्रकारे, आपण डिव्हाइसला सांगत आहात की प्रतिमेस दिलेली उंची पुन्हा मोजावी जेणेकरून त्याची रुंदी शंभर टक्के दिसून येईल.
- सर्व कमी समान URLWww.mysite.com / मोबाइल सारख्या सबडोमेन बद्दल विसरा, कारण मूळ फोल्डरमधील समान अनुक्रमणिका. HTML फाइल सर्व डिव्हाइससाठी कार्य करेल (आपण अनुकूलक रचना योग्यरित्या केल्यास). आपल्याला आधीच फायदा माहित आहे: कमी सबडोमेन, पृष्ठ लोड जलद होईल.
- समर्थनांचा फायदा घ्या: कल्पनाशील व्हा एखाद्या आयपॅड किंवा मोबाईल फोनपेक्षा डेस्कटॉप संगणकावरून वेबसाइटवर प्रवेश करणे एकसारखे नसते. पहिल्यासह, आपण शांत आणि निवांत मार्गाने नेव्हिगेट कराल. नंतरचेसह, आपण हे निष्क्रिय तासांमध्ये करा आणि कंटाळा होताच विंडो बंद करा. वापरकर्त्याचे मनोरंजन करण्यासाठी या अटींचा फायदा घ्या आणि त्या काही मिनिटांत त्यांना मजा करा की ते तुमच्यासाठी समर्पित होतील. कदाचित जेव्हा तो घरी येईल तेव्हा तो पुन्हा आरामशीर मार्गाने तुला भेटायचा निर्णय घेईल.
- प्रेरणा घ्या डिजिटल प्रकाशनात, आपल्याला हा प्रश्न का असावा याबद्दल आश्चर्य वाटेल. खुप सोपे: डिजिटल मासिके (चांगले) समर्थनाचा कसा फायदा घ्यावा हे माहित आहे आणि त्यांचे डिझाइन अत्यंत हुशार आहे. त्यांच्याकडून प्रेरित व्हा आणि सोडायला कठीण आहे अशी वेबसाइट बनवा.
अधिक माहिती - डिजिटल मासिके
स्रोत - स्प्लिओ, 960.gs, स्तंभ
अशा अनेक गोष्टी आहेत ज्या मला फारसे पटत नाही.
बिंदू 5 मध्ये ... 200 पीएक्स = 15,38% पासून आणि त्यानंतरची ... ही संदर्भ तुलना कोणत्याही पालक मापाशिवाय केली जाऊ शकत नाही, प्रत्येक पिक्सेल आकार टक्केवारीसारखे सापेक्ष उपाय नाही!
रूंदी असलेल्या प्रतिमा निर्दिष्ट करा: 100% चूक, मला वाटत नाही की ही एक शिफारस असावी. प्रतिमा त्यांची रुंदी आणि उंची अधिक चांगल्या प्रकारे परिभाषित करतात, म्हणून सर्व्हर माहितीवर प्रक्रिया करण्यासाठी कमी वेळ घेते (त्याच्या आकाराची गणना करणे आवश्यक नाही) आणि आम्ही पृष्ठाचा लोडिंग वेग सुधारतो (जे अनुकूलनक्षम किंवा प्रतिसादात्मक वेबमध्ये खूप महत्वाचे आहे) डिझाइन).
मी आधीपासूनच समाविष्ट करेन, जरी हे नाक काम असले तरी ... डोळयातील पडदा पडद्यासाठी प्रतिमा. आम्हाला उत्तरदायी वेब डिझाइन करायचे असल्यास, रेटिना प्रदर्शनासाठी प्रतिमा वापरणे अनिवार्य आहे, कारण मोबाइल आणि टॅब्लेटच्या मोठ्या संख्येने दृश्ये या स्क्रीन वापरतात. म्हणून अर्ध्या गळयात त्यांच्यासाठी डिझाइनमध्ये प्रयत्न ठेवण्यात काही अर्थ नाही.
विश्रांतीसाठी चांगले
बिंदू 5 मध्ये त्यांनी आपल्याला संदर्भ दिले आणि 1300, 3 आणि 200 पैकी 300 स्तंभांसह 1000px एकूण लेआउटबद्दल सांगितले.
जर आपण ते टक्केवारीत पास केले तर त्यांच्या बाबतीत ते सांगाल तसे आहेत, 15,38% ((200 * 100) / 1300) (दशांश खाली, आंतरराष्ट्रीय प्रणाली: पी)
परंतु जर आपण 500 पीएक्स लेआउटबद्दल बोललो आणि आमच्याकडे 3 स्तंभ आहेत, 200 पैकी एक, 200 चा दुसरा आणि 100px चा दुसरा, टक्केवारी यापुढे नाही, या प्रकरणात 200px = 40% ((200 * 100) / 500)
ते असतीलः 200px = 40% आणि 100px = 10%
चला, मी म्हटल्याप्रमाणे, आपण संदर्भित करता ते संदर्भ नाहीत, ते फक्त 1300 पीएक्स लेआउटवरील संदर्भ आहेत.
शुभेच्छा
किती अपयश, आपण जगात अगदी बरोबर आहात! पुन्हा धन्यवाद;)