چطور یک وب‌سایت را برای موبایل واکنش‌گرا کنیم

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

واکنش‌گرایی واقعاً یعنی چه

یک سایت واکنش‌گرا مجموعه‌ای از صفحه‌ها و نشانی‌ها را دارد که با صفحه تطبیق می‌یابند. به‌جای یک سایت جدا با «m.»، CSS در عرض‌های مشخصی چیدمان را عوض می‌کند. این عرض‌ها را نقطه شکست (breakpoint) می‌گویند. اجزای اصلی:

• تگ meta viewport به مرورگرهای موبایل می‌گوید از عرض واقعی دستگاه استفاده کنند.
• چیدمان‌های منعطف از درصد، flexbox و grid استفاده می‌کنند، نه عرض‌های ثابت پیکسلی.
• media query (یا کلاس‌های فریم‌ورک مثل md: در Tailwind) چیدمان را از یک عرض به بالا عوض می‌کند.
• رسانه منعطف — تصاویر و ویدیوهایی که متناسب با ظرف خودشان کوچک می‌شوند.

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

گزینه‌ها و مصالحه‌ها

موبایل‌اول معمولاً ساده‌تر است: یک ستون، ساده‌ترین چیدمان است و اضافه کردن ستون وقتی جا بیشتر می‌شود، کمتر کار دارد تا حذف کردن آن‌ها.

بخش‌هایی که معمولاً خراب می‌شوند

تگ viewport

اگر صفحه‌ای روی گوشی مثل یک سایت دسکتاپ کوچک دیده می‌شود، تگ viewport وجود ندارد:

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

maximum-scale=1 یا user-scalable=no اضافه نکنید. بستن زوم با دو انگشت، استفاده از سایت را برای افراد کم‌بینا سخت می‌کند.

عرض ثابت و اسکرول افقی

رایج‌ترین باگ واکنش‌گرایی چیزی است که از صفحه عریض‌تر است: یک ظرف با width: 1200px ثابت، یک جدول عریض، یک نشانی یا بلوک کد بلند، یک تصویر بدون max-width: 100%. نتیجه این است که کل صفحه به‌طور افقی اسکرول می‌شود. به‌جای width از max-width استفاده کنید، اجازه دهید متن بشکند و به چیزهای عریض، ناحیه اسکرول مخصوص خودشان بدهید.

ناوبری

پنج لینک منوی دسکتاپ به‌ندرت روی گوشی جا می‌شود. پاسخ معمول یک دکمه منو است که یک پنل را باز می‌کند. دو یا سه اقدام مهم را همیشه قابل‌دیدن نگه دارید — «رزرو»، «سبد خرید»، «ورود» — و مطمئن شوید منو با کیبورد کار می‌کند و به‌راحتی بسته می‌شود.

متن و اندازه دکمه‌های لمسی

• متن بدنه حدود ۱۶ پیکسل حداقل معقول برای گوشی است. ورودی‌هایی با متن کوچک‌تر باعث می‌شوند آیفون هنگام لمس زوم کند.
• دکمه‌ها و لینک‌ها را راحت لمس‌شدنی کنید. WCAG 2.2 AA حداقل ۲۴ در ۲۴ پیکسل CSS (یا فاصله کافی) را تعیین می‌کند؛ حدود ۴۴ پیکسل برای انگشت راحت‌تر است.
• بین لینک‌های کنار هم فاصله بگذارید تا کسی اشتباهی روی دیگری نزند.

جدول و داده

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

تصاویر و رسانه

از max-width: 100% و height: auto استفاده کنید، با srcset فایل‌های کوچک‌تر را به صفحه‌های کوچک بدهید و عرض و ارتفاع را مشخص کنید تا صفحه هنگام بارگذاری نپرد. ویدیوها و نقشه‌های جاساز‌شده به یک wrapper منعطف نیاز دارند تا نسبت ابعادشان حفظ شود. تصاویر کوچک‌تر صفحه را هم سریع‌تر می‌کنند — چطور سایتمان را سریع‌تر کنیم را ببینید.

فرم‌ها

برچسب‌ها را بالای فیلدها بگذارید، فیلدها را تمام‌عرض کنید و نوع ورودی درست (type="email"، type="tel"، inputmode="numeric") را استفاده کنید تا گوشی کیبورد مناسب را نشان دهد. دکمه ارسال را جایی بگذارید که انگشت به آن برسد و وقتی کیبورد باز می‌شود همچنان دیده شود.

تعامل‌هایی که فقط با hover کار می‌کنند

گوشی‌ها hover ندارند. راهنماها، منوهای کشویی و پیش‌نمایش‌هایی که فقط با hover ظاهر می‌شوند، برای کاربران لمسی نامرئی‌اند. آن‌ها را با لمس هم کار کنید.

پرامپت‌هایی که کار می‌کنند

برای یک ساخت جدید، از اول بگویید:

این را موبایل‌اول بساز. روی گوشی یک ستون، از عرض تبلت دو ستون، و روی دسکتاپ چیدمان کامل. در عرض ۳۲۰ پیکسل هیچ اسکرول افقی نباشد، متن بدنه حداقل ۱۶ پیکسل، اهداف لمسی حداقل ۴۴ پیکسل، روی صفحه‌های کوچک یک دکمه منو، و جدول‌هایی که روی گوشی به کارت تبدیل می‌شوند.

برای یک صفحه موجود، آنچه می‌بینید را توصیف کنید:

روی گوشی، صفحه /pricing اسکرول افقی دارد و سه کارت طرح کنار هم فشرده شده‌اند. زیر ۷۶۸ پیکسل کارت‌ها را عمودی بچین، جدول مقایسه را داخل ظرف خودش با اسکرول افقی و ستون ویژگی ثابت قرار بده، و چیدمان دسکتاپ را تغییر نده.

هر صفحه را در عرض ۳۷۵ پیکسل بررسی کن. هر چیزی که بیرون می‌زند، روی هم می‌افتد، متنش کمتر از ۱۶ پیکسل یا اهداف لمسی کمتر از ۴۴ پیکسل است یا فقط با hover کار می‌کند را فهرست کن، بعد هرکدام را درست کن.

گام به گام

1. تگ viewport را در head صفحه بررسی کنید.
2. در عرض ۳۲۰ تا ۳۷۵ پیکسل در حالت دستگاه مرورگر یا پیش‌نمایش اندازه گوشی آزمایش کنید. هر صفحه را از بالا تا پایین اسکرول کنید.
3. اول اسکرول افقی را برطرف کنید. عنصری که خیلی عریض است را پیدا کنید؛ تا آن نرود، قضاوت بقیه چیزها سخت است.
4. ناوبری را مرتب کنید: دکمه منو، و اقدام‌های کلیدی قابل‌دیدن.
5. متن، اهداف لمسی و فرم‌ها را در هر جریان کلیدی بررسی کنید — ثبت‌نام، جست‌وجو، پرداخت، تماس.
6. جدول و رسانه را مدیریت کنید: کارت یا ظرف اسکرول، تصاویر و جاسازی‌های واکنش‌گرا.
7. اندازه‌های میانی را بررسی کنید. عرض را آهسته از گوشی تا دسکتاپ بکشید؛ چیدمان‌ها اغلب حوالی عرض تبلت خراب می‌شوند.
8. روی یک گوشی واقعی آزمایش کنید. شبیه‌سازها چیزهایی مثل کیبورد روی دکمه، بریدگی صفحه و سرعت سایت روی داده موبایل را از دست می‌دهند.

اشتباه‌های رایج

• فقط یک اندازه گوشی را آزمایش کردن. یک گوشی کوچک، یک گوشی بزرگ و یک تبلت را بررسی کنید.
• پنهان کردن محتوا روی موبایل برای جا شدن. گوگل نسخه موبایل را ایندکس می‌کند و کاربران گوشی همان اطلاعات را می‌خواهند.
• غیرفعال کردن زوم در تگ viewport.
• تصاویر با اندازه دسکتاپ روی گوشی که زمان بارگذاری و داده را هدر می‌دهند.
• انباشت عناصر ثابت: هدر چسبان، بنر کوکی و حباب چت می‌توانند نیمی از صفحه گوشی را بپوشانند.
• پاپ‌آپ‌هایی که نمی‌شود بستشان روی صفحه کوچک، چون دکمه بستن بیرون صفحه است.

چک‌لیست موبایل

• تگ meta viewport موجود است؛ زوم غیرفعال نشده
• هیچ اسکرول افقی در عرض ۳۲۰ پیکسل در هیچ صفحه‌ای نیست
• متن بدنه حدود ۱۶ پیکسل؛ ورودی‌ها باعث زوم نمی‌شوند
• اهداف لمسی به‌اندازه کافی بزرگ و فاصله‌دار هستند
• منو روی گوشی و با کیبورد کار می‌کند
• جدول‌ها روی گوشی قابل خواندن هستند (کارت، ستون کمتر یا ظرف اسکرول)
• تصاویر و جاسازی‌ها متناسب می‌شوند؛ فایل‌های با اندازه درست ارائه می‌شوند
• فرم‌ها نوع ورودی درست دارند؛ دکمه ارسال قابل دسترسی است
• چیز مهمی به hover وابسته نیست
• روی حداقل یک گوشی واقعی آزمایش شده

چیدمان واکنش‌گرا بخشی از دسترس‌پذیری هم هست: WCAG می‌خواهد محتوا در عرض ۳۲۰ پیکسل و در زوم ۲۰۰ درصد کار کند. اگر اپی می‌سازید که مردم هر روز روی گوشی‌هایشان استفاده می‌کنند، چطور یک وب‌اپ دوستدار موبایل بسازیم فراتر می‌رود، از جمله PWAهای قابل نصب.

طراحی واکنش‌گرا در Mythex

Mythex وب‌اپ‌های واکنش‌گرا می‌سازد و در نسخه Pro می‌تواند آن‌ها را به‌صورت اپ اندروید و آیفون بسته‌بندی کند. در فضای کاری، روی آیکون گوشی بالای Preview (Switch to Mobile) کلیک کنید تا اپتان را در قاب اندازه گوشی ببینید، و لبه قاب را بکشید تا عرض‌های دیگر را امتحان کنید (Preview و Code). مستندات یک پرامپت شروع کوتاه برای اصلاح چیدمان صفحه کوچک در پرامپت‌های واکنش‌گرای موبایل دارد. روی یک گوشی واقعی هم بررسی کنید — نشانی منتشرشده را باز کنید، یا یک لینک پیش‌نمایش بفرستید و روی گوشی‌تان باز کنید.

پرسش‌ها