طراحی سایت ریسپانسیو یعنی سایتی بسازیم که خودش رو با اندازه‌ی صفحه‌ی هر دستگاهی هماهنگ کنه؛ از گوشی کوچیک تا تبلت، لپ‌تاپ و مانیتورهای بزرگ. در طراحی واکنش‌گرا، چیدمان، اندازه‌ی متن‌ها، عکس‌ها و دکمه‌ها به‌طور خودکار تغییر می‌کنن تا محتوا روی هر صفحه‌ای خوانا و قابل‌استفاده باشه، بدون اینکه کاربر مجبور به زوم کردن یا اسکرول افقی بشه.
امروز بیشتر بازدیدهای سایت‌ها از موبایل انجام می‌شه. یعنی اگه سایت شما روی گوشی خوب کار نکنه، عملاً بخش بزرگی از مشتری‌ها رو از دست می‌دید. گوگل هم برای رتبه‌بندی، نسخه‌ی موبایل سایت رو ملاک قرار می‌ده. پس طراحی سایت ریسپانسیو دیگه یه امکان اضافه نیست، بلکه یه ضرورت پایه‌ایه.
ریسپانسیو دقیقاً چطور کار می‌کنه؟
در طراحی واکنش‌گرا، به جای ساختن چند نسخه‌ی جداگانه از سایت برای دستگاه‌های مختلف، یه نسخه ساخته می‌شه که با قوانین مشخص، خودش رو با عرض صفحه تطبیق می‌ده. این قوانین مشخص می‌کنن مثلاً در صفحه‌های کمتر از یه عرض مشخص، ستون‌ها زیر هم قرار بگیرن، منو جمع بشه و فونت‌ها اندازه‌ی مناسب‌تری بگیرن.
سه پایه‌ی اصلی این روش، چیدمان منعطف، عکس‌های منعطف و قوانین شرطی بر اساس اندازه‌ی صفحه هستن. مستندات MDN درباره‌ی طراحی واکنش‌گرا این مفاهیم رو با جزئیات فنی توضیح داده.
- چیدمان منعطف که با عرض صفحه کش میاد یا جمع می‌شه
- عکس‌هایی که از ظرفشون بزرگ‌تر نمی‌شن
- قوانین شرطی برای تغییر چیدمان در اندازه‌های مختلف
- اندازه‌گذاری نسبی به جای اندازه‌های ثابت
چرا طراحی سایت ریسپانسیو حیاتیه؟
اکثر کاربرها با موبایل میان
برای بیشتر کسب‌وکارها، مخصوصاً رستوران‌ها، کلینیک‌ها و فروشگاه‌ها، سهم بازدید موبایل خیلی بالاست. کسی که در خیابون دنبال یه کافه می‌گرده یا وقت استراحت دنبال یه محصوله، گوشی در دستشه.
گوگل موبایل رو ملاک قرار می‌ده
گوگل با رویکرد ایندکس موبایل‌محور، نسخه‌ی موبایل سایت رو برای بررسی و رتبه‌بندی استفاده می‌کنه. اگه نسخه‌ی موبایل ناقص یا بد باشه، رتبه‌ی شما حتی برای جستجوهای دسکتاپ هم آسیب می‌بینه.
نرخ تبدیل و فروش
سایتی که روی موبایل سخت کار کنه، بازدیدکننده رو فراری می‌ده. دکمه‌های کوچیک، متن‌های ریز و فرم‌های سخت، مستقیماً تعداد تماس‌ها و خریدها رو کم می‌کنن.
اعتبار برند
سایتی که روی گوشی به‌هم‌ریخته باشه، تصویر قدیمی و غیرحرفه‌ای از کسب‌وکار می‌سازه.
۱۰ اصل مهم طراحی سایت ریسپانسیو
۱. طراحی موبایل‌اول
به جای اینکه اول برای دسکتاپ طراحی کنید و بعد سعی کنید در موبایل جاش بدید، از کوچیک‌ترین صفحه شروع کنید. این رویکرد مجبورتون می‌کنه روی محتوا و اقدام‌های اصلی تمرکز کنید و بعد برای صفحه‌های بزرگ‌تر، امکانات بیشتری اضافه کنید.
۲. اولویت‌بندی محتوا
در صفحه‌ی کوچیک، جا محدوده. تصمیم بگیرید مهم‌ترین چیزی که کاربر موبایل باید ببینه چیه و اون رو اول قرار بدید.
۳. دکمه‌های قابل‌لمس
دکمه‌ها و لینک‌ها باید به اندازه‌ای بزرگ باشن که با انگشت راحت لمس بشن و فاصله‌ی کافی از هم داشته باشن تا اشتباهی کلیک نشن.
۴. فونت خوانا
اندازه‌ی متن در موبایل باید بدون زوم کردن خوانا باشه. فاصله‌ی خطوط و طول خط هم روی راحتی مطالعه اثر دارن.
۵. منوی ساده
منوهای بزرگ دسکتاپ در موبایل باید به منوی جمع‌شونده‌ای تبدیل بشن که با یه لمس باز می‌شه و دسترسی سریع به بخش‌های اصلی می‌ده.
۶. عکس‌های بهینه
عکس‌ها باید برای هر اندازه‌ی صفحه، نسخه‌ی مناسب خودشون رو بارگذاری کنن. فرستادن عکس عریض دسکتاپ به گوشی، فقط حجم و زمان بارگذاری رو بالا می‌بره.
۷. فرم‌های کوتاه و ساده
تایپ کردن روی گوشی سخته. فرم‌ها رو تا حد ممکن کوتاه کنید، از نوع ورودی مناسب برای هر فیلد استفاده کنید تا صفحه‌کلید مناسب باز بشه، مثلاً صفحه‌کلید عددی برای شماره‌ی تلفن.
۸. دسترسی سریع به اقدام اصلی
دکمه‌ی تماس، واتساپ، رزرو یا خرید باید در موبایل همیشه در دسترس باشه؛ مثلاً با یه نوار ثابت پایین صفحه.
۹. سرعت روی اینترنت موبایل
اینترنت موبایل گاهی کندتره. سایت باید سبک باشه و سریع روی شبکه‌های ضعیف هم بارگذاری بشه. معیارهای Core Web Vitals برای سنجش همین تجربه تعریف شدن.
۱۰. تست روی دستگاه‌های واقعی
شبیه‌سازهای مرورگر مفیدن، ولی جای تست روی چند گوشی واقعی با اندازه‌ها و سیستم‌عامل‌های مختلف رو نمی‌گیرن.
نقاط شکست؛ سایت کجا تغییر شکل می‌ده؟
در طراحی سایت ریسپانسیو، نقاط شکست عرض‌هایی از صفحه هستن که در اون‌ها چیدمان تغییر می‌کنه. مثلاً تا یه عرض مشخص، محتوا در یه ستون نمایش داده می‌شه، از یه عرض بزرگ‌تر به دو ستون می‌رسه و در صفحه‌های عریض، سه یا چهار ستون. انتخاب این نقاط نباید فقط بر اساس اندازه‌ی دستگاه‌های رایج باشه، بلکه باید بر اساس محتوا تعیین بشه؛ یعنی هر جا محتوا شروع به فشرده یا پراکنده شدن کرد، همون‌جا نقطه‌ی شکست لازمه.
- گوشی‌های کوچیک و متوسط: یه ستون، منوی جمع‌شونده
- گوشی‌های بزرگ و تبلت عمودی: یه یا دو ستون
- تبلت افقی و لپ‌تاپ کوچیک: دو یا سه ستون
- دسکتاپ و مانیتورهای بزرگ: چیدمان کامل با حداکثر عرض محتوا
نکته‌ی مهم اینه که در صفحه‌های خیلی عریض، محتوا نباید بی‌نهایت کش بیاد. یه حداکثر عرض منطقی برای بخش متنی، خوانایی رو حفظ می‌کنه.
تایپوگرافی واکنش‌گرا
اندازه‌ی متن در طراحی سایت ریسپانسیو باید با صفحه هماهنگ باشه. تیترهای بزرگی که روی دسکتاپ چشمگیرن، روی گوشی ممکنه چند خط شکسته بشن و نصف صفحه رو بگیرن. پس اندازه‌ی تیترها باید در موبایل کوچیک‌تر و در دسکتاپ بزرگ‌تر باشه. متن اصلی هم نباید از حدی کوچیک‌تر بشه که خوندنش سخت بشه.
برای متن‌های فارسی، فاصله‌ی خطوط کمی بیشتر از متن‌های لاتین لازمه تا نقطه‌ها و حروف به هم نچسبن. طول هر خط هم نباید خیلی بلند باشه؛ خطوطی که از یه طرف صفحه‌ی بزرگ تا طرف دیگه کشیده می‌شن، چشم رو خسته می‌کنن.
الگوهای ناوبری در موبایل
منو یکی از چالش‌برانگیزترین بخش‌های طراحی سایت ریسپانسیو هست. رایج‌ترین الگو، منوی همبرگری یا سه‌خطیه که با لمس باز می‌شه. برای سایت‌هایی که چند بخش اصلی پرکاربرد دارن، نوار ناوبری ثابت پایین صفحه که در دسترس انگشت شسته، گزینه‌ی بهتریه. هر الگویی که انتخاب می‌کنید، مهم اینه که کاربر همیشه بدونه کجاست و چطور به صفحه‌ی اصلی یا بخش‌های مهم برگرده.
عکس و ویدیو در طراحی واکنش‌گرا
عکس‌ها بیشترین حجم صفحه رو تشکیل می‌دن. در طراحی سایت ریسپانسیو، هر عکس باید در چند اندازه آماده بشه تا مرورگر بر اساس اندازه‌ی صفحه و تراکم پیکسل، مناسب‌ترین نسخه رو دریافت کنه. فرمت‌های جدید عکس هم حجم رو بدون افت محسوس کیفیت کم می‌کنن. عکس‌هایی که پایین صفحه هستن، بهتره فقط وقتی کاربر به اون‌ها نزدیک می‌شه بارگذاری بشن.
ویدیوها هم باید با عرض صفحه تطبیق پیدا کنن و روی موبایل به‌طور خودکار و با صدا پخش نشن. یه عکس پیش‌نمایش با دکمه‌ی پخش، هم حجم اولیه‌ی صفحه رو کم می‌کنه و هم کنترل رو به کاربر می‌ده.
طراحی سایت ریسپانسیو برای فروشگاه اینترنتی
فروشگاه‌ها حساس‌ترین نوع سایت در تجربه‌ی موبایل هستن، چون مسیر خرید طولانی‌تره و هر مانعی می‌تونه به رها شدن سبد خرید ختم بشه. چند نکته‌ی کلیدی برای فروشگاه‌ها:
- جستجو و فیلتر در بالای صفحه و با دسترسی آسان
- عکس محصول با امکان کشیدن و بزرگ‌نمایی با انگشت
- دکمه‌ی افزودن به سبد ثابت و همیشه در دسترس
- فرم پرداخت کوتاه با ورودی‌های مناسب موبایل
- نمایش هزینه‌ی ارسال قبل از مرحله‌ی آخر
- امکان پرداخت سریع بدون ثبت‌نام اجباری
برای جزئیات بیشتر درباره‌ی ساخت فروشگاه، مقاله‌ی راه‌اندازی فروشگاه اینترنتی رو بخونید.
ریسپانسیو و دسترس‌پذیری
طراحی سایت ریسپانسیو و دسترس‌پذیری دست در دست هم هستن. کاربری که اندازه‌ی متن گوشیش رو بزرگ کرده، باید بتونه بدون به‌هم‌ریختن چیدمان از سایت استفاده کنه. کنتراست کافی رنگ‌ها برای استفاده زیر نور مستقیم خورشید، اندازه‌ی کافی اهداف لمسی و امکان استفاده از سایت در حالت افقی و عمودی گوشی، بخشی از همین تجربه‌ی فراگیر هستن.
چک‌لیست تحویل یه سایت ریسپانسیو
قبل از تحویل یا انتشار، این موارد رو روی چند دستگاه واقعی بررسی کنید:
- هیچ صفحه‌ای اسکرول افقی نداره
- همه‌ی متن‌ها بدون زوم خوانا هستن
- دکمه‌ها و لینک‌ها با انگشت راحت لمس می‌شن
- منو در همه‌ی اندازه‌ها درست باز و بسته می‌شه
- فرم‌ها صفحه‌کلید مناسب هر فیلد رو باز می‌کنن
- عکس‌ها در اندازه‌ی مناسب بارگذاری می‌شن
- اقدام اصلی همیشه در دسترسه
- سرعت صفحه‌ها روی اینترنت موبایل قابل‌قبوله
واکنش‌گرا یا تطبیقی؟
دو رویکرد اصلی برای سازگار کردن سایت با دستگاه‌های مختلف وجود داره. در رویکرد واکنش‌گرا، یه چیدمان منعطف به‌طور پیوسته با هر عرضی تطبیق پیدا می‌کنه. در رویکرد تطبیقی، چند چیدمان ثابت از قبل برای چند اندازه‌ی مشخص طراحی می‌شه و سایت بر اساس اندازه‌ی صفحه، یکی از اون‌ها رو انتخاب می‌کنه.
رویکرد واکنش‌گرا انعطاف بیشتری داره و با دستگاه‌های جدید که اندازه‌های غیرمعمول دارن هم سازگاره؛ به همین دلیل امروز رایج‌ترین روش طراحیه. رویکرد تطبیقی کنترل دقیق‌تری روی هر اندازه می‌ده، ولی نگهداریش سخت‌تره. در عمل، بیشتر سایت‌های حرفه‌ای ترکیبی از هر دو هستن: پایه‌ی منعطف با تنظیمات دقیق در نقاط شکست مهم.
نقش ابزارها و چارچوب‌ها
امروز ابزارها و چارچوب‌های طراحی زیادی وجود دارن که ساختن سایت واکنش‌گرا رو ساده‌تر کردن. این ابزارها کلاس‌ها و قوانین آماده‌ای برای چیدمان منعطف، فاصله‌گذاری و نقاط شکست ارائه می‌دن. ولی ابزار به‌تنهایی کافی نیست؛ تصمیم‌های اصلی درباره‌ی اینکه چه محتوایی در موبایل اول دیده بشه، کدوم دکمه‌ها برجسته باشن و مسیر کاربر چطور کوتاه‌تر بشه، تصمیم‌های طراحی هستن، نه فنی.
استفاده‌ی بی‌رویه از ابزارهای سنگین هم می‌تونه سایت رو کند کنه. یه طراحی سایت ریسپانسیو خوب، فقط از کدهای لازم استفاده می‌کنه تا روی اینترنت موبایل هم سریع باشه.
یه مثال از تأثیر ریسپانسیو روی کسب‌وکار
یه کلینیک رو در نظر بگیرید که سایتش فقط برای دسکتاپ طراحی شده. بیمارها با گوشی سایت رو باز می‌کنن، شماره‌ی تلفن رو در گوشه‌ی صفحه با فونت ریز پیدا نمی‌کنن، فرم نوبت‌گیری روی گوشی از صفحه بیرون می‌زنه و در نهایت، خیلی‌ها بی‌خیال می‌شن و سراغ کلینیک دیگه‌ای می‌رن که سایتش روی موبایل راحت کار می‌کنه.
بعد از بازطراحی واکنش‌گرا، دکمه‌ی تماس و نوبت‌گیری در نوار ثابت پایین صفحه قرار می‌گیره، فرم کوتاه و ساده می‌شه و صفحه‌ها سریع‌تر بارگذاری می‌شن. نتیجه‌ی این تغییرات معمولاً افزایش محسوس تماس‌ها و نوبت‌های آنلاینه؛ بدون اینکه حتی یه ریال بیشتر برای تبلیغات خرج بشه. برای آشنایی با نوبت‌دهی آنلاین، مقاله‌ی نوبت دهی اینترنتی رو ببینید.
اشتباهات رایج در طراحی سایت ریسپانسیو
- پنهان کردن محتوای مهم در نسخه‌ی موبایل
- دکمه‌های خیلی کوچیک یا خیلی نزدیک به هم
- پاپ‌آپ‌های بزرگ که کل صفحه‌ی گوشی رو می‌پوشونن
- عکس‌های سنگین بدون نسخه‌ی بهینه برای موبایل
- جدول‌های عریض که از صفحه بیرون می‌زنن
- متن‌های ریز که بدون زوم خونده نمی‌شن
- تست فقط روی یه دستگاه
چطور سایت خودمون رو تست کنیم؟
ساده‌ترین روش، باز کردن سایت روی گوشی خودتون و چند گوشی دیگه با اندازه‌های متفاوته. همه‌ی صفحه‌ها رو مرور کنید، فرم‌ها رو پر کنید، منو رو باز و بسته کنید و مسیر خرید یا تماس رو کامل طی کنید. در مرورگرهای دسکتاپ هم ابزار توسعه‌دهنده امکان شبیه‌سازی اندازه‌های مختلف صفحه رو می‌ده.
برای سنجش سرعت روی موبایل، ابزار PageSpeed Insights گزارش جداگانه‌ای برای موبایل ارائه می‌ده. به نسخه‌ی موبایل گزارش بیشتر از دسکتاپ اهمیت بدید.
ریسپانسیو برای صنف‌های مختلف
هر صنف اولویت‌های خودش رو در موبایل داره. برای رستوران و کافه، منو و دکمه‌ی تماس یا مسیریابی مهم‌ترن. برای کلینیک، دکمه‌ی نوبت‌گیری. برای فروشگاه، جستجو، فیلتر و سبد خرید. برای شرکت خدماتی، فرم درخواست و شماره‌ی تماس. طراحی سایت ریسپانسیو خوب، این اولویت‌ها رو در هر صنف متفاوت می‌چینه.
حالت تاریک، چرخش صفحه و جزئیات کوچیک
تجربه‌ی موبایل فقط به عرض صفحه محدود نمی‌شه. کاربرها گوشی رو می‌چرخونن، حالت تاریک سیستم‌عامل رو فعال می‌کنن، اندازه‌ی فونت پیش‌فرض رو تغییر می‌دن و گاهی با یه دست و در حال راه رفتن از سایت استفاده می‌کنن. یه طراحی سایت ریسپانسیو کامل، این شرایط رو هم در نظر می‌گیره: چیدمان در حالت افقی هم درست کار می‌کنه، رنگ‌ها در حالت تاریک خوانا می‌مونن و بزرگ شدن فونت، صفحه رو به‌هم نمی‌ریزه.
این جزئیات کوچیک شاید در نگاه اول به چشم نیان، ولی کاربرهایی که باهاشون روبه‌رو می‌شن، تفاوت رو حس می‌کنن. سایتی که در همه‌ی این شرایط درست رفتار کنه، حس کیفیت و حرفه‌ای بودن رو منتقل می‌کنه.
هزینه‌ی طراحی سایت ریسپانسیو
امروز ریسپانسیو بودن باید جزء پایه‌ی هر طراحی باشه، نه یه گزینه‌ی اضافه با هزینه‌ی جدا. اگه کسی برای ریسپانسیو کردن سایت جدید هزینه‌ی اضافه می‌گیره، یعنی روش کارش قدیمیه. برای سایت‌های قدیمی که ریسپانسیو نیستن، معمولاً بازطراحی منطقی‌تر از اصلاح تکه‌تکه‌ست. برای آشنایی با خدمات، صفحه‌ی طراحی سایت و برای بودجه‌ی محدود، صفحه‌ی طراحی سایت ارزان رو ببینید.
سوالات متداول درباره طراحی سایت ریسپانسیو
تفاوت سایت ریسپانسیو با نسخه‌ی موبایل جداگانه چیه؟
سایت ریسپانسیو یه نسخه‌ی واحده که با همه‌ی صفحه‌ها تطبیق پیدا می‌کنه. نسخه‌ی موبایل جداگانه یه سایت دوم با آدرس متفاوته که نگهداریش سخت‌تره و امروز کمتر توصیه می‌شه.
آیا سایت قدیمی رو می‌شه ریسپانسیو کرد؟
بستگی به ساختارش داره. گاهی با اصلاح ممکنه، ولی برای سایت‌های خیلی قدیمی، بازطراحی معمولاً نتیجه‌ی بهتر و ارزون‌تری داره.
ریسپانسیو بودن روی سئو اثر داره؟
بله، چون گوگل نسخه‌ی موبایل رو ملاک رتبه‌بندی قرار می‌ده و تجربه‌ی موبایل جزو معیارهای کیفیت صفحه‌ست.
چطور بفهمم سایتم ریسپانسیو هست یا نه؟
سایت رو روی گوشی باز کنید. اگه بدون زوم و اسکرول افقی، متن‌ها خوانا و دکمه‌ها قابل‌لمس هستن، احتمالاً ریسپانسیوه.
جمع‌بندی
طراحی سایت ریسپانسیو یعنی سایتی که روی هر دستگاهی تجربه‌ی خوبی بسازه. با رعایت ده اصل این مقاله، از طراحی موبایل‌اول و اولویت‌بندی محتوا تا دکمه‌های قابل‌لمس، عکس‌های بهینه و تست روی دستگاه‌های واقعی، سایت شما برای مشتری‌ها و گوگل آماده می‌شه.
اگه سایت فعلیتون روی موبایل مشکل داره یا می‌خواید سایت جدیدی با طراحی موبایل‌اول بسازید، از صفحه‌ی ثبت سفارش اقدام کنید یا برای امکانات خاص، صفحه‌ی طراحی سایت اختصاصی رو ببینید. برای مشاوره‌ی رایگان هم از طریق تماس با ما در ارتباط باشید.