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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2। डेस्कटॉप लेआउट डिज़ाइन करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

हेडर इमेज सौजन्य से

बोगदान रैंकी

बोगदान इंसपायर्ड मैग का एक संस्थापक सदस्य है, जिसके पास इस अवधि में लगभग 6 वर्षों का अनुभव है। अपने खाली समय में वह शास्त्रीय संगीत का अध्ययन करना और दृश्य कला का पता लगाना पसंद करते हैं। वह भी Fixies के साथ काफी जुनूनी है। वह पहले से ही 5 का मालिक है।