ارزیابی طراحی واکنش‌گرا روی دستگاه‌های واقعی: چک‌لیست چهارلایه
تغییر اندازهٔ پنجره کافی نیست. چک‌لیست چهارلایه برای ارزیابی طراحی واکنش‌گرا: viewport، breakpoint بر پایهٔ محتوا، لمس و reflow طبق web.dev و WCAG 2.2.
SE
4 min readSoheil Ebrahimpour
Founder & product engineer
«روی مرورگر کوچک شد و خوب بود» ارزیابی واکنش‌گرایی نیست. در عمل چند چیز جدا باید دیده شود: تنظیم 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 توضیح می‌دهد این معادل عرض ۱۲۸۰ پیکسل در بزرگ‌نمایی ۴۰۰٪ است. استثنا برای بخش‌هایی است که چیدمان دوبعدی لازم دارند، مثل نقشه، نمودار، ویدئو، بازی، جدول داده (نه تک‌تک سلول‌ها) و رابط‌هایی که باید نوار ابزار را در نمای خود نگه دارند. پس مرورگر دسکتاپ را روی ۴۰۰٪ ببرید و ببینید متن بدون اسکرول افقی خوانده می‌شود یا نه.
چرا دستگاه واقعی؟
شبیه‌ساز مرورگر برای لایهٔ ۱ و ۲ مفید است، ولی لمس، صفحه‌کلید روی صفحه، چرخش و عملکرد را فقط روی دستگاه واقعی می‌توان دید؛ این توصیهٔ نویسنده است نه نقل از منبع. حداقل یک گوشی و یک تبلت یا لپ‌تاپ لمسی را در چرخهٔ بازبینی نگه دارید.
چک‌لیست خلاصه
- meta viewport با width=device-width وجود دارد و هیچ محتوایی از viewport بیرون نمی‌زند.
- breakpointها از محتوا آمده‌اند نه از مدل دستگاه.
- هدف‌های لمسی ≥ ۲۴×۲۴ پیکسل یا با فاصلهٔ کافی.
- در عرض ۳۲۰ پیکسل (یا ۴۰۰٪ بزرگ‌نمایی) اسکرول افقی نداریم، جز بخش‌های دوبعدی ضروری.
- یک بار روی دستگاه واقعی تست شده است. برای تصویر کلی تجربهٔ کاربر 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.
Author
SE
Soheil Ebrahimpour is the founder of FutureForge. He works on product design, architecture, and getting custom software into production.
Related notes
If you are unsure about architecture or the build path, we can talk about the project.
Describe the problem and the constraints. If there is a fit, we will schedule a conversation.
