سایتی را به یاد می‌آورم که صاحبش می‌گفت ریسپانسیو است، چون در گوشی «جمع می‌شود»؛ اما کاربران شکایت داشتند که جدول قیمت‌ها روی موبایل افقی اسکرول می‌شود و دکمه اصلی زیر نوار مرورگر پنهان می‌ماند. آن تجربه برای من تفاوت مهمی را روشن کرد: ریسپانسیو واقعی، به‌معنای طراحی عمدی برای هر عرض است، نه جمع‌شدن از شدت فشار. این نوشته، همان روشی است که در پروژه‌های واقعی برای ریسپانسیو کردن سایت به‌کار می‌برم.

ریسپانسیو بودن دقیقاً یعنی چه؟

ریسپانسیو (Responsive) یا واکنش‌گرا، به معنای طراحی عمدی برای همه عرض‌های ممکن است؛ از ۳۲۰ پیکسل گوشی کوچک تا ۴K مانیتور بزرگ. این تعریف ساده، دو خطای رایج را روشن می‌کند:

  • خطای اول: تصور این‌که ریسپانسیو بودن، یعنی سایت در موبایل باز می‌شود. همه سایت‌ها در موبایل باز می‌شوند؛ حتی سایت‌های به‌هم‌ریخته. ریسپانسیو یعنی سایت در موبایل با عمد طراحی شده است، نه این‌که از شدت فشار، اجزا از هم پاشیده باشند.
  • خطای دوم: تصور این‌که برای موبایل، نسخه جداگانه لازم است. نسخه جداگانه یعنی دو نسخه از محتوا، دو آدرس و دو بار آپدیت؛ تجربه‌ام می‌گوید این رویکرد در بلندمدت شکست می‌خورد. ریسپانسیو یعنی یک سایت با یک URL که در همه اندازه‌ها با عمد طراحی شده است.

سه لایه فنی که ریسپانسیو واقعی روی آن‌ها ساخته می‌شود: تگ viewport، مدیاکوئری‌های عمدی و چیدمان سیال. هر سه، در این مقاله به‌ترتیب بررسی می‌شوند. اگر با مفهوم پایه ریسپانسیو آشنا نیستید، ابتدا طراحی ریسپانسیو چیست و قالب وردپرس ریسپانسیو چیست را بخوانید و بعد به این مقاله برگردید.

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

ذهنیت درست: طراحی عمدی، نه جمع‌شدن تصادفی

ریسپانسیو کردن سایت، فرآیندی است که با سه اصل ساده شروع می‌شود و در سراسر کار رعایت می‌شود:

  1. موبایل‌اول (Mobile-First): طراحی از کوچک‌ترین عرض شروع می‌شود و به‌تدریج به عرض‌های بزرگ‌تر گسترش می‌یابد؛ نه برعکس. طراحی از دسکتاپ، همیشه به موبایلِ فشرده و ناخوانا می‌رسد. جزئیات این رویکرد در طراحی موبایل اول چیست و طراحی موبایل اول چه مزیتی دارد آمده است.
  2. بازچینش، نه کوچک‌سازی: در ریسپانسیو واقعی، چیدمان اجزا با تغییر عرض بازچینش می‌شود؛ مثل تبدیل جدول چندستونه به کارت‌های پشته‌ای در موبایل. اگر فقط اجزا کوچک‌تر شوند، ریسپانسیو نیست، فشرده‌سازی است.
  3. محتوا، تعیین‌کننده چیدمان: نقطه‌های شکست (breakpoints) بر پایه محتوای واقعی سایت تعیین می‌شوند، نه بر پایه عرض دستگاه‌های محبوب. اگر جدول در ۷۰۰ پیکسل می‌شکند، نقطه شکست در ۷۰۰ پیکسل است؛ نه در ۷۶۸ که عرض iPad است.

در تجربه‌ام، تیم‌هایی که این سه اصل را در سراسر کار رعایت می‌کنند، به سایت‌هایی می‌رسند که در هر عرضی حس می‌کنند برای همان عرض ساخته شده‌اند. اصول کلی در اصول طراحی ریسپانسیو و اصول طراحی ریسپانسیو آمده است.

گام اول: تگ viewport و پایه‌های فنی

اولین و مهم‌ترین گام، اضافه‌کردن تگ viewport در بخش <head> قالب است. بدون این تگ، مرورگر موبایل، صفحه را با عرض مجازی ۹۸۰ پیکسل رندر می‌کند و کاربر برای خواندن متن، مجبور به زوم است. تگ درست:

<meta name="viewport" content="width=device-width, initial-scale=1">

سه نکته در این تگ که در پروژه‌ها به آن‌ها توجه می‌کنم:

  • width=device-width: عرض صفحه را با عرض دستگاه کاربر هم‌راستا می‌کند.
  • initial-scale=1: صفحه را در مقیاس ۱ بارگذاری می‌کند، بدون زوم اولیه.
  • نبود maximum-scale=1 و user-scalable=no: این دو مورد، زوم کاربر را مسدود می‌کنند و مشکل دسترس‌پذیری جدی می‌سازند؛ در پروژه‌ها حذفشان می‌کنم. مطالب مربوط در WCAG چیست و چه کاربردی دارد آمده است.

در قالب‌های وردپرس، این تگ معمولاً از طریق تابع wp_head() یا به‌طور مستقیم در header.php قرار می‌گیرد. اگر تگ در قالب شما نیست، در اولین فرصت اضافه‌اش کنید؛ بدون این تگ، هر تلاش بعدی برای ریسپانسیو کردن، نیمه‌کاره می‌ماند.

گام دوم: مدیاکوئری و نقطه‌های شکست

مدیاکوئری (Media Query)، ابزار اصلی CSS برای اعمال استایل‌های متفاوت در عرض‌های مختلف است. ساختار پایه:

@media (min-width: 768px) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

سه اصل در طراحی مدیاکوئری که در پروژه‌ها رعایت می‌کنم:

  • استفاده از min-width به‌جای max-width: طراحی موبایل‌اول یعنی استایل پایه برای موبایل است و مدیاکوئری‌ها با min-width به‌تدریج عرض‌های بزرگ‌تر را پوشش می‌دهند. استفاده از max-width، به طراحی دسکتاپ‌اول می‌رسد که در عمل، به موبایلِ فشرده منجر می‌شود.
  • نقطه‌های شکست بر پایه محتوا: شکست‌ها در جاهایی که محتوا می‌شکند، نه در اعداد رُند ۷۶۸ و ۹۶۰. با تغییر عرض مرورگر، نقطه‌ای که چیدمان می‌شکند را پیدا کنید و مدیاکوئری را همان‌جا بنویسید.
  • کمترین تعداد شکست: هر مدیاکوئری، هزینه نگهداری دارد. در پروژه‌ها، دو یا سه نقطه شکست برای اکثر سایت‌ها کافی است: حدود ۴۸۰، حدود ۷۶۸ و بالای ۱۰۲۴. شکست‌های بیشتر، معمولاً نشانه طراحی شکننده است، نه طراحی دقیق‌تر.

جزئیات بیشتر در مدیاکوئری در CSS و مدیاکوئری در طراحی ریسپانسیو آمده است.

گام سوم: چیدمان سیال با Flexbox و Grid

مدیاکوئری تنها نیمی از کار ریسپانسیو است. نیم دیگر، استفاده از چیدمان سیال (Fluid Layout) است که بدون مدیاکوئری، در هر عرضی به‌طور طبیعی بازچینش شود. دو ابزار اصلی:

ابزارمناسب برایمزیت کلیدی
Flexboxچیدمان تک‌بعدی (ردیف یا ستون)جریان طبیعی و انعطاف‌پذیر
Gridچیدمان دوبعدی (سطر و ستون)کنترل دقیق‌تر روی ساختار کلان

سه اصل در استفاده از این دو ابزار که در پروژه‌ها رعایت می‌کنم:

  • واحدهای نسبی به‌جای ثابت: %، fr، min-content، max-content و clamp() به‌جای پیکسل‌های ثابت. این کار، اجزا را در برابر تغییر عرض مقاوم می‌کند.
  • حداکثر عرض برای خوانایی: در کنار سیال بودن، عرض محتوای متنی محدود شود؛ با max-width: 65ch، متن در مانیتورهای بزرگ ناخوانا نمی‌شود.
  • اجتناب از موقعیت مطلق (absolute): عناصر با position: absolute در چیدمان سیال، اغلب در عرض‌های کوچک از کادر بیرون می‌زنند. اگر لازم است استفاده شود، باید در مدیاکوئری عرض کوچک، به حالت عادی برگردد.

جزئیات بیشتر در فلکس‌باکس در CSS و گرید در CSS آمده است.

ریسپانسیو با مدیاکوئری ساخته نمی‌شود؛ با چیدمان سیال ساخته می‌شود. مدیاکوئری فقط در جاهایی است که چیدمان سیال به کمک نیاز دارد.

گام چهارم: تایپوگرافی سیال و خوانایی فارسی

تایپوگرافی در ریسپانسیو، صرفاً تغییر اندازه فونت نیست؛ یک تصمیم خوانایی است. سه اقدام در پروژه‌ها:

  • اندازه سیال با clamp(): به‌جای اندازه ثابت، از تابع clamp() استفاده می‌کنم تا فونت به‌طور طبیعی در عرض‌های مختلف تغییر کند:
h1 {
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}
  • ارتفاع خط متناسب: در عرض‌های کوچک، ارتفاع خط باید کمی بیشتر باشد تا خوانایی حفظ شود؛ در عرض‌های بزرگ، می‌تواند کمی کمتر شود.
  • خوانایی فارسی: در متن فارسی، ارتفاع خط، فاصله حروف و ارتفاع نیم‌فاصله باید تنظیم شوند؛ تنظیمات انگلیسی در فارسی، به متن فشرده و ناخوانا می‌رسد. جزئیات در تایپوگرافی فارسی در طراحی وب و بهینه‌سازی تایپوگرافی برای موبایل.
  • حداقل اندازه خوانا: در موبایل، اندازه متن اصلی نباید زیر ۱۶ پیکسل باشد؛ کمتر از این، کاربر برای خواندن زوم می‌کند و تجربه‌اش می‌شکند.

در پروژه‌های ایرانی، بیشترین شکایت درباره تجربه موبایل، از متن‌های ریز و فشرده می‌آید. تنظیم دقیق تایپوگرافی، بزرگ‌ترین بهبود ریسپانسیو در سایت‌های فارسی است.

گام پنجم: تصویر پاسخگو و کنترل رسانه

تصاویر و رسانه‌ها، دومین نقطه ریسک ریسپانسیو هستند. سه اقدام در پروژه‌ها:

  1. تصویر با max-width: 100%: تصاویر نباید از کادر بیرون بزنند. با این قاعده، همه تصاویر به‌طور طبیعی با کادر مادر هم‌عرض می‌شوند:
img {
  max-width: 100%;
  height: auto;
  display: block;
}
  1. تصویر پاسخگو با srcset: ارائه چند نسخه از تصویر و انتخاب خودکار مناسب‌ترین توسط مرورگر. این کار، هم سرعت موبایل را بالا می‌برد و هم کیفیت را در دسکتاپ حفظ می‌کند. جزئیات در تصاویر ریسپانسیو چیست.
  2. جاسازی رسانه با نسبت ثابت: ویدئو و iframe باید در کادری با نسبت ثابت قرار بگیرند تا در عرض‌های کوچک، ارتفاع متناسب داشته باشند:
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

در پروژه‌ها، بیشتر شکست‌های ریسپانسیو از جدول‌های چندستونه یا iframe‌های ویدئویی می‌آید؛ همین دو قاعده کوچک، بخش بزرگی از این شکست‌ها را حل می‌کند.

گام ششم: اجزای تعاملی و دسترس‌پذیری

در ریسپانسیو، اجزای تعاملی (دکمه، فرم، منو) نیاز به توجه ویژه دارند. سه اقدام در پروژه‌ها:

  • دکمه‌ها با اندازه لمس کافی: حداقل ۴۴ در ۴۴ پیکسل، با فاصله کافی از یکدیگر. این اندازه، توسط دستورالعمل‌های دسترس‌پذیری توصیه شده است و در تجربه من، بیشترین اثر را روی نرخ تکمیل فرم موبایل دارد. اصول در WCAG چیست.
  • فرم‌های درست در موبایل: فیلدهای تلفن با inputmode="tel" (کیبورد عددی)، ایمیل با type="email"، و فیلدهای بزرگ کافی برای لمس. این تنظیمات کوچک، نرخ تکمیل فرم را چند برابر می‌کند. راهنما در بهینه‌سازی فرم‌های سایت.
  • منوی موبایل قابل‌اعتماد: منوی همبرگری باید با یک انگشت شست باز شود، زیرمنوها در لایه درست قرار بگیرند و بستن منو، اسکرول صفحه را قفل نکند. این نوع اجزا، در تجربه من بیشترین شکست ریسپانسیو را دارند. اصول طراحی منو در طراحی UI برای موبایل آمده است.

در پروژه‌ها، این اجزا را روی دستگاه واقعی (نه شبیه‌ساز مرورگر) تست می‌کنم؛ چون رفتار واقعی لمس، در شبیه‌ساز قابل شبیه‌سازی نیست. روش تست در تست ریسپانسیو در مرورگرها و تست طراحی ریسپانسیو آمده است.

اشتباهات رایج در ریسپانسیو کردن سایت

در پروژه‌هایی که ریسپانسیو کردن سایت پیگیری شده، چند الگوی تکراری دیده‌ام که شکست را تضمین می‌کند:

  • نبود تگ viewport: بدون این تگ، سایت در موبایل با عرض مجازی ۹۸۰ پیکسل رندر می‌شود و ریسپانسیو کار نمی‌کند.
  • مسدودکردن زوم کاربر: حذف user-scalable=no از تگ viewport؛ این مورد، مشکل دسترس‌پذیری جدی است.
  • طراحی دسکتاپ‌اول: شروع از عرض بزرگ و اضافه‌کردن استایل‌های کوچک؛ نتیجه، موبایلِ فشرده نه طراحی‌شده.
  • استفاده بی‌رویه از position: absolute: این موقعیت در عرض کوچک، اغلب از کادر بیرون می‌زند.
  • نادیده گرفتن جدول‌های چندستونه: جدول‌های پهن، در موبایل افقی اسکرول می‌شوند و شکست مهم ریسپانسیو می‌سازند.
  • تست فقط در شبیه‌ساز: شبیه‌ساز مرورگر، رفتار واقعی لمس، کیبورد و اسکرول را نشان نمی‌دهد.
  • نبود تست با متن فارسی: متن‌های فارسی با ساختار متفاوت، در چیدمان‌های کپی‌شده از قالب‌های انگلیسی می‌شکنند.
  • فراموش کردن منابع ناامن: تصاویر و اسکریپت‌های HTTPS در موبایل، با نبود پشتیبانی صحیح، شکست می‌خورند.
  • توجه صرف به عرض و غفلت از ارتفاع: کیبورد موبایل، ارتفاع ویوپورت را کم می‌کند؛ چیدمانی که فقط با عرض کار می‌کند، با کیبورد می‌شکند.

برای مرور ساختاریافته‌تر، اشتباهات رایج طراحی ریسپانسیو و اشتباهات رایج چیدمان ریسپانسیو را ببینید. اگر روی سایت فروشگاهی کار می‌کنید، طراحی ریسپانسیو برای فروشگاه‌های اینترنتی نکات اختصاصی دارد.

پرسش‌های پرتکرار درباره ریسپانسیو کردن سایت

  • چگونه سایت را ریسپانسیو کنیم؟ با اضافه‌کردن تگ viewport در head، طراحی موبایل‌اول با مدیاکوئری‌های min-width، استفاده از چیدمان سیال با Flexbox و Grid و واحدهای نسبی، تایپوگرافی سیال با clamp()، تصویر پاسخگو با srcset، طراحی اجزای تعاملی با اندازه لمس کافی، و تست روی دستگاه واقعی.
  • آیا قالب‌های وردپرس به‌طور پیش‌فرض ریسپانسیو هستند؟ قالب‌های مدرن وردپرس معمولاً ریسپانسیو هستند، اما سطح کیفیت متفاوت است. بعضی قالب‌ها فقط از نظر ظاهری جمع می‌شوند؛ برای اطمینان، قالب را در دستگاه واقعی تست کنید.
  • چند نقطه شکست (breakpoint) لازم است؟ در بیشتر سایت‌ها، دو یا سه نقطه شکست کافی است: حدود ۴۸۰، ۷۶۸ و بالای ۱۰۲۴ پیکسل. نقاط باید بر پایه محتوای واقعی تعیین شوند، نه بر پایه اعداد رُند.
  • آیا باید نسخه جداگانه موبایل بسازیم؟ نه. نسخه جداگانه، دو نسخه از محتوا، دو URL و دو بار نگهداری می‌سازد. ریسپانسیو یعنی یک سایت با یک URL که در همه عرض‌ها با عمد طراحی شده است.
  • چگونه ریسپانسیو بودن سایت را تست کنیم؟ با تست روی دستگاه واقعی (نه فقط شبیه‌ساز مرورگر)، تست با متن فارسی، تست فرم‌ها با کیبورد موبایل، تست منوی موبایل با لمس، و تست جدول‌های چندستونه. مرورگرهای ایرانی و دستگاه‌های میان‌رده هم باید تست شوند.

ریسپانسیو، تصمیم معماری نه تنظیم جانبی

ریسپانسیو کردن سایت، مانند بسیار از تصمیم‌های مهندسی وب، در مرحله معماری گرفته می‌شود، نه در مرحله پولیش نهایی. تجربه‌ام می‌گوید سایت‌هایی که از ابتدا با ذهنیت موبایل‌اول ساخته شده‌اند، در سال دوم به‌مراتب راحت‌تر از سایت‌هایی که بعداً ریسپانسیو شده‌اند، نگهداری می‌شوند؛ چون ساختار، به‌طور طبیعی برای هر عرض کار می‌کند. اگر امروز فقط یک کار می‌کنید، همین حالا صفحه اصلی سایت خودتان را در گوشی واقعی باز کنید و سه پرسش را صادقانه جواب دهید: دکمه اصلی کجاست، متن خوانا است و هیچ چیزی افقی اسکرول نمی‌شود. اگر پاسخ هر سه مثبت است، مسیر ریسپانسیو را درست رفته‌اید. اگر در پروژه‌ای ریسپانسیو کردن سایت را انجام داده‌اید، برای من جالب است بدانید کدام لایه بیشترین اثر را داشت و کجا شکست غیرمنتظره‌ای رخ داد؛ تجربه‌تان را در دیدگاه‌ها بنویسید تا برای خواننده بعدی، نقشه روشن‌تری ساخته شود. 📱