👨🏿‍🎨 🔕 🙅🏻 मोबाइल उपकरणों के लिए वेबसाइट डिजाइन सुविधाएँ ⏮️ ♣️ 👨🏾‍⚖️

हम उन मोबाइल उपकरणों के बारे में बात कर रहे हैं, जो वर्तमान में WAP बाज़ार (OS, सिम्बियन और अन्य लोगों के बिना फोन) के एक बड़े हिस्से पर कब्जा करते हैं, हमने आज Android और iPhone के बारे में बात नहीं की

आइए एक बड़े WAP पोर्टल पर आगंतुकों के फोन मॉडल और स्क्रीन रिज़ॉल्यूशन देखें । जैसा कि आप ब्राउज़रों के बीच देख सकते हैं, ओपेरा मिनी एक बड़े अंतर से एक नेता है (हमें इसे पूरे विषय को समर्पित करने की आवश्यकता है, हम अब इस पर विचार नहीं करेंगे), और फिर ओएस के साथ या उसके बिना साधारण मोबाइल फोन। Android और iPhone बहुत कम% के कारण नहीं हैं

आइए स्क्रीन पर देखें। इसमें पहले दो पदों का अभाव है: 240x320, 128x160। यह हमें क्या बताता है?

लोगो 120 पिक्सेल तक चौड़ा होना चाहिए
पैडिंग और मार्जिन का उपयोग कारण के भीतर किया जाना चाहिए (बाएं से 40 पिक्सेल, यह कुछ है)
बहुत सारे ग्राफिक्स नहीं (128x160 के स्क्रीन एक्सटेंशन वाला फोन आपको लगता है कि यह एक भारी पृष्ठ खींचेगा?)

यह साइट का हेडर है:

<? xml version ="1.0" encoding ="UTF-8" ? > <! DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="ru" > < head >< title > Domain.com </ title > < meta http-equiv ="Content-Type" content ="application/xhtml+xml; charset=UTF-8" /> < link rel ="stylesheet" href ="style.css" type ="text/css" /> < link rel ="shortcut icon" href ="favicon.ico" /> </ head >

कभी-कभी वे नीचे से तीसरी पंक्ति नहीं लिखते हैं, लेकिन पृष्ठ पर <शैली> टैग के लिए पूरी सीएसएस की प्रतिलिपि बनाते हैं? क्यों? मुझे एक बड़े पोर्टल के मालिक से पता चला कि पुराना नोकिया एक अलग फ़ाइल के रूप में सीएसएस को संभाल नहीं सकता है (लेकिन इनमें से% बहुत छोटे हैं)।

दूसरा तल, जैसा कि आप समझते हैं, साइट आइकन के लिए जिम्मेदार है। एक नियमित 16x16 पिक्सेल PNG आइकन बना है और उसका नाम बदलकर favicon.ico कर दिया गया है

क्या आपने हेडर में XHTML शब्द देखा है? इसका मतलब यह है कि आपको इस भाषा के मार्कअप नियमों का सख्ती से पालन करना चाहिए, अन्यथा इसके परिणाम दुखद होंगे।

<Body> टैग में प्रदर्शित होने वाली सभी जानकारी <div> के अंदर होनी चाहिए, अन्यथा हमें एक सत्यापनकर्ता त्रुटि मिलती है (मैं यह सलाह देता हूं), बिल्कुल। यह याद रखने योग्य है कि <div id = ""> का उपयोग न करना बेहतर है, सत्यापनकर्ता फिर से शपथ ग्रहण करेगा। आपको आईडी को क्लास से बदलना चाहिए। कई वर्ग हो सकते हैं, जो बड़ी परियोजनाओं के लिए बहुत सुविधाजनक है। मैंने सत्यापनकर्ता के बारे में क्यों बात की? यदि साइट पर त्रुटियां हैं, तो तैयार रहें कि कुछ मोबाइल फोन साइट पर नहीं जा पाएंगे

त्रुटि उदाहरण:

बंद नहीं <br />, <hr />, <input /> आदि।
<img> टैग उस तरह से लिखा जाता है <img src = "" alt = "" />
<फॉर्म> टैग के अंदर प्रदर्शित होने वाली सभी जानकारी को <div> टैग में रखा जाना चाहिए, भले ही <फॉर्म> स्वयं div के अंदर ही हो।

< form action ="" method ="post" > < div > … </ div > </ form >

बाकी आपको सत्यापनकर्ता दिखाएगा

अब साइट को "स्ट्रिप" (औसतन 200-700px) बनाना संभव है, यह संभव है, लेकिन आप इसे 128x160 स्क्रीन पर फोन से नहीं देख पाएंगे। यह सुंदरता के लिए किया जाता है, जिसे केवल एक कंप्यूटर सराहना करेगा, लेकिन फिर भी आइए देखें कि इसे सही कैसे किया जाए (ऐसी साइटें हैं जहां डिजाइन एक पट्टी के साथ जाती है और बाईं ओर संरेखित होती है - यह मनहूस लगती है):

body { margin: 0 auto; max-width: 600px; }

लेकिन शास्त्रीय शैली का पालन करना बेहतर है, क्योंकि साइट मोबाइल उपकरणों के लिए है, न कि कंप्यूटरों के लिए

इनपुट गुणों को css में नहीं छूने की कोशिश करें, और यदि आवश्यक हो, तो इसे समझदारी से करें (उदाहरण के लिए पैरामीटर प्रकार = पाठ के साथ, अन्यथा वे एक सुंदर इनपुट फ़ील्ड बनाते हैं, और चेकबॉक्स, रेडियो घंटियाँ भयानक दिखती हैं)

रंगों के संयोजन के बारे में। अधिकांश बड़े प्रोजेक्ट 2-3 रंगों में डिजाइन करने की कोशिश करते हैं। कई रंगों को एक डिज़ाइन को कभी खराब नहीं किया जाता है अगर अच्छी तरह से संयुक्त हो। यह याद रखना चाहिए कि मोबाइल फोन की स्क्रीन पर डिज़ाइन कंप्यूटर पर नहीं दिखता है। कभी-कभी दिवा बहुत सुंदर दिखते हैं जो आसानी से रंग बदलते हैं (15-30px उच्च), लेकिन कीवर्ड, जैसा कि आप पहले ही समझ चुके हैं, "सुचारू रूप से" है। बहुत सारे ब्राउज़र खुद ही चित्रों को "संक्षिप्त रूप" (यहां तक कि पृष्ठभूमि वाले)। कल्पना कीजिए कि ऐसे ब्राउज़रों में #aaa से # 222 तक एक ढाल के साथ 20-पिक्सेल-उच्च छवि कैसी दिखती है। मैं आपको बताऊंगा - एक दो पिक्सेल की ऊँचाई वाली कई लाइनें होंगी। यह वास्तव में साइट डिज़ाइन की छाप को खराब करता है।

रंग और पृष्ठभूमि के बारे में जारी है। बहुत सारे "शिल्पकार" ऐसा करते हैं:

background: url(img.gif) repeat-x top left #ccc;

चित्र अपने आप में #ccb से #bbb तक एक ढाल है। दिवा की ऊंचाई 12 पिक्सेल है (उदाहरण के लिए, लिंक के साथ एक div "लॉगिन, रजिस्टर, अपना पासवर्ड भूल गए?"), लेकिन यह कंप्यूटर पर ऐसा दिखता है। दूसरा स्क्रीन एक्सटेंशन क्या है?

शायद यह स्पष्ट है, लेकिन यह बहुत आम है।

अगले विषय में मैं वास्तविक डिज़ाइनों पर विचार करूँगा और उनका विश्लेषण करूँगा, क्योंकि व्यवहार में (उदाहरणों में) सामग्री को बेहतर माना जाता है :)

UPD: इस तथ्य के कारण कि पृष्ठ में css डाला गया है, एक व्यक्ति ने मुझे ICQ में लिखा: “CSS पृष्ठ के अंदर डाली गई है ताकि यथासंभव नए कनेक्शन हों। क्योंकि पेज रेंडर करने की तुलना में कनेक्शन बनाने में अधिक समय लगता है। ”

मोबाइल उपकरणों के लिए वेबसाइट डिजाइन सुविधाएँ

More articles: