لماذا تنكسر صفحات الهبوط على الهاتف

معظم زياراتك تهبط على صفحات الهاتف

الزيارات المدفوعة من Meta و Instagram و TikTok تصل على هاتف، وغالبًا داخل متصفح التطبيق نفسه لا داخل Safari أو Chrome. وهذه النافذة أصغر مما تظن، وتتنازل عن جزء من الشاشة لشريطيها العلوي والسفلي. ومع ذلك ما زال المصممون يراجعون صفحات الهاتف على شاشة 27 بوصة بعرض كامل، ويعتمدونها، ولا يفتحونها أبدًا على هاتف Android متوسط عبر واي فاي فندق. نسخة سطح المكتب صارت هي الاستثناء اليوم. صمّم تخطيط الهاتف أولًا، ودع سطح المكتب يرث منه.

الهيرو ينكسر أولًا

ثلاثة أعمدة تتكدّس في شريط طويل من الفراغ. وعنوان بحجم 64 بكسل ينكسر إلى ستة أسطر ويدفع الزر خارج الشاشة. وصورة الهيرو العريضة تصغر حتى يتحول المنتج داخلها إلى لطخة. وأقسام بمسافات 120 بكسل على سطح المكتب تترك صاحب الهاتف يمرّر عبر فجوات فارغة. والأقسام بارتفاع 100vh يقصّها شريط أدوات المتصفح على iOS، ولهذا أُضيفت وحدتا svh و dvh. اضبط مقاييس خط ومسافات منفصلة لنقطة توقف الهاتف.

النماذج تخسر الناس لمسة بعد لمسة

تطلب Apple مساحة لمس لا تقل عن 44 في 44 نقطة، ويطلب Material Design 48dp. ومع ذلك ما زالت أزرار كثيرة على الهاتف تُنشر بارتفاع 32 بكسل وبجوارها رابط آخر على بعد ستة بكسلات. والحقول التي يقل خطها عن 16 بكسل تجعل Safari على iOS يكبّر الشاشة عند التركيز، فينحرف التخطيط جانبًا. ونوع الحقل الخطأ يعرض لوحة QWERTY كاملة لرقم هاتف. ثم تغطي لوحة المفاتيح زر الإرسال، فلا يعرف زائرك أن النموذج انتهى. اضبط أنواع الحقول الصحيحة وخصائص الإكمال التلقائي.

اختبر على هاتف حقيقي

عُدّ ما يغطي شاشة الهاتف في صفحة عادية: ترويسة ثابتة، وشريط ملفات تعريف الارتباط، وشريط عروض، وفقاعة محادثة في الزاوية، وزر ثابت في الأسفل. وهذه مجتمعة قد تأخذ ثلث الشاشة قبل أن يظهر أي محتوى. اختر عنصرًا ثابتًا واحدًا واحذف الباقي. ثم افتح الصفحة على هاتفك أنت، عبر بيانات الجوال، من رابط الإعلان الحقيقي، وداخل متصفح التطبيق. فمحاكاة الأجهزة في Chrome لن تريك شريط أدوات نافذة التطبيق ولا شبكة بطيئة.