ওয়েবসাইটের মোবাইল সংস্করণ: আগে-পরের উদাহরণসহ ১০টি নিয়ম

অনলাইন স্টোরের বেশিরভাগ ভিজিটর ফোন থেকে আসেন এবং সেখানেই কেনার সিদ্ধান্ত নেন। এখানে মোবাইল ওয়েবসাইটের ১০টি নিয়ম আগে-পরের উদাহরণসহ, আর Apple, Google ও WCAG অনুযায়ী বোতাম ও ফন্টের সঠিক মাপ।

মোবাইল সংস্করণ কেন «ছোট করা» সাইট নয়?

ফোনে মানুষ আঙুলে চাপে, ছোট পর্দায় পড়ে এবং প্রায়ই এক হাতে চালায়। কম্পিউটারে যা আরামদায়ক, ফোনে তা ছোট, ঘিঞ্জি আর অস্পষ্ট হয়ে যায়। তাছাড়া Google সাইট ইনডেক্স করে মোবাইল সংস্করণ দিয়ে, তাই সার্চ আর বিক্রি দুটোই এর ওপর নির্ভর করে।

উদাহরণসহ ১০টি নিয়ম

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