طراحی ریسپانسیو سایت؛ چک‌لیست عملی برای موبایل

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

از محتوا شروع کنید، نه فهرست دستگاه‌ها

یک صفحهٔ واقعی با طولانی‌ترین تیتر، چند کارت و یک فرم را باز کنید. عرض مرورگر را آرام کم کنید؛ جایی که چیدمان واقعاً می‌شکند، نقطهٔ تغییر است. لازم نیست برای هر مدل گوشی اندازهٔ جدا بنویسید. برای آزمون اولیه، عرض‌های حدود ۳۲۰، ۳۹۰، ۷۶۸ و ۱۲۸۰ پیکسل مفیدند؛ سپس بین این نقاط را هم بررسی کنید. این‌ها ابزار آزمایش‌اند، نه قانون ثابت طراحی.

ترتیب بررسی در موبایل

۱. اسکرول افقی: اگر صفحه به کنار حرکت می‌کند، عنصر عریض را پیدا کنید. جدول، تصویر با عرض ثابت، متن بدون شکست یا min-width نامناسب معمولاً مقصر است. مشکل را با مخفی‌کردن کل سرریز صفحه پنهان نکنید.

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

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

۴. تصویر و دکمه: سوژهٔ تصویر در قاب باریک باید همچنان دیده شود. دکمه‌ها باید برچسب روشن، فاصلهٔ کافی و سطح لمس مناسب داشته باشند. منو، فرم خطادار و صفحهٔ بدون داده را هم بررسی کنید.

یک الگوی سادهٔ CSS

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }
img { max-width: 100%; height: auto; }

این اعداد را بعد از دیدن محتوای خودتان تنظیم کنید. سپس صفحه را هم با لمس واقعی گوشی و هم با ابزار توسعه‌دهنده آزمایش کنید؛ شبیه‌ساز به‌تنهایی رفتار انگشت، کیبورد و سرعت شبکه را کامل نشان نمی‌دهد.

چک‌لیست نهایی

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

برای آشنایی با منطق فنی، راهنمای Media Queries در MDN مرجع خوبی است. اگر سایت موجود در موبایل مشکل دارد، تماس با استودیو را برای بررسی صفحه‌های کلیدی باز کنید.