هفته‌ای چند بار گزارش تحلیلی سایتی را باز می‌کنم که بیش از هفتاد درصد ترافیکش از موبایل می‌آید، ولی همه تصمیم‌های طراحی و بهینه‌سازی‌اش برای دسکتاپ گرفته شده. نتیجه این عدم توازن، یک تجربه موبایل نیمه‌کاره است: چیدمانی که فقط جمع شده، سرعتی که فقط در دسکتاپ خوب است، و فرمی که روی گوشی رها می‌شود. بهینه‌سازی سایت برای موبایل (mobile optimization) یک کار تک‌لایه نیست؛ مجموعه‌ای از تصمیم‌هاست که در هفت لایه مختلف هم‌زمان گرفته می‌شوند. در ادامه همان هفت لایه را می‌گویم و در هر لایه، چیزی که در پروژه‌های واقعی به بیشترین اثر رسیده است.

لایه اول: viewport و چیدمان پایه

اولین چیزی که در هر پروژه بررسی می‌کنم، وجود متاتگ viewport در <head> است. نبود یا ناقص بودن این تگ یعنی مرورگر موبایل، صفحه را با عرض دسکتاپ فرض می‌کند و کاربر یک سایت ناخوانا با ژست زوم می‌بیند.

<meta name="viewport" content="width=device-width, initial-scale=1">

در وردپرس، اگر قالب استاندارد باشد این تگ در header.php قرار دارد. اگر نداشت، در چایلد‌تم اضافه کنید. جزئیات مفهوم را در طراحی ریسپانسیو چیست و چرا ضروری است آورده‌ام؛ تفاوت بین viewport درست و غلط، یکی از بنیادی‌ترین دلایل تفاوت تجربه موبایل سایت‌هاست.

لایه دوم: طراحی موبایل‌فرست (mobile-first)

موبایل‌فرست یعنی طرح را از عرض کوچک شروع کنید و به عرض‌های بزرگ‌تر گسترش دهید، نه برعکس. تفاوت این دو رویکرد در پروژه‌ها دو نتیجه دارد: طرح موبایل‌فرست روی گوشی طبیعی به نظر می‌رسد چون خودش روی عرض کوچک متولد شده؛ طرح دسکتاپ‌محور روی گوشی همیشه کمی شبیه یک سایت فشرده‌شده است. روش‌های عملی در مزایای طراحی موبایل اول آمده است.

در عمل، اگر مشتری با محدودیت بودجه می‌آید، این ترتیب اقتصادی‌ترین راه است: طرح موبایل را دقیق و آماده کنید، بعد آن را به تبلت و دسکتاپ گسترش دهید. اگر برعکس عمل کنید، در آخرین مرحله باید برای موبایل بازطراحی کنید که عملاً همان بازنویسی کامل است.

سایتی که ابتدا برای دسکتاپ طراحی شده و بعد به موبایل کشیده شده، در موبایل همیشه کمی غمگین به نظر می‌رسد.

لایه سوم: سرعت و Core Web Vitals

سرعت موبایل، یک لایه جدا از بقیه نیست؛ نتیجه تصمیم‌های سه لایه دیگر (تصاویر، فونت، جاوااسکریپت) است. سه متریک اصلی موبایل: LCP (Largest Contentful Paint) که باید زیر ۲.۵ ثانیه باشد، INP (Interaction to Next Paint) که باید زیر ۲۰۰ میلی‌ثانیه باشد و CLS (Cumulative Layout Shift) که باید زیر ۰.۱ باشد. توضیح هر سه با آستانه‌های رسمی در Core Web Vitals چیست آمده است.

ترتیب عملی بهبود سرعت موبایل، همان نقشه شش‌لایه‌ای است که در افزایش سرعت وردپرس کشیده‌ام. اما چیزی که در موبایل مخصوصاً اهمیت دارد: قالب. یک قالب سبک روی گوشی میان‌رده، تفاوت محسوسی با یک قالب چندمنظوره سنگین دارد. اگر مطمئن نیستید گلوگاه سرور است یا قالب، مسیر تشخیص در تأثیر هاست بر سرعت سایت و عیب‌یابی مشکلات سرعت سایت آمده است. برای فارسی، فونت‌ها هم منبع مهم بایت هستند؛ موضوعی که در بهینه‌سازی تایپوگرافی موبایل جداگانه باز کرده‌ام.

لایه چهارم: تایپوگرافی

تایپوگرافی موبایل یکی از رایج‌ترین دلایل شکست تجربه است، چون به‌سادگی نادیده گرفته می‌شود. سه قاعده پایه: اندازه فونت بدنه زیر ۱۶ پیکسل نباشد، ارتفاع خط بین ۱.۷ تا ۱.۸ برابر اندازه فونت، و حاشیه افقی بین ۲۰ تا ۲۴ پیکسل. برای فارسی، نیم‌فاصله را در همه جا حفظ کنید و از فونت با وزن‌های چندگانه استفاده کنید تا تفکیک بصری متن و تیتر حفظ شود. قالب‌های خارجی که RTL را تقریبی می‌سازند، اغلب در فونت فارسی به مشکل می‌خورند؛ اگر با این مسئله روبه‌رو هستید، آماده‌سازی قالب برای فارسی را ببینید.

لایه پنجم: تعامل و انگشت

روی موبایل، کاربر با انگشت شست کار می‌کند، نه ماوس. این واقعیت، سه تصمیم طراحی را تعیین می‌کند. اول، دکمه‌های اصلی باید در محدوده‌ای باشند که شست به‌راحتی به آن برسد، یعنی نه در گوشه بالای صفحه و نه چسبیده به لبه پایین. دوم، اندازه تپ‌تارگت‌ها نباید زیر ۴۴ پیکسل باشد (استاندارد اپل؛ اندروید ۴۸ پیکسل را توصیه می‌کند). سوم، منوها و مودال‌ها باید با یک لمس باز و بسته شوند، نه با کشیدن یا نگه‌داشتن. برای سایت‌های شرکتی، این تصمیم‌ها مستقیماً روی نرخ تبدیل فرم تماس اثر می‌گذارد؛ نکات بیشتر در طراحی UI برای موبایل آمده است.

لایه ششم: فرم‌ها روی موبایل

فرم موبایل، یکی از بزرگ‌ترین قاتل‌های نرخ تبدیل است. سه اصل:

  1. فیلدها را کم کنید. هر فیلد اضافه، احتمال رها‌کردن فرم را بالا می‌برد.
  2. برای هر فیلد، type مناسب بگذارید تا کیبورد درست بیاید (tel برای تلفن، email برای ایمیل، number برای عدد).
  3. در فرم‌های تسویه و پرداخت، از autocomplete استاندارد استفاده کنید تا کاربر کمتر تایپ کند.

جزئیات بیشتر در بهینه‌سازی فرم‌های سایت برای تبدیل آمده است. برای اتصال درست SMTP (ارسال ایمیل از سایت) که روی فرم‌ها اثر دارد، رفع مشکلات SMTP در وردپرس راهگشاست.

لایه هفتم: سئوی موبایل

گوگل از سال‌ها پیش به ایندکس موبایل‌اول (mobile-first indexing) مهاجرت کرده؛ یعنی نسخه موبایل سایت شما معیار داوری اصلی گوگل است. سه نکته کلیدی:

  • محتوای صفحه موبایل با دسکتاپ یکسان باشد (نسخه موبایل بدون بخشی از محتوا، جریمه دارد).
  • هیچ عنصری نباید روی موبایل پنهان بماند، مگر اینکه در ظاهر باشد اما در HTML موجود باشد. جزئیات در سئو تکنیکال از خزش تا ایندکس آمده است.
  • داده ساختاریافته (schema) در نسخه موبایل هم وجود داشته باشد.

یک اشتباه رایج: استفاده از تگ noindex روی نسخه موبایل به‌تصور اینکه نسخه دسکتاپ اصلی است. این کار عملاً سایت شما را از نتایج موبایل حذف می‌کند.

در دنیای ایندکس موبایل‌اول، نسخه موبایل سایت شما دیگر یک نسخه فرعی نیست؛ همان سایت اصلی است.

تست نهایی روی دستگاه واقعی

تجربه من این است که سه تست زیر، بیش از هر ابزار شبیه‌سازی، ماهیت تجربه موبایل را نشان می‌دهند:

  1. با گوشی خودتان در حالت چهارG (نه وای‌فای) صفحه اصلی را باز کنید و زمان ظاهر شدن بخش اصلی صفحه را با گوشی دوم اندازه بگیرید.
  2. با یک دست، سعی کنید فرم تماس را پر کنید. اگر شست شما به همه اجزا نمی‌رسد، مشکل طراحی دارید.
  3. در آفتاب، صفحه را نگاه کنید. اگر متن‌ها محو می‌شوند، کنتراست رنگ را افزایش دهید.

روش دقیق‌تر برای هر مرحله در تست چیدمان واکنش‌گرا در مرورگرها آمده است.

پرسش‌های کوتاه

آیا نسخه جداگانه موبایل (m.site) توصیه می‌شود؟ خیر. نسخه تک‌URL ریسپانسیو، استاندارد فعلی گوگل است. نسخه جداگانه، دو نسخه برای نگهداری می‌سازد و در آپدیت‌ها دردسر مضاعف می‌آورد.

آیا استفاده از AMP برای سرعت موبایل لازم است؟ خیر. AMP برای سایت‌های خبری که سرعت بسیار حیاتی است، همچنان گزینه است؛ اما با بهبود Core Web Vitals روی سایت اصلی، اکثر سایت‌ها به AMP نیازی ندارند.

سایت من روی دسکتاپ سریع است، چرا روی موبایل کند است؟ معمولاً به‌خاطر یکی از سه چیز: تصاویر بی‌srcset، فونت‌های اضافه، یا قالب سنگین. سه لایه اول جدول بالا را مرور کنید.

خلاصه‌ای از مسیر

بهینه‌سازی سایت برای موبایل، یک پروژه یک‌باره نیست؛ یک عادت مستمر است. اگر امروز فقط سه کار بکنید، بازدهی محسوسی خواهید دید: اول، viewport را در سراسر سایت تضمین کنید. دوم، تصاویر بنر اصلی را از حالت lazy خارج کرده و با فرمت مدرن بازتولید کنید. سوم، فرم تماس را روی گوشی خودتان پر کنید تا نرخ تبدیل واقعی را ببینید. سه لایه باقی‌مانده (تایپوگرافی، تعامل، سئو) با گذشت زمان و بازبینی ماهانه به سقف می‌رسند. در تجربه من، همان سه کار اولیه در کمتر از یک روز، تجربه موبایل سایت را از دیوار فروریخته به یک مسیر قابل استفاده تبدیل می‌کند. باقی مسیر، ساختن روی همان پایه است.

اگر در سایت خودتان متوجه یک شکاف مشخص موبایل شده‌اید که در این هفت لایه دیده نشده، در دیدگاه‌ها بنویسید؛ همان مورد در نسخه‌های بعدی این راهنما اضافه می‌شود. 📲