ویب سائٹ کا موبائل ورژن: پہلے اور بعد کی مثالوں کے ساتھ 10 اصول

آن لائن اسٹور کے زیادہ تر وزیٹر فون سے آتے ہیں اور وہیں فیصلہ کرتے ہیں کہ خریدیں یا نہیں۔ یہاں موبائل ویب سائٹ کے 10 اصول پہلے اور بعد کی مثالوں کے ساتھ ہیں، اور Apple، Google اور WCAG کے مطابق بٹن اور فونٹ کے درست سائز بھی۔

موبائل ورژن «چھوٹی کی گئی» ویب سائٹ کیوں نہیں؟

فون پر لوگ انگلی سے ٹیپ کرتے ہیں، چھوٹی اسکرین پر پڑھتے ہیں اور اکثر ایک ہاتھ سے چلاتے ہیں۔ جو کمپیوٹر پر آرام دہ ہے، فون پر چھوٹا، تنگ اور الجھا ہوا ہو جاتا ہے۔ مزید یہ کہ Google سائٹس کو موبائل ورژن سے انڈیکس کرتا ہے، اس لیے تلاش اور فروخت دونوں اسی پر منحصر ہیں۔

مثالوں کے ساتھ 10 اصول

1. بٹن بڑے بنائیں

لوگ انگلی سے دباتے ہیں، کرسر سے نہیں۔ Apple کم از کم 44 × 44 pt کا ٹیپ حصہ، Android 48 × 48 dp تجویز کرتا ہے، اور رسائی کا معیار WCAG 2.2 کم از کم 24 × 24 px مقرر کرتا ہے۔

2. فونٹ بڑا کریں

جو کمپیوٹر پر ٹھیک ہے وہ فون پر پڑھا نہیں جاتا۔ مرکزی متن عموماً 16 px یا زیادہ رکھا جاتا ہے تاکہ زوم نہ کرنا پڑے؛ Google کا Lighthouse ان صفحات کو نشان زد کرتا تھا جہاں 40% سے زیادہ متن 12 px سے چھوٹا تھا۔

3. فاصلے کا خیال رکھیں

بلاکس جڑے ہوں تو اسکرین بھری اور سستی لگتی ہے۔ جتنا لگتا ہے اس سے زیادہ خالی جگہ چاہیے۔

4. بٹن ایک کے نیچے ایک رکھیں

فون پر دو بٹن ساتھ ساتھ تنگ ہو جاتے ہیں۔ پوری چوڑائی والے بٹن ایک کے نیچے ایک دبانے میں آسان ہیں اور غلط ٹیپ کم ہوتے ہیں۔

5. دکھائیں کہ سوائپ ہو سکتا ہے

اگر کارڈ سوائپ ہوتے ہیں تو یہ نظر آنا چاہیے: اگلے کارڈ کا کنارہ، نقطے یا تیر بتاتے ہیں کہ آگے اور ہے۔

6. مینو مختصر کریں

ہیڈر آدھی اسکرین نہ گھیرے۔ لوگو اور مینو بٹن والا مختصر ہیڈر اہم چیزوں کے لیے جگہ چھوڑتا ہے۔

7. ثانوی مواد چھپائیں

فون پر سب کچھ ایک ساتھ دکھانے کی ضرورت نہیں: اکارڈین، ٹیب اور «مزید دکھائیں» صفحہ صاف رکھتے ہیں۔ چھپائیں، حذف نہ کریں — Google موبائل ورژن انڈیکس کرتا ہے، اس لیے مواد ڈیسک ٹاپ جیسا ہونا چاہیے۔

8. رابطے قابلِ کلک بنائیں

فون نمبر اور ای میل ایک ٹیپ میں کھلنے چاہییں — اسی لیے tel: اور mailto: لنکس ہیں۔ «کال کریں» بٹن اور بھی آسان ہے۔

9. پہلی اسکرین پر بوجھ نہ ڈالیں

اوپر جگہ کم ہے: ایک سرخی، مختصر وضاحت اور ایک بنیادی عمل۔ بینر، رعایتیں اور سبسکرپشن نیچے۔

10. ڈیسک ٹاپ کی ہوبہو نقل نہ کریں

موبائل ورژن چھوٹی ویب سائٹ نہیں۔ بلاکس کی ترتیب بدلیں، تین کالم ایک بنائیں، فالتو ہٹائیں۔

Metriverra میں نظر آتا ہے کہ فون اور کمپیوٹر کے وزیٹر کیسے کنورٹ ہوتے ہیں، اس لیے آسانی سے جانچا جا سکتا ہے کہ موبائل بہتریوں سے فروخت بڑھی یا نہیں۔

خلاصہ

• بٹن کم از کم 44 × 44 pt (Apple) یا 48 × 48 dp (Android)؛ WCAG کم از کم 24 × 24 px۔
• مرکزی متن کم از کم 16 px، بلاکس کے درمیان فاصلے کے ساتھ۔
• بٹن پوری چوڑائی میں ایک کے نیچے ایک؛ رابطے ٹیپ سے کھلنے والے۔
• پہلی اسکرین پر ایک بنیادی عمل؛ ثانوی مواد اکارڈین میں۔
• موبائل نئی ترتیب ہے، چھوٹی سائٹ نہیں؛ مواد ڈیسک ٹاپ جیسا۔

ذرائع: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing