طراحی سایت واکنش‌گرا یا ریسپانسیو، روشی است که در آن چیدمان صفحه با فضای نمایش هماهنگ می‌شود. همان صفحه محصول که در رایانه چند ستون دارد، در موبایل می‌تواند تک‌ستونه باشد؛ متن خوانا می‌ماند، تصویر اندازه مناسبی می‌گیرد و دکمه‌ها در دسترس‌اند. قرار نیست نسخه دسکتاپ فقط کوچک شود و داخل صفحه تلفن جا بگیرد.
برای مثال، در یک فروشگاه مبلمان، بازدیدکننده موبایل باید بتواند عکس مبل، ابعاد، قیمت و شرایط ارسال را ببیند و برای سفارش اقدام کند. اگر تصویر زیبا باشد اما انتخاب رنگ یا دکمه سفارش از کادر بیرون بزند، کار اصلی او متوقف می‌شود. کیفیت طراحی واکنش‌گرا را باید در همین مسیرهای واقعی بررسی کرد.
طراحی ریسپانسیو چه چیزی را تغییر می‌دهد؟
عرض ستون‌ها، جای عناصر و شیوه نمایش منو می‌توانند تغییر کنند؛ محتوای اصلی و امکان انجام کار باید در دسترس بمانند. در نمایشگر بزرگ، تصویر محصول کنار مشخصات قرار می‌گیرد. در صفحه کوچک، این دو زیر هم می‌آیند. منوی افقی ممکن است به منوی بازشونده تبدیل شود، اما کاربر همچنان باید راه رسیدن به دسته‌بندی‌ها را پیدا کند.
واکنش‌گرا بودن با قابل استفاده بودن در موبایل ارتباط دارد، اما این دو دقیقاً یک معنی ندارند. ممکن است صفحه داخل کادر جا شود، ولی برچسب فرم‌ها خوانا نباشد یا لینک‌ها آن‌قدر نزدیک باشند که لمس گزینه درست دشوار شود. بررسی ظاهر باید با بررسی تعامل همراه باشد.
طراحی سایت واکنش‌گرا چگونه کار می‌کند؟
چیدمان منعطف به جای عرض ثابت
در چیدمان منعطف، بخش‌ها با فضای موجود سازگار می‌شوند. به‌جای اینکه برای هر کارت عرضی ثابت و بزرگ تعیین شود، شبکه می‌تواند تعداد ستون‌ها را تغییر دهد. مثلاً فهرست کالاها در لپ‌تاپ سه ستون و در موبایل یک ستون داشته باشد. ابزارهایی مانند CSS Grid و Flexbox در ساخت این رفتار به توسعه‌دهنده کمک می‌کنند.
نقطه تغییر چیدمان را محتوا مشخص می‌کند
مدیا کوئری یا Media Query اجازه می‌دهد در شرایط مشخص، قواعد نمایش تغییر کنند. عرضی که در آن تغییری مانند تک‌ستونه‌شدن رخ می‌دهد، نقطه شکست یا Breakpoint نام دارد. انتخاب آن باید با توجه به فشرده‌شدن محتوا و به‌هم‌خوردن چیدمان باشد؛ فهرست مدل‌های گوشی، معیار کافی نیست. راهنمای طراحی واکنش‌گرا در MDN همین نگاه مبتنی بر محتوا را توضیح می‌دهد.
مرورگر باید عرض دستگاه را درست در نظر بگیرد
تنظیم Viewport به مرورگر موبایل می‌گوید صفحه را متناسب با عرض دستگاه نمایش دهد. نبودن تنظیم درست ممکن است باعث شود مرورگر صفحه‌ای عریض را کوچک نشان دهد. البته وجود این تنظیم، به‌تنهایی چیدمان را اصلاح نمی‌کند؛ اجزای داخل صفحه هم باید انعطاف داشته باشند.
در نسخه موبایل چه بخش‌هایی باید بررسی شوند؟
صفحه اصلی فقط یکی از صفحات سایت است. کاربر ممکن است از گوگل مستقیماً به یک مقاله، محصول یا صفحه خدمت برسد. برای فروشگاه مثال ما، این بررسی‌ها را در صفحه محصول و مرحله سفارش هم انجام می‌دهیم:
| بخش | نشانه مشکل | نتیجه مورد انتظار |
|---|---|---|
| عنوان و توضیحات | متن ریز، بریده یا خارج از کادر | خواندن مشخصات بدون زوم اجباری |
| تصویر محصول | کشیدگی یا برش قسمت مهم کالا | نمایش نسبت درست و امکان بررسی جزئیات |
| منو و جست‌وجو | پوشاندن صفحه یا بسته‌نشدن منو | رسیدن به دسته‌بندی و بازگشت آسان |
| انتخاب ویژگی | گزینه رنگ یا اندازه بیرون از صفحه | انتخاب گزینه و تشخیص وضعیت انتخاب‌شده |
| فرم سفارش | پنهان‌شدن فیلد یا خطا پشت صفحه‌کلید | ورود اطلاعات و اصلاح خطا بدون گم‌شدن فرم |
| دکمه‌های ثابت | پوشاندن قیمت، شرایط ارسال یا دکمه دیگر | دسترسی به اقدام اصلی بدون پوشاندن محتوا |
| جدول مشخصات | عریض‌شدن کل صفحه به خاطر جدول | نمایش قابل فهم یا پیمایش محدود به خود جدول |
این جدول، نمونه‌ای از بررسی مسیر خرید است. در سایت شرکتی، مسیر مشابه می‌تواند «خواندن خدمت، دیدن نمونه‌کار و ارسال درخواست مشاوره» باشد. انتخاب سناریو باید با هدف همان صفحه هماهنگ باشد.
خوانایی و لمس‌پذیری را چگونه بهتر کنیم؟
متن باید با اندازه معمول نمایشگر خوانده شود و فاصله خطوط به تشخیص خط بعدی کمک کند. طول زیاد یک کلمه، نشانی اینترنتی یا شماره پیگیری هم نباید کل صفحه را از کادر بیرون ببرد. در متن فارسی، ترکیب عدد، عبارت انگلیسی و نشانه‌گذاری را با چند نمونه واقعی بررسی کنید.
برای دکمه، فقط اندازه آیکون مهم نیست؛ محدوده قابل لمس و فاصله آن از کنترل کناری هم اهمیت دارد. در منوی موبایل، بازکردن زیرمنو نباید با رفتن به صفحه خدمت اشتباه شود. برای شناخت جزئیات حداقل اندازه و استثناهای آن، می‌توان به راهنمای اندازه هدف در WCAG 2.2 مراجعه کرد.
بزرگ‌کردن متن نیز نباید دکمه‌ها را ناپدید کند. راهنمای بازچینی محتوا در W3C بر حفظ اطلاعات و عملکرد در فضای محدود تأکید دارد. برای محتوای معمول، کاربر نباید برای دنبال‌کردن هر خط، مدام به چپ و راست حرکت کند. نقشه‌ها و بعضی جدول‌های داده می‌توانند به نمایش دوبعدی نیاز داشته باشند.
تصاویر مناسب موبایل، بدون افت محسوس کیفیت
دو تصمیم جدا داریم: تصویر در چه اندازه‌ای دیده شود و مرورگر کدام فایل را دریافت کند. کوچک‌کردن ظاهری یک عکس بزرگ، الزاماً حجم دانلود آن را کم نمی‌کند. با تصاویر واکنش‌گرا، مرورگر می‌تواند از میان نسخه‌های مناسب، گزینه‌ای متناسب با شرایط نمایش انتخاب کند.
ویژگی‌های srcset و sizes در HTML برای معرفی گزینه‌های تصویر و اندازه نمایش آن کاربرد دارند. عنصر picture هم می‌تواند برای برش متفاوت یا قالب‌های مختلف استفاده شود. در راهنمای تصاویر واکنش‌گرا در MDN، تفاوت انتخاب وضوح و تغییر ترکیب‌بندی توضیح داده شده است.
در فروشگاه مبلمان، نسخه کوچک عکس باید هنوز شکل و جنس کالا را روشن نشان دهد. فشرده‌سازی شدید که بافت پارچه را خراب کند، انتخاب مناسبی نیست. همچنین جای تصویر باید پیش از کامل‌شدن بارگذاری مشخص باشد تا قیمت و دکمه سفارش ناگهان جابه‌جا نشوند. تصویر بزرگ ابتدای صفحه هم نباید بی‌دلیل تا زمان اسکرول منتظر بارگذاری بماند.
رابطه طراحی واکنش‌گرا با سئو چیست؟
گوگل برای ایندکس و رتبه‌بندی از نسخه موبایلی محتوا استفاده می‌کند. در راهنمای ایندکس‌گذاری موبایل گوگل، طراحی واکنش‌گرا یکی از روش‌های پشتیبانی‌شده و روش پیشنهادی معرفی شده است: آدرس و HTML مشترک می‌مانند و نحوه نمایش متناسب با صفحه تغییر می‌کند.
برای خلوت‌کردن موبایل، توضیحات مهم خدمت یا مشخصات محصول را حذف نکنید. می‌توان نحوه ارائه را تغییر داد؛ مثلاً بخشی را در آکاردئون قرار داد، به شرط اینکه محتوا در صفحه موجود و برای گوگل قابل دسترسی باشد. عنوان‌ها، اطلاعات اصلی و داده‌های ساختاریافته هم باید در نسخه موبایل حفظ شوند.
ریسپانسیو بودن، تضمین رتبه بالاتر نیست. کیفیت محتوا، قابلیت خزش، عملکرد صفحه و عوامل دیگر هم باید جداگانه بررسی شوند. همین‌طور صفحه‌ای که داخل موبایل مرتب دیده می‌شود، ممکن است به‌دلیل فایل‌های سنگین یا پاسخ دیر سرور، کند باشد.
چک‌لیست عملی بررسی سایت در موبایل
یک صفحه مهم را انتخاب کنید و یک کار مشخص انجام دهید. برای مثال، از جست‌وجوی یک مبل تا انتخاب رنگ و رسیدن به فرم سفارش پیش بروید. فقط اسکرین‌شات نگیرید؛ مراحل را واقعاً اجرا کنید.
- عرض صفحه را تغییر دهید: چند عرض باریک، متوسط و بزرگ را بررسی کنید. علاوه بر اندازه‌های ازپیش‌تعریف‌شده، عرض‌های بین آن‌ها را هم ببینید تا شکست چیدمان پنهان نماند.
- متن را بزرگ کنید: عنوان طولانی، پاراگراف و دکمه را بررسی کنید. بریده‌شدن کلمات یا افتادن نوشته روی تصویر، نشانه نیاز به اصلاح است.
- منو و فرم را امتحان کنید: زیرمنو را باز و بسته کنید، یک فیلد را اشتباه وارد کنید و پیام خطا را بخوانید. با بازشدن صفحه‌کلید، امکان ادامه کار باید بماند.
- یک گوشی واقعی به کار ببرید: شبیه‌سازی مرورگر برای یافتن مشکل مفید است، اما لمس، صفحه‌کلید و رفتار مرورگر گوشی را کامل بازسازی نمی‌کند.
- صفحه را از ابتدا بارگذاری کنید: با اتصال معمول کاربر، زمان دیده‌شدن متن و تصویر و جابه‌جایی عناصر را بررسی کنید. نتیجه فقط روی اینترنت سریع دفتر، کافی نیست.
- مشکل را قابل تکرار گزارش کنید: آدرس صفحه، دستگاه، مرورگر، جهت نمایش و مراحل ایجاد خطا را بنویسید. عبارت «موبایل به‌هم ریخته» برای پیدا‌کردن علت کافی نیست.
برای اولویت‌بندی، اول سراغ مانع‌های انجام کار بروید: دکمه غیرقابل دسترس، فرم خراب یا محتوای پوشیده‌شده. پس از آن، جزئیات فاصله‌ها و تزئینات را اصلاح کنید. این ترتیب کمک می‌کند زمان صرف بخش‌هایی شود که استفاده از سایت را مختل کرده‌اند.
آیا برای اصلاح سایت موجود، بازطراحی کامل لازم است؟
همیشه نه. گاهی مشکل از یک عرض ثابت، منوی نامناسب یا تصویر بزرگ است و با اصلاح محدود برطرف می‌شود. در موارد دیگر، ساختار قالب یا اجزای مشترک اجازه تغییر درست نمی‌دهد و کار گسترده‌تری لازم است. پیش از تصمیم، چند صفحه نماینده انتخاب کنید: خانه، خدمت یا محصول، مقاله و فرم تماس.
اصلاح یک جزء مشترک، مانند هدر، باید در همه این صفحات بررسی شود. همچنین محتوای واقعی را جایگزین متن‌های کوتاه آزمایشی کنید؛ عنوان بلند فارسی یا محصولی با چند ویژگی، می‌تواند مشکلی را نشان دهد که در طرح اولیه دیده نشده است.
در صفحه طراحی سایت و اپلیکیشن داپا می‌توانید با حوزه این خدمات آشنا شوید. برای بررسی مسیر کاربر فراتر از اندازه صفحه، مقاله اصول طراحی تجربه کاربری وب نیز مرتبط است.
پرسش‌های متداول
سایت واکنش‌گرا با اپلیکیشن موبایل چه تفاوتی دارد؟
واکنش‌گرا بودن، ویژگی طراحی یک سایت است و آن را به اپلیکیشن مستقل تبدیل نمی‌کند. اگر پروژه به قابلیت‌های خاص دستگاه، نصب یا استفاده آفلاین نیاز دارد، انتخاب راهکار باید جداگانه بررسی شود. مقاله اپلیکیشن موبایل یا وب‌اپلیکیشن؟ معیارهای این تصمیم را توضیح می‌دهد.
داشتن قالب ریسپانسیو کافی است؟
خیر. افزونه‌ها، بنرهای جدید، جدول‌ها و محتوایی که بعداً وارد می‌شود می‌توانند چیدمان را خراب کنند. صفحات باید پس از واردکردن محتوای واقعی و بعد از تغییرهای مهم، دوباره بررسی شوند.
آیا نسخه موبایل باید دقیقاً شبیه دسکتاپ باشد؟
ظاهر می‌تواند متفاوت باشد؛ تعداد ستون‌ها، جای منو و ترتیب بعضی بخش‌ها تغییر می‌کند. اما کاربر باید به اطلاعات اصلی و امکانات لازم برای انجام کار دسترسی داشته باشد. یکسان‌بودن هدف و محتوا، به معنی یکسان‌بودن جای همه عناصر نیست.
