🎡 🌩️ 💅🏽 टैबलेट के लिए वेबसाइट अनुकूलन 💫 👩🏽 🌨️

इंटरनेट बदल रहा है, अधिक से अधिक डिवाइस डेस्कटॉप से भिन्न स्क्रीन आकार के साथ दिखाई दे रहे हैं। गोलियों की बिक्री लगातार बढ़ रही है , जिसका अर्थ है कि आज आप इन उपकरणों का उपयोग करने वाले उपयोगकर्ताओं की उपेक्षा नहीं कर सकते, आपको टेबलेट पर आसानी से देखने के लिए साइटों को अनुकूलित करने की आवश्यकता है।

विशेष वर्ण जोड़कर टाइपिंग में तेजी

आप प्रत्येक मामले में वर्चुअल कीबोर्ड के अतिरिक्त वर्णों को आवश्यक में बदल सकते हैं। उदाहरण के लिए, सादे पाठ में लिखते समय, हम विराम चिह्न देखते हैं:

और ईमेल पते में प्रवेश करते समय हम पात्रों को आवश्यक रूप से बदलते हैं:

मानक कीबोर्ड:

<input type="text">

URL पैरामीटर:

 <input type="url">

ईमेल प्रतीक:

 <input type="email">

न्यूमेरिक कीपैड:

 <input type="text" pattern="[09]*">

स्वत: सुधार और प्रारंभिक पूंजीकरण अक्षम करें

टैबलेट के वर्चुअल कीबोर्ड पर फॉर्म भरने की अपनी विशेषताएं हैं। विशेष रूप से, जब आप कई साइटों में प्रवेश करते हैं, तो आपको अपना ईमेल दर्ज करना होगा, और सिस्टम इसे आपके शब्दकोश के ज्ञान के अनुसार ठीक करने की कोशिश करेगा, और एक बड़े अक्षर के साथ लाइन भी शुरू करेगा। इसे रोकने के लिए, हम फॉर्म में सरल HTML कोड का उपयोग करते हैं:

 <input type="text" autocapitalize="off" autocorrect="off">

ब्लॉक की सही व्यवस्था

टैबलेट पर साइट के साथ उपयोगकर्ता इंटरैक्शन का तर्क डेस्कटॉप से अलग है। इंटरफ़ेस डिज़ाइन करते समय, इसे सबसे महत्वपूर्ण तत्वों पर ध्यान देते हुए ध्यान में रखा जाना चाहिए। यहां एक उदाहरण है जहां ऑनलाइन स्टोर वेबसाइट पर खोज फ़ॉर्म को बदल दिया गया है।

बहुत उथला:

अच्छा:

टाइपोग्राफी बदल जाती है

स्पष्ट बात: साइट को किसी विशेष उपकरण पर अच्छी तरह से पठनीय बनाने की आवश्यकता है। टैबलेट संस्करण के लिए, आपको पाठ को बढ़ाने की आवश्यकता है। आप उपयोगकर्ता को पाठ का आकार बदलने का सुझाव भी दे सकते हैं। नीचे एक उदाहरण है, बाईं ओर - अनुकूलन से पहले, दाईं ओर - के बाद:

बटन का आकार बदलें

टैबलेट और स्मार्टफ़ोन पर, हम स्पर्श नियंत्रण का उपयोग करते हैं, इसलिए आपको नेविगेशन तत्वों को अनुकूलित करने की आवश्यकता है। यह आमतौर पर बटन के आकार और क्लिक के सक्रिय क्षेत्र को बढ़ाने के लिए नीचे आता है।

टाइपिंग कम से कम करें

वर्चुअल कीबोर्ड पर टाइप करना बहुत सुविधाजनक नहीं है, इसलिए आपको उपयोगकर्ता के लिए इस तरह के काम की आवश्यकता को कम करना होगा। उदाहरणों में, उदाहरण के लिए, आप स्वतः पूर्ण (नाम के पहले अक्षर या जियोलोकेशन का उपयोग करके) का उपयोग कर सकते हैं:

हिंडोला स्पर्श करें

यदि साइट एक छवि हिंडोला का उपयोग करती है, तो इसे उसी द्वारा नियंत्रित किया जाना चाहिए:

अक्षम करना: हॉवर

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

परिदृश्य और चित्र स्क्रीन अभिविन्यास के लिए डिज़ाइन

साइट के साथ बातचीत करते समय उपयोगकर्ता परिदृश्य और पोर्ट्रेट ओरिएंटेशन दोनों में टैबलेट का उपयोग कर सकते हैं। इसलिए, इंटरफ़ेस को डिज़ाइन करते समय इसे ध्यान में रखना आवश्यक है।

कैमरा का उपयोग करना

टैबलेट हमारे लिए नई संभावनाएं खोलते हैं: उदाहरण के लिए, जब एक प्रोफ़ाइल भरते हैं, तो आप उपयोगकर्ता को टैबलेट कैमरा के साथ अवतार के लिए एक फोटो लेने की पेशकश कर सकते हैं:

 <input type="file" accept="image/*" capture="camera">

पता बार छुपाएं

टैबलेट का उपयोग करते समय, प्रत्येक पिक्सेल मायने रखता है, इसलिए आप उपयोग करने योग्य स्क्रीन क्षेत्र को बढ़ाने के लिए पता बार (सफारी में) छिपा सकते हैं:

 <meta name="apple-mobile-web-app-capable" content="yes" />

उपयोगी पठन और प्रयुक्त सामग्री

।

टैबलेट के लिए वेबसाइट अनुकूलन