طراحی سایت ریسپانسیو: اصول، بریک‌پوینت‌ها و اشتباه‌های رایج

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

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

سایت ریسپانسیو یعنی چه؟

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

این با «نسخه‌ی موبایل جدا» فرق دارد. سایت‌های قدیمی گاهی یک نسخه‌ی جدا مثل m.site.ir داشتند که باید جداگانه نگهداری می‌شد. امروز گوگل هم سایت‌ها را با نسخه‌ی موبایلشان ارزیابی می‌کند (Mobile-first indexing)، پس اگر سایت در موبایل ضعیف باشد، رتبه‌اش در کل جستجو آسیب می‌بیند.

موبایل اول (Mobile First)

بهترین روش این است که طراحی و کدنویسی از کوچک‌ترین صفحه شروع شود:

• در طراحی: اول قاب موبایل کشیده شود. اگر محتوا در ۳۶۰ پیکسل جا شد و خوانا بود، بزرگ کردنش برای دسکتاپ ساده است. برعکسش، یعنی جا دادن طرح شلوغ دسکتاپ در موبایل، معمولاً به حذف یا به‌هم‌ریختگی می‌رسد.
• در کد: استایل پایه برای موبایل نوشته شود و برای صفحه‌های بزرگ‌تر با min-width اضافه شود. این‌طوری گوشی‌ها کمترین CSS ممکن را پردازش می‌کنند.

.cards { display: grid; gap: 16px; }

@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

بریک‌پوینت‌های رایج

بریک‌پوینت نقطه‌ای است که چیدمان عوض می‌شود. عدد جادویی وجود ندارد و بهترین بریک‌پوینت جایی است که طرح خودت شروع به خراب شدن می‌کند. ولی این اعداد برای شروع مناسب‌اند:

یک نکته‌ی مهم: طرح را فقط در همین چند عرض تست نکن. پنجره‌ی مرورگر را آرام از ۳۲۰ تا ۱۹۲۰ پیکسل بکش و ببین در عرض‌های بین بریک‌پوینت‌ها چیزی بیرون نمی‌زند.

فونت و فاصله‌ی سیال

به‌جای اینکه اندازه‌ی تیتر را در هر بریک‌پوینت جدا تعریف کنی، می‌توانی با clamp() آن را سیال کنی تا با عرض صفحه آرام بزرگ و کوچک شود:

h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem); }

عدد وسط را لازم نیست دستی حساب کنی؛ سازنده‌ی clamp آن را از حداقل و حداکثر اندازه می‌سازد. برای تبدیل اندازه‌های پیکسلی طرح به rem هم مبدل px به rem را ببین. استفاده از rem باعث می‌شود اگر کاربر فونت گوشی‌اش را بزرگ کرده باشد، سایت هم به آن احترام بگذارد.

عکس‌های ریسپانسیو

عکسی که در دسکتاپ ۱۲۰۰ پیکسل عرض دارد، در گوشی شاید ۳۶۰ پیکسل نمایش داده شود. فرستادن همان فایل بزرگ به گوشی یعنی هدر رفتن اینترنت کاربر و کند شدن صفحه.

• با srcset چند اندازه از عکس بده تا مرورگر مناسب‌ترین را انتخاب کند.
• عکس‌ها را WebP کن و حجمشان را کم کن؛ ابزار کاهش حجم عکس این کار را گروهی و بدون آپلود انجام می‌دهد.
• برای همه‌ی عکس‌ها width و height بنویس تا صفحه هنگام بارگذاری جابه‌جا نشود.
• به عکس‌ها max-width: 100% بده تا هیچ‌وقت از ظرفشان بیرون نزنند.

اشتباه‌های رایج در سایت‌های ایرانی

۱. اسکرول افقی

بزرگ‌ترین نشانه‌ی سایت غیرریسپانسیو این است که صفحه در موبایل به چپ و راست هم حرکت کند. معمولاً یک جدول، یک عکس با عرض ثابت، یا یک متن انگلیسی طولانی بدون شکست خط مقصر است. جدول‌ها را داخل ظرفی با overflow-x: auto بگذار و برای متن‌های طولانی مثل آدرس‌ها overflow-wrap: anywhere بده.

۲. دکمه و لینک خیلی کوچک

انگشت از نشانگر موس خیلی درشت‌تر است. هر چیز قابل‌کلیک باید حداقل ۴۴ در ۴۴ پیکسل باشد و بین لینک‌های کنار هم فاصله‌ی کافی باشد.

۳. فیلد فرم بدون کیبورد مناسب

فیلد شماره موبایل باید کیبورد عددی باز کند. با type="tel" و inputmode="numeric" این مشکل حل می‌شود. اعداد فارسی که کاربر تایپ می‌کند را هم باید به انگلیسی تبدیل کنی؛ کد آماده‌اش در تبدیل اعداد فارسی به انگلیسی هست.

۴. متن خیلی ریز

اندازه‌ی متن اصلی در موبایل کمتر از ۱۶ پیکسل نباشد. اگر فیلد فرم فونت کوچک‌تر از ۱۶ داشته باشد، آیفون موقع کلیک روی آن صفحه را زوم می‌کند.

۵. پنهان کردن محتوا در موبایل

بعضی‌ها برای جا شدن طرح، بخش‌هایی را در موبایل مخفی می‌کنند. چون گوگل نسخه‌ی موبایل را می‌خواند، محتوای مخفی‌شده عملاً از دید جستجو هم حذف می‌شود. به‌جای حذف، چیدمان را ساده کن.

۶. فراموش کردن متا تگ viewport

بدون این خط، گوشی صفحه را مثل دسکتاپ با عرض ۹۸۰ پیکسل رندر می‌کند و همه‌چیز ریز می‌شود:

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

چطور سایت را در موبایل تست کنیم؟

• حالت موبایل مرورگر: در کروم با F12 و دکمه‌ی دستگاه‌ها، عرض‌های مختلف را امتحان کن.
• گوشی واقعی: شبیه‌ساز مرورگر همه‌چیز را نشان نمی‌دهد؛ حتماً روی یک اندروید و یک آیفون واقعی هم ببین، مخصوصاً منو، فرم‌ها و اسلایدرها.
• اینترنت کند: در تب Network کروم سرعت را روی Slow 4G بگذار و ببین صفحه چقدر طول می‌کشد تا قابل‌استفاده شود.
• PageSpeed Insights: گزارش موبایل گوگل مشکل‌های سرعت و چیدمان را با جزئیات نشان می‌دهد.

ریسپانسیو کردن سایت از روی طرح

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

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

جمع‌بندی

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