रिस्पॉन्सिव फ़ॉर्म: हर स्क्रीन साइज़ के लिए डिज़ाइन

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

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

मोबाइल फ़ॉर्म डेस्कटॉप फ़ॉर्म से अलग होते हैं

मोबाइल यूज़र फ़ॉर्म डेस्कटॉप यूज़र से अलग तरह से भरते हैं। डेस्कटॉप पर जगह होती है। आप मल्टी-कॉलम लेआउट इस्तेमाल कर सकते हैं। लेबल को फ़ील्ड के बगल में रख सकते हैं। मोबाइल पर हर पिक्सल मायने रखता है।

मोबाइल कीबोर्ड बहुत बड़े होते हैं। कीबोर्ड खुलने पर वह आधी स्क्रीन ढक लेता है। आपका फ़ॉर्म स्क्रॉल होता है। यूज़र संदर्भ खो देता है। जो बटन पहले दिख रहा था, वह अब कीबोर्ड के पीछे छिप जाता है।

टच टारगेट बड़े होने चाहिए। माउस के लिए 14 गुणा 14 पिक्सल का क्लिक एरिया ठीक है। उंगली के लिए कम से कम 48 गुणा 48 पिक्सल चाहिए, वरना यूज़र चूक जाएगा।

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

सिंगल-कॉलम फ़ॉर्म लेआउट

सबसे सुरक्षित रिस्पॉन्सिव फ़ॉर्म सिंगल-कॉलम वाला है। स्क्रीन कोई भी हो, हर पंक्ति में एक फ़ील्ड।

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

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

सिंगल-कॉलम लेआउट बनाने के लिए input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; } इस्तेमाल करें। इससे हर ब्रेकपॉइंट पर सब कुछ ऊपर-नीचे लग जाता है।

डेस्कटॉप पर दो कॉलम, मोबाइल पर सिंगल कॉलम

अगर आप बड़ी स्क्रीन पर आड़ी जगह इस्तेमाल करना चाहते हैं, तो .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } वाली ग्रिड और मीडिया क्वेरी @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } } इस्तेमाल करें। डेस्कटॉप पर इससे दो कॉलम बनते हैं, और मोबाइल पर वे एक के नीचे एक आ जाते हैं, जिससे लेआउट सरल और रिस्पॉन्सिव रहता है।

सिर्फ़ वही फ़ील्ड साथ रखें जो सच में जुड़े हों। "First Name" और "Last Name" फ़ील्ड साथ-साथ ठीक लगते हैं। "Street Address" और "Country" फ़ील्ड साथ-साथ ठीक नहीं लगते।

टच टारगेट और उंगली के हिसाब से डिज़ाइन

मोबाइल पर न्यूनतम टच टारगेट 44 गुणा 44 पिक्सल (मोबाइल प्लेटफ़ॉर्म के दिशानिर्देश के अनुसार) या 48 गुणा 48 पिक्सल है। कम से कम 44 रखें।

टच टारगेट का साइज़ इन पर लागू होता है: इनपुट फ़ील्ड, जिन्हें आसानी से टैप करने लायक ऊंचा होना चाहिए (40 से 50 पिक्सल अच्छा है); चेकबॉक्स और रेडियो बटन, जो डिफ़ॉल्ट रूप से 13 गुणा 13 पिक्सल के होते हैं और CSS या JavaScript से कम से कम 44 गुणा 44 तक बढ़ाने चाहिए; बटन, जो पैडिंग जोड़कर कम से कम 44 गुणा 44 पिक्सल के हों; और लेबल, जो for एट्रिब्यूट से क्लिक होते हों तो उन्हें भी 44 गुणा 44 पिक्सल का होना चाहिए। कभी-कभी लेबल और इनपुट मिलकर पूरा टच टारगेट बनाते हैं।

इनपुट फ़ील्ड को बड़ा और टैप करने में आसान बनाने के लिए input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; } इस्तेमाल करें। पैडिंग से फ़ील्ड ऊंचा होता है और टैप करना आसान होता है।

कीबोर्ड को संभालना

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

अपना फ़ॉर्म पेज के ऊपर की तरफ़ रखें। या सबमिट बटन नीचे के साथ ऊपर भी रखें। ज़रूरी बटन को कीबोर्ड के नीचे न छिपने दें।

कीबोर्ड का प्रकार भी मायने रखता है। ईमेल फ़ील्ड के लिए <input type="email"> इस्तेमाल करें, ताकि @ कुंजी वाला ईमेल कीबोर्ड दिखे। फ़ोन फ़ील्ड के लिए <input type="tel"> इस्तेमाल करें, ताकि नंबर कीबोर्ड दिखे। संख्या वाले इनपुट के लिए <input type="number"> इस्तेमाल करें, ताकि नंबर कीबोर्ड दिखे। सही इनपुट टाइप से ब्राउज़र कीबोर्ड का चुनाव अपने आप संभाल लेता है।

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

मोबाइल पर लेबल की जगह

डेस्कटॉप पर लेबल फ़ील्ड के ऊपर, बगल में या अंदर हो सकते हैं। मोबाइल पर लगभग हमेशा ऊपर सबसे अच्छा रहता है।

फ़ील्ड के ऊपर का लेबल साफ़ होता है। यूज़र पहले लेबल देखता है, फिर इनपुट। संकरी स्क्रीन पर इनपुट के बगल का लेबल आड़ी जगह बर्बाद करता है। फ़ील्ड के अंदर का प्लेसहोल्डर टाइप शुरू करते ही गायब हो जाता है।

सबसे अच्छा तरीका: लेबल हमेशा फ़ील्ड के ऊपर रखें।

<label for="email">Email</label>

<input type="email" id="email">

स्पेसिंग और पैडिंग

रिस्पॉन्सिव फ़ॉर्म को मोबाइल पर ज़्यादा स्पेसिंग चाहिए, कम नहीं। आपकी सहज इच्छा होगी कि सब कुछ स्क्रीन में समाने के लिए दबा दें। उस इच्छा से लड़ें।

खुली पैडिंग और मार्जिन इस्तेमाल करें: फ़ील्ड के बीच कम से कम 1rem (16 पिक्सल), इनपुट पैडिंग में चारों तरफ़ कम से कम 0.75rem (12 पिक्सल), और बटन पैडिंग में चारों तरफ़ कम से कम 1rem (16 पिक्सल)। खुली स्पेसिंग से फ़ॉर्म इस्तेमाल करना आसान होता है, गलत टैप कम होते हैं, पढ़ना बेहतर होता है, और मोबाइल पर सांस लेने की जगह स्क्रीन की जगह से ज़्यादा कीमती है।

मोबाइल पर टेक्स्ट साइज़

इनपुट फ़ील्ड के लिए कम से कम 16 पिक्सल रखें। छोटा टेक्स्ट यूज़र को ज़ूम करने या आंखें सिकोड़ने पर मजबूर करता है। 16 पिक्सल डिफ़ॉल्ट है और यह ठीक चलता है।

लेबल छोटे हो सकते हैं, लगभग 14 पिक्सल। पर इनपुट फ़ील्ड कम से कम 16 पिक्सल के होने चाहिए।

कुछ ब्राउज़र 16 पिक्सल से छोटे इनपुट पर टैप करने से अपने आप ज़ूम कर देते हैं, जिससे फ़ॉर्म अचानक उछल जाता है और ज़ूम हो जाता है। इससे बचने के लिए input { font-size: 16px; } इस्तेमाल करें।

रिस्पॉन्सिव फ़ॉर्म की आम गलतियां

हर स्क्रीन साइज़ पर दो-कॉलम लेआउट इस्तेमाल करना

मोबाइल पर फ़ॉर्म दब जाते हैं। फ़ील्ड बहुत छोटे हो जाते हैं। लेबल बेढंगे तरीके से लगते हैं। छोटे ब्रेकपॉइंट पर हमेशा एक कॉलम में लगाएं।

टच टारगेट बहुत छोटे रखना

चेकबॉक्स, रेडियो बटन और बटन कम से कम 44 गुणा 44 पिक्सल के होने चाहिए। असली फ़ोन पर टेस्ट करें। अगर टैप करने के लिए ध्यान लगाना पड़े, तो वह बहुत छोटा है।

प्लेसहोल्डर टेक्स्ट को अकेला लेबल बनाना

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

फ़ॉर्म को लंबे पेज के नीचे रखना

यूज़र कॉन्टैक्ट फ़ॉर्म तक नीचे स्क्रॉल करता है, ईमेल फ़ील्ड पर टैप करता है, और मोबाइल कीबोर्ड फ़ॉर्म को ढक लेता है। वे देख नहीं पाते कि क्या टाइप कर रहे हैं और न ही सबमिट बटन तक पहुंच पाते हैं। फ़ॉर्म ऊपर की तरफ़ रखें या पक्का करें कि कीबोर्ड के साथ भी वे स्क्रीन पर समाएं।

असली मोबाइल डिवाइस पर टेस्ट न करना

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

रिस्पॉन्सिव फ़ॉर्म की तकनीकें

लचीले लेआउट के लिए CSS Grid

.form-group { display: grid; gap: 0.5rem; } और .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } इस्तेमाल करें। auto-fit और minmax वैल्यू ऐसा लेआउट बनाती हैं जो उपलब्ध जगह के हिसाब से बहता है, जिससे संकरी चौड़ाई पर फ़ील्ड ऊपर-नीचे लगते हैं और चौड़ी चौड़ाई पर अगल-बगल।

बटन लेआउट के लिए Flexbox

.form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } और .form-actions button { flex: 1; min-width: 150px; } इस्तेमाल करें। बटन डेस्कटॉप पर साथ-साथ रहते हैं, मोबाइल पर कई पंक्तियों में बंट जाते हैं, और हर बटन उपलब्ध जगह भरने के लिए फैलता है।

खास ब्रेकपॉइंट के लिए मीडिया क्वेरी

480 पिक्सल से छोटी स्क्रीन पर सिंगल-कॉलम लेआउट पक्का करने के लिए @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } } इस्तेमाल करें।

WEMASY में फ़ॉर्म और स्क्रीन साइज़

WEMASY में फ़ॉर्म टूल है, और आप फ़ॉर्म सीधे अपनी वेबसाइट पर बना सकते हैं। आप मुफ़्त में शुरू कर सकते हैं और पेड प्लान 7 दिन आज़मा सकते हैं। प्रकाशित करने से पहले अपना फ़ॉर्म हमेशा असली फ़ोन पर भी देखें।

अपने WEMASY प्लान के बारे में जानें।

अक्सर पूछे जाने वाले सवाल