स्मार्ट वेब फॉर्म के लिए क्वेस्ट

ऑनलाइन फॉर्म सही होने के लिए वेबसाइट के विकास के सबसे मुश्किल क्षेत्रों में से एक हैं, खासकर इतनी सारी चीजों के साथ जो गलत हो सकती हैं। लोग ऑनलाइन सामग्री तक कैसे पहुँचते हैं, इसकी बदलती प्रकृति का एक ऐसी तकनीक पर प्रभाव पड़ा है जो वर्षों पहले विकसित हुई थी, लोगों को एक फोन के साथ सक्षम होने की उम्मीद थी जो वे केवल एक कंप्यूटर के साथ करते थे। यह एक ऐसी तकनीक है जिस पर बहुत कम विकास हुआ है।

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

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

इस लेख में हम वेब फॉर्म डिज़ाइन की कला पर एक नज़र डालेंगे, और देखें कि क्या हम अपने वेब फॉर्म को बनाने के तरीके को खोज सकते हैं कि वे कैसे दिखते हैं और कैसे काम करते हैं।

वेब फॉर्म निर्माण के उपकरण

हमारे वेब प्रपत्रों को एक साथ रखने के लिए ब्राउज़र डेवलपर्स और W3C द्वारा हमें जो मानक उपकरण दिए गए हैं, वे बिल्कुल आदर्श नहीं हैं, और सीएसएस को लागू करने से पहले, वे वास्तव में बल्कि छिपे हुए हैं। यह वही है जो वे दिखते हैं:

एक अन्य मानक इनपुट नियंत्रण भी कहा जाता है चयन, लेकिन आपको इसका उपयोग करने से बचना चाहिए जब तक कि अंतरिक्ष की बचत एक गंभीर चिंता का विषय नहीं है। चयनित नियंत्रण द्वारा निष्पादित कार्य को संभालने के बेहतर तरीके हैं, जैसा कि हम बाद में चर्चा करेंगे। जब संभव हो तो Textarea नियंत्रण से भी बचना चाहिए क्योंकि वे बहुत समस्याग्रस्त और पुरातनपंथी हैं।

इन मानक इनपुट आइटमों के अलावा, HTML5 के लिए विशेष नए बनाए गए हैं। सिवाय जब कोई दस्तावेज़ आंतरिक उपयोग के लिए सख्ती से तैयार किया जा रहा हो और जहाँ ब्राउज़र वातावरण ज्ञात हो, केवल फ़ायरफ़ॉक्स और क्रोम दोनों में काम करने वाले घटकों का उपयोग किया जाना चाहिए। यह अच्छा है अगर एक घटक अन्य ब्राउज़रों में भी काम करता है, लेकिन यह नहीं होना चाहिए केवल अन्य ब्राउज़रों में काम करते हैं। फ़ायरफ़ॉक्स में दिखाई देने वाले HTML5 घटक यहां दिए गए हैं:

और क्रोम में उनकी थोड़ी अलग उपस्थिति:

अब, स्पष्ट रूप से यह जानना महत्वपूर्ण है कि Chrome और फ़ायरफ़ॉक्स के बीच आपके HTML5 इनपुट अलग-अलग दिखेंगे और कार्य करेंगे, लेकिन वे अभी भी काम करेंगे। मानक इनपुट नियंत्रण भी फ़ायरफ़ॉक्स की तुलना में क्रोम में थोड़ा अच्छे लगते हैं। ध्यान दें कि Chrome उत्तर अमेरिकी दिनांक मानक लागू करता है, जिसे उपयोगकर्ता सराहना नहीं कर सकते हैं। साथ ही दिनांक नियंत्रण का Chrome संस्करण प्रदर्शन के लिए अनुपयुक्त बनाता है, और इसे केवल इनपुट के लिए उपयोग किया जाना चाहिए। Chrome में दिनांक-पिकर का जोड़ मुख्य सुधार है, लेकिन हम संभवतः फ़ायरफ़ॉक्स के भविष्य के संस्करणों में इसे देखने की उम्मीद कर सकते हैं।

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

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

बूटस्ट्रैप का (लगभग पर्याप्त) उत्तर

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

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

बूटस्ट्रैप आपको नियंत्रणों को एक साथ संयोजित करने देता है। कभी यह अच्छा है और कभी इतना अच्छा नहीं है। एक बटन और एक चेकबॉक्स के साथ एक पाठ इनपुट का संयोजन अच्छा लग सकता है, लेकिन यह उपयोगकर्ता को भ्रमित कर सकता है कि उन्हें इस तरह के अपरिचित नियंत्रण के साथ कैसे बातचीत करनी चाहिए।

बूटस्ट्रैप जो प्रदान करता है, वह मेरे दो पसंदीदा निर्माण उपकरणों में से एक है, पैनल और अच्छी तरह से। ये डेटा को समूहीकृत करने के लिए बहुत उपयोगी होते हैं, जिससे यह संकेत मिलता है कि डेटा किस डेटा से संबंधित है, और डेटा को अलग करने के लिए भी।

स्मार्ट फॉर्म बिल्डिंग 101

अब हम इस बारे में सोचने के लिए तैयार हैं कि किस प्रकार स्मार्ट तरीके से प्रपत्रों का निर्माण किया जा सकता है। ऐसा करने के लिए, हमें चूक से पहले अच्छी तरह से सोचने की जरूरत है। हमें इसके बारे में जागरूक होने की आवश्यकता है desktopप्रपत्र नियंत्रण की बाध्य जड़ें, और मोबाइल संगतता की आवश्यकता भी। और हमें उपयोगिता और सत्यापन (यदि फॉर्म का उपयोग डेटा संग्रह के लिए किया जाएगा) जैसी चीजों के बारे में ध्यान देने की आवश्यकता है।

वह अंतिम बिंदु एक अच्छा है, क्योंकि इनपुट एकत्र करने के लिए फॉर्म नियंत्रण का उपयोग किया जाता है, लेकिन उनका उपयोग संग्रहीत डेटा प्रदर्शित करने के लिए भी किया जाता है। औसत वेब उपयोगकर्ता इसमें शामिल होने में अधिक रुचि रखता है (और होना चाहिए)।formatमें देने की तुलना में आप से आयनformatआप के लिए आयन।

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

1। क्या हमें एक फॉर्म की आवश्यकता है?

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

एक फॉर्म आवश्यक है यदि:

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

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

भले ही, तालिकाओं की तुलना में मोबाइल प्रदर्शन के लिए रूप अधिक अनुकूल हों। इसलिए यदि आपको वास्तव में यह सुनिश्चित करना चाहिए कि सभी डेटा आसानी से मोबाइल डिस्प्ले पर देखे जा सकते हैं, तो फॉर्म टेबल की तुलना में बेहतर विकल्प हैं ... कभी-कभी!

2. डिजाइन करें desktop ख़ाका

यह सच है कि सामान्य तौर पर आप पहले मोबाइल लेआउट को डिज़ाइन करते हैं, लेकिन जब यह रूपों की बात आती है, तो यह सबसे अच्छा तरीका नहीं है, क्योंकि हमें यह जानना होगा कि डेटा कैसे समूहीकृत होने वाला है, और हम केवल यही कर सकते हैं कि यदि हम सभी क्षेत्रों को एक साथ देख सकते हैं, जो कि एक ऐसा मोबाइल है जिसे तब तक नहीं किया जा सकता जब तक आप इतने कम डेटा को प्रदर्शित नहीं कर रहे हैं कि हमें फ़ॉर्म को डिज़ाइन करने में परेशान न हों।

प्रपत्र डिज़ाइन का मज़ाक उड़ाने का सबसे तेज़ तरीका इंकस्केप है। इस उदाहरण में, हम मानव संसाधन रिकॉर्ड के प्रबंधन के लिए एक प्रणाली का निर्माण करेंगे। यहाँ के लिए नकली है desktop प्रोटोटाइप:

बाहरी आयत 1024 x 768 px डिस्प्ले के पूरे स्थान का प्रतिनिधित्व करता है। किसी पे desktop जब तक उपयोगकर्ता पूर्ण स्क्रीन मोड में न हो (जो कि शायद ही कभी होता है) ब्राउज़र, हमारे पास इतने सारे पिक्सेल तक पहुंच नहीं है। तो हमारा

डिज़ाइन 900 x 600px है, जो अधिकांश . के उपलब्ध क्षेत्र में फ़िट होना चाहिए desktop स्क्रीन।

जब उपलब्ध क्षेत्र 900px चौड़े से कम है, तो हमारे 2 x 450px कॉलम टूटेंगे और एक निरंतर 450px कॉलम के रूप में दिखाई देंगे। यह मोबाइल संगतता की समस्या को हल करता है, कम से कम जब तक Google हमारी सभी साइटों को कलाई-घड़ी स्क्रीन पर फिट करने में सक्षम बनाता है।

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

हमारे कॉलम वास्तव में 450px से थोड़े अधिक होंगे, प्रत्येक 600px की तरह, लेकिन अगर हम कॉलम की चौड़ाई 450px के बारे में होना चाहते हैं, तो हम 6 से 5 पर अपने कॉलम का आकार कम कर सकते हैं। लेकिन एक 600px स्तंभ को मोबाइल स्क्रीन पर पोर्ट्रेट मोड में बिना लपेटे, वैसे भी फिट होना चाहिए।

हम इस कोड के साथ अपने लेआउट का परीक्षण करेंगे:

और हम देख सकते हैं कि सब कुछ अच्छा लग रहा है (क्योंकि अस्थायी रूप से हमें दिखाने के लिए हमने सीमाएँ जोड़ी हैं)।

लिनक्स स्क्रीन शासक विजेट स्पष्ट रूप से वेब पेज का हिस्सा नहीं है, लेकिन यह हमें दिखाने के लिए है कि हमारे कॉलम छोटे डिस्प्ले पर बुरी तरह से नहीं टूटेंगे। आइए विभिन्न सामान्य स्क्रीन चौड़ाई पर क्या होता है:

3। कस्टम इनपुट आकार और लेबल स्थिति बनाना

यदि हम बिना किसी कस्टम सीएसएस को जोड़े, डिफ़ॉल्ट रूप से सब कुछ छोड़ देते हैं, तो यही होगा जब हम अपनी इनपुट नियंत्रण की पहली पंक्ति जोड़ते हैं:

ऐसा इसलिए होता है क्योंकि प्रत्येक इनपुट के लिए लेबल इनपुट के बाईं ओर डिफॉल्ट करता है, और क्योंकि हमने इनपुट नियंत्रण के लिए कोई कस्टम चौड़ाई निर्धारित नहीं की है। हम CSS के साथ दोनों समस्याओं को ठीक कर सकते हैं।

अब हम केवल लेबल तत्वों की प्रदर्शन संपत्ति को "ब्लॉक" में सेट करते हैं, फर्स्ट और लास्ट के फील्ड को "in40w" में सेट करते हैं, और फील्ड एमआई को क्लास से "in10w" में सेट करते हैं, और सब कुछ बहुत अच्छा लगना चाहिए।

जैसा कि आप देख सकते हैं, यह बेहतर दिखता है, लेकिन लेआउट अब सही नहीं है। अब बक्से को ढेर कर दिया जाता है। तो हम कैसे ठीक करते हैं जो लेबल तत्व का उपयोग करने के विचार से दूर है, क्योंकि हमें वास्तव में इसकी आवश्यकता नहीं है। हम अभी आवेदन करेंगे in40w और in10w कक्षाएं, प्लस नामक एक नई कक्षा बनाती हैं inLeftOf.

जो, एक बार लागू होने पर, हमने पहले देखी गई समस्या को ठीक कर दिया, जैसे:

लेकिन यह एसएसएन क्षेत्र के लिए पर्याप्त जगह नहीं छोड़ रहा है। ऐसा इसलिए है क्योंकि हमारा बायाँ स्तंभ अपेक्षा से बड़ा है, इसलिए 40% वास्तव में इन क्षेत्रों के लिए हमारी ज़रूरत से ज़्यादा जगह है, इसलिए हम वास्तव में उन्हें काट सकते हैं in30w, और मध्य क्षेत्र जितना होना चाहिए, उससे बड़ा है, इसलिए हम इसे बना सकते हैं in5w। यहाँ क्या होता है:

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

इस अवस्था से कुछ चीजें हुई हैं। पहला कॉलम (rgb (235,235,246)) के लिए बैकग्राउंड कलर सेट करने का आसान हिस्सा था, और हालाँकि आप इसे यहाँ नहीं देख सकते हैं, सभी इनपुट्स के लिए टेक्स्ट का कलर #427DB4, और फॉन्ट-वेट पर सेट किया गया है। आंखों के तनाव को कम करने के लिए बोल्ड सेट किया गया था। सीएसएस टेक्स्ट-ट्रांसफ़ॉर्म प्रॉपर्टी का उपयोग करके टेक्स्ट को स्वचालित रूप से अपरकेस में बदलने के लिए सेट किया गया था, ताकि डेटा प्रविष्टि में तेजी आए और त्रुटियों को कम किया जा सके।

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

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

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

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

इस परियोजना के सफल होने के लिए, इसे परिपूर्ण प्रदान करना था responsiveसभी आधिकारिक प्रदर्शन आकारों पर नेस। आइए देखें कि परिणाम कैसा निकला। पहले पूर्ण रिज़ॉल्यूशन संस्करण के साथ:

यह प्रोटोटाइप के काफी करीब है कि हम इससे संतुष्ट हो सकते हैं। वास्तव में, यह एक सुधार भी है। अब देखते हैं responsive पृष्ठ के विभिन्न अनुभागों में से प्रत्येक पर लेआउट:

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

आपको सबसे छोटे स्क्रीन आकार पर सबसे छोटी स्क्रीन के आकार में कुछ मामूली गड़बड़ियां मिल सकती हैं (इस परियोजना के मामले में, पहली पंक्ति में मध्य प्रारंभिक क्षेत्र आदर्श से थोड़ा छोटा है), लेकिन मोबाइल उपयोगकर्ता आमतौर पर स्वीकार करें कि यह उनके फोन को ठीक से नहीं रखने के लिए किया जाने वाला व्यापार है।

इसे सही करें, और आपके डेटा फॉर्म इस तरह दिख सकते हैं:

इसके बजाय, उह, यह:

हेडर इमेज सौजन्य से तिमो कुर्तेल