طراحی سایت برای موبایل یعنی بازدیدکننده بتواند در صفحه‌ای کوچک، متن را بخواند، گزینه درست را لمس کند و کار اصلی خود را بدون گیر افتادن در چیدمان انجام دهد. در طراحی واکنش‌گرا، محتوا و اجزای صفحه با فضای موجود سازگار می‌شوند؛ اما کوچک شدن ظاهری صفحه به‌تنهایی نشانه تجربه خوب نیست. منو، فرم، تصاویر و مسیر خرید یا تماس نیز باید در عمل بررسی شوند.
این راهنما برای صاحب سایت و تیم اجراست. ابتدا معیارهای ملموس را مرور می‌کنیم و سپس یک روش آزمون قابل تکرار می‌دهیم. منظور از طراحی سایت موبایل در این مقاله، سازگار کردن وب‌سایت برای بازدید با گوشی است؛ آموزش ساخت سایت با خود گوشی نیست.
در یک چیدمان واکنش‌گرا، ستون‌ها، فاصله‌ها و تصاویر متناسب با عرض قابل استفاده تغییر می‌کنند. برای مثال، کارت‌های سه‌ستونی یک صفحه خدمات می‌توانند در نمایشگر باریک زیر هم قرار گیرند. محتوای اصلی و امکان انجام کار باید حفظ شود؛ اگر دکمه درخواست یا اطلاعات مهم در موبایل حذف شود، صرفاً مرتب شدن بقیه صفحه کافی نیست.
به جای انتخاب نقطه تغییر صرفاً بر اساس مدل یک گوشی، عرض صفحه را به‌تدریج کم و زیاد کنید و جایی که محتوا به هم می‌ریزد را پیدا کنید. طرح موبایل را در کنار نسخه بزرگ‌تر از ابتدای مراحل طراحی سایت بررسی کنید تا اصلاح مسیرهای اصلی به پایان پروژه موکول نشود.
در صفحه اصلی، مقاله، صفحه خدمت و فرم بررسی کنید که متن عادی بدون پیمایش افقی خوانده شود. جدول‌های عریض، نشانی‌های طولانی، تصویر با عرض ثابت و پنجره‌های شناور از علت‌های رایج بیرون‌زدگی هستند. ستون‌ها باید فضای کافی داشته باشند و ترتیب نمایش آن‌ها در موبایل همچنان منطقی باشد.
اگر جدول واقعاً به مقایسه دو بعدی نیاز دارد، برای خود جدول راه پیمایش مشخص بگذارید یا نمای جایگزین قابل فهم طراحی کنید؛ نباید کل مقاله به چپ و راست حرکت کند. طبق معیار بازچینش WCAG، محتوای معمول عمودی باید در عرض معادل ۳۲۰ پیکسل CSS بدون از دست رفتن اطلاعات و بدون پیمایش دو جهته قابل استفاده باشد؛ برای محتواهایی که ذاتاً به چیدمان دو بعدی نیاز دارند استثنا وجود دارد. این عدد یک نقطه آزمون است، نه اندازه فیزیکی تمام گوشی‌ها.
متن باید در اندازه معمول دستگاه خوانا باشد و بین خطوط، پاراگراف‌ها و عناصر فاصله مناسبی داشته باشد. عنوان‌های بلند فارسی، اعداد، علائم نگارشی و واژه‌های انگلیسی داخل جمله را با محتوای واقعی بررسی کنید. متن نباید زیر تصویر یا نوار ثابت پنهان شود و با افزایش اندازه متن یا بزرگ‌نمایی مرورگر نباید بخشی از اطلاعات ناپدید شود.
رنگ متن و پس‌زمینه را در روشنایی متفاوت بررسی کنید؛ متن خاکستری کم‌رنگ روی زمینه روشن ممکن است روی یک صفحه واقعی دشوار خوانده شود. از تصویر حاوی متن ریز برای اطلاعات ضروری استفاده نکنید. اجازه بزرگ‌نمایی کاربر را نیز محدود نکنید.
دکمه‌ها و گزینه‌های نزدیک به هم باید آن‌قدر فضا داشته باشند که لمس یکی باعث فعال شدن دیگری نشود. فقط ظاهر دکمه را نبینید: ناحیه قابل لمس و فاصله آن با عناصر مجاور مهم است. معیار WCAG 2.2 برای اندازه هدف، به‌طور کلی حداقل ۲۴ در ۲۴ پیکسل CSS را در سطح AA مطرح می‌کند و استثناهایی از جمله فاصله کافی و پیوندهای درون متن دارد. این حداقل به معنی مناسب بودن همان اندازه برای همه کاربران نیست؛ کنترل‌های مهم را راحت‌تر و بزرگ‌تر طراحی کنید.
منوی موبایل را باز و بسته کنید، زیرمنو را امتحان کنید و مطمئن شوید کاربر می‌فهمد کجاست. نوار تماس، پنجره تبلیغاتی یا پیام کوکی نباید دکمه ارسال و محتوای ضروری را بپوشاند. بستن پنجره نیز باید آسان باشد.
در یک سایت خدماتی، مسیر «ورود به صفحه خدمت، خواندن توضیح، تماس یا ارسال درخواست» را از ابتدا تا انتها طی کنید. در فروشگاه، جست‌وجو، انتخاب محصول و مراحل سبد و پرداخت را در محیط مناسب آزمون کنید. باز شدن صفحه اصلی به معنی سالم بودن این مسیرها نیست.
برچسب هر فیلد باید بعد از تایپ هم قابل تشخیص باشد. نوع صفحه‌کلید مناسب شماره تلفن یا ایمیل، پیام خطای واضح کنار فیلد و حفظ داده‌های واردشده پس از خطا به استفاده راحت‌تر کمک می‌کند. یک بار فرم را درست و یک بار با فیلد خالی امتحان کنید؛ رسیدن پیام آزمایشی به مقصد را هم جداگانه کنترل کنید. در پایان داده آزمون را طبق روال توافق‌شده حذف کنید.
تصویر باید در عرض موجود جا شود، نسبت خود را حفظ کند و بخش مهم آن در برش موبایل از دست نرود. تصویر فشرده و متناسب با اندازه نمایش می‌تواند حجم انتقال را کاهش دهد؛ کیفیت، متن جایگزین مناسب و محتوای قابل فهم را هم حفظ کنید. ویدئو یا محتوای تعبیه‌شده نباید از صفحه بیرون بزند.
صفحه را با اتصال معمول موبایل نیز امتحان کنید. به تأخیر نمایش محتوای اصلی، جابه‌جایی ناگهانی دکمه هنگام بارگذاری و فایل‌های سنگین توجه کنید. ابزارهای اندازه‌گیری می‌توانند ایراد را پیدا کنند، اما یک امتیاز به‌تنهایی ثابت نمی‌کند که فرم یا مسیر خرید روی گوشی واقعی درست کار می‌کند.
فرض کنید دکمه «ارسال درخواست» در گوشی زیر نوار تماس ثابت قرار گرفته است. ثبت مفید چنین است: نشانی صفحه خدمت، مدل گوشی و مرورگر، حالت عمودی، مراحل باز کردن فرم، نتیجه مشاهده‌شده و تصویر. تیم اجرا می‌تواند فاصله انتهای صفحه و جای نوار ثابت را اصلاح کند. سپس همان فرم با داده معتبر و نامعتبر دوباره آزموده می‌شود تا هم دکمه و هم پیام نتیجه قابل مشاهده باشند.
معمولاً یک سایت می‌تواند با چیدمان انعطاف‌پذیر برای عرض‌های مختلف سازگار شود. تصمیم فنی به نیاز پروژه وابسته است؛ مهم این است که اطلاعات و عملکرد ضروری در هر نمایش در دسترس و قابل آزمون باشند.
خیر. تجربه موبایل یکی از بخش‌های کیفیت سایت است و ساختار محتوا، قابلیت دسترسی، لینک‌ها و تنظیمات فنی نیز به بررسی نیاز دارند. در راهنمای طراحی سایت با اصول سئو این موارد در کنار هم توضیح داده شده‌اند؛ نتیجه رتبه مشخصی را تضمین نمی‌کند.
یک قالب سازگار نقطه شروع است، ولی متن واقعی، افزونه‌ها، جدول‌ها، تصاویر و تغییرات اختصاصی ممکن است مشکل تازه ایجاد کنند. پس از ورود محتوای واقعی، صفحات و مسیرهای مهم را دوباره آزمایش کنید. در صفحه خدمات طراحی سایت می‌توانید روش‌های مختلف اجرای سایت را مرور کنید.
در نهایت، معیار قبولی را روی کار واقعی کاربر بگذارید: آیا صفحه خواناست، کنترل درست لمس می‌شود و مسیر اصلی با موفقیت پایان می‌یابد؟ نتیجه هر آزمون را ثبت کنید تا اصلاح‌ها قابل پیگیری باشند.
