Hardik Dewra
2 min read
Mobile पर landing pages क्यों टूटते हैं
फ़ोन पर hero, form और overlays हर बार एक ही तरह से बिगड़ते हैं। क्या जाँचें, और tap target तथा font size के वो numbers जो मायने रखते हैं।
आपका ज़्यादातर traffic mobile landing pages पर ही उतरता है
Meta, Instagram और TikTok से आया paid traffic फ़ोन पर उतरता है, और आमतौर पर Safari या Chrome में नहीं, बल्कि उसी app के अपने browser में। यह webview आपकी सोच से छोटा होता है, और अपनी ऊपर-नीचे की bars में भी screen ख़र्च कर देता है। Designers आज भी mobile landing pages 27 inch के monitor पर पूरी चौड़ाई में देखकर मंज़ूरी दे देते हैं, और उन्हें कभी होटल के wifi पर किसी mid-range Android में नहीं खोलते। अब असली अपवाद desktop वाला version है। पहले फ़ोन का layout बनाएँ और desktop को उसी से बनने दें।
सबसे पहले hero टूटता है
तीन columns एक के ऊपर एक चढ़कर ख़ालीपन की लंबी पट्टी बन जाते हैं। 64 pixels की headline छह लाइनों में टूट जाती है और button को screen से बाहर धकेल देती है। चौड़ी hero image इतनी छोटी हो जाती है कि उसके अंदर का product धब्बा बनकर रह जाता है। Desktop पर 120 pixels की दूरी वाले sections फ़ोन पर ख़ाली जगहों में scroll कराते रहते हैं। और iOS पर 100vh वाले sections browser toolbar से कट जाते हैं, जिसे ठीक करने के लिए ही svh और dvh units जोड़ी गई थीं। फ़ोन वाले breakpoint के लिए type scale और spacing अलग से तय करें।
Forms एक-एक tap पर लोग गँवाते जाते हैं
Apple कहता है कि touch targets कम से कम 44 by 44 points के हों, और Material Design 48dp माँगता है। बहुत सारे mobile CTAs आज भी 32 pixels ऊँचे बनकर जाते हैं, और उनसे छह pixels दूर एक और link बैठा होता है। 16 pixels से छोटे inputs पर focus आते ही iOS Safari zoom कर देता है, जिससे पूरा layout बग़ल में खिसक जाता है। ग़लत input type phone number के लिए भी पूरा QWERTY keyboard खोल देता है। फिर वही on-screen keyboard submit button को ढक लेता है, और आपके visitor को पता ही नहीं चलता कि form पूरा हो चुका है। सही input types और autocomplete attributes सेट करें।
असली फ़ोन पर test करें
गिनें कि आम page पर फ़ोन की screen कौन-कौन ढक रहा है: sticky header, cookie banner, promo bar, कोने में chat bubble और footer में sticky CTA। ये सब मिलकर content दिखने से पहले ही viewport का एक तिहाई खा जाते हैं। इनमें से एक चीज़ चुनें जो हमेशा दिखती रहे, बाक़ी हटा दें। फिर page अपने ही फ़ोन पर खोलें, mobile data पर, असली ad link से, और उसी app के in-app browser के अंदर। Chrome का device emulation आपको न webview की toolbar दिखाएगा और न धीमा network।
WeDesignLandingPages.com
A sub-brand of WeDesignBrands.Agency