ارزیابی طراحی واکنش‌گرا روی دستگاه‌های واقعی: چک‌لیست چهارلایه

«روی مرورگر کوچک شد و خوب بود» ارزیابی واکنش‌گرایی نیست. در عمل چند چیز جدا باید دیده شود: تنظیم viewport، نقطه‌های شکست چیدمان، قابلیت لمس و رفتار در بزرگ‌نمایی. این مقاله چک‌لیست چهارلایه می‌دهد و فهرست مدل دستگاه یا آمار بازار نمی‌آورد.

لایهٔ ۱: viewport

web.dev می‌گوید صفحه‌ای که برای دستگاه‌های مختلف بهینه می‌شود باید در head تگ meta viewport داشته باشد؛ بدون آن مرورگرهای موبایل صفحه را با عرض دسکتاپ (معمولاً حدود ۹۸۰ پیکسل، اما بسته به دستگاه) رندر و بعد کوچک می‌کنند، که فونت‌ها ناهمگون می‌شوند. مقدار width=device-width عرض صفحه را با عرض صفحه‌نمایش برابر می‌کند. سپس بررسی کنید چیزی از viewport بیرون نزند؛ web.dev یادآوری می‌کند کاربران به اسکرول افقی عادت ندارند و مثلاً تصویر پهن‌تر از viewport باعث آن می‌شود، و Lighthouse می‌تواند چنین محتوایی را نشان دهد.

لایهٔ ۲: breakpoint از محتوا

web.dev توصیه می‌کند breakpoint را بر پایهٔ طبقهٔ دستگاه، برند یا سیستم‌عامل تعریف نکنید، چون نگه‌داری را سخت می‌کند؛ بگذارید محتوا تعیین کند چه زمانی چیدمان تغییر کند. مسیر پیشنهادی: ابتدا برای صفحهٔ کوچک طراحی کنید، پنجره را بزرگ کنید تا جایی که فضای خالی زیاد و چیدمان بد شود، همان‌جا breakpoint بگذارید. مثال ۶۰۰ پیکسل در مستندات فقط نمونه است نه عدد ثابت.

لایهٔ ۳: لمس و pointer

معیار 2.5.8 در WCAG 2.2 (سطح AA) می‌گوید اندازهٔ هدف برای ورودی نشانگر دست‌کم ۲۴×۲۴ پیکسل CSS باشد، مگر استثناهایی مثل فاصلهٔ کافی، کنترل معادل در همان صفحه، لینک درون جمله، کنترل مرورگر یا حالتی که ارائهٔ آن ضروری است. web.dev هم نکته می‌دهد لپ‌تاپی با صفحهٔ لمسی ممکن است هم pointer دقیق و هم درشت و قابلیت hover داشته باشد؛ پس به‌جای حدس‌زدن نوع دستگاه، به قابلیت‌ها فکر کنید. با دست خودتان روی گوشی واقعی بزنید: دکمه‌های نزدیک هم را بسنجید.

لایهٔ ۴: reflow در بزرگ‌نمایی

معیار 1.4.10 در WCAG 2.2 (سطح AA) می‌گوید محتوا باید بدون از دست رفتن اطلاعات یا عملکرد و بدون اسکرول دوبعدی در عرض معادل ۳۲۰ پیکسل CSS ارائه شود. W3C توضیح می‌دهد این معادل عرض ۱۲۸۰ پیکسل در بزرگ‌نمایی ۴۰۰٪ است. استثنا برای بخش‌هایی است که چیدمان دوبعدی لازم دارند، مثل نقشه، نمودار، ویدئو، بازی، جدول داده (نه تک‌تک سلول‌ها) و رابط‌هایی که باید نوار ابزار را در نمای خود نگه دارند. پس مرورگر دسکتاپ را روی ۴۰۰٪ ببرید و ببینید متن بدون اسکرول افقی خوانده می‌شود یا نه.

چرا دستگاه واقعی؟

شبیه‌ساز مرورگر برای لایهٔ ۱ و ۲ مفید است، ولی لمس، صفحه‌کلید روی صفحه، چرخش و عملکرد را فقط روی دستگاه واقعی می‌توان دید؛ این توصیهٔ نویسنده است نه نقل از منبع. حداقل یک گوشی و یک تبلت یا لپ‌تاپ لمسی را در چرخهٔ بازبینی نگه دارید.

چک‌لیست خلاصه

1. meta viewport با width=device-width وجود دارد و هیچ محتوایی از viewport بیرون نمی‌زند.
2. breakpointها از محتوا آمده‌اند نه از مدل دستگاه.
3. هدف‌های لمسی ≥ ۲۴×۲۴ پیکسل یا با فاصلهٔ کافی.
4. در عرض ۳۲۰ پیکسل (یا ۴۰۰٪ بزرگ‌نمایی) اسکرول افقی نداریم، جز بخش‌های دوبعدی ضروری.
5. یک بار روی دستگاه واقعی تست شده است. برای تصویر کلی تجربهٔ کاربر UX چیست؟ و برای ریشه‌های ترک سایت چرا کاربران بعضی سایت‌ها را سریع ترک می‌کنند را ببینید.

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

منابع و مراجع

• Responsive web design basics — web.dev (Pete LePage، Rachel Andrew).
• Understanding Success Criterion 1.4.10: Reflow (WCAG 2.2) — W3C WAI، WCAG 2.2.
• Understanding Success Criterion 2.5.8: Target Size (Minimum) (WCAG 2.2) — W3C WAI، WCAG 2.2.