چطور یک وب‌سایت ریسپانسیو بسازیم؟

امروزه بیشتر کاربران با موبایل و تبلت وارد وب‌سایت‌ها می‌ شن. بنابراین، داشتن یک سایت ریسپانسیو دیگه یک انتخاب نیست؛ بلکه لازمه!

ریسپانسیو یعنی سایت شما به‌خوبی در تمام صفحه‌نمایش‌ها (موبایل، تبلت، لپ‌تاپ و...) نمایش داده بشه. توی این مقاله، قراره با روش‌های مختلف ساخت یک سایت ریسپانسیو آشنا بشیم. این راهنما برای کسانیه که با HTML و CSS آشنایی اولیه دارند.

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

سایت ریسپانسیو (Responsive Website) سایتی هستش که ظاهرش با توجه به اندازه صفحه کاربر تغییر می‌کنه.

مثلاً منویی که در دسکتاپ افقیه، در موبایل به صورت مجموعه ای از آیکون ها یا یک باکس پایین گوشی کاربر در میاد.

متن‌ها، تصاویر، ستون‌ها و همه عناصر سایت به شکل خودکار خودشون رو با دستگاه‌های مختلف سازگار می‌کنن.

چرا ریسپانسیو بودن مهمه؟

1. تجربه بهتر برای کاربر: کاربر بدون زوم یا اسکرول اضافی، راحت‌تر از سایت استفاده می‌کنه.
2. سئو بهتر در گوگل: گوگل به سایت‌های ریسپانسیو امتیاز بیشتری می‌ده.
3. افزایش بازدید و ماندگاری کاربر: وقتی کاربر راحتی بیشتری حس کنه، احتمال موندنش بیشتره.

روش‌های طراحی ریسپانسیو

۱. استفاده از Media Query در CSS

با Media Query می‌تونین تعیین کنین که وقتی عرض صفحه کمتر از مقدار خاصی شد، استایل‌ها تغییر کنن.

.box {
  width: 600px;
  background: lightblue;
}

@media (max-width: 768px) {
  .box {
    width: 100%;
    background: lightgreen;
  }
}

در این مثال، وقتی عرض صفحه کمتر از 768 پیکسل باشه، عرض باکس به 100٪ می‌رسه.

۲. استفاده از واحدهای نسبی

به‌جای استفاده از واحدهای ثابت مثل px، می‌تونی از واحدهای نسبی مثل %، vw، em استفاده کنی.

.container {
  width: 80vw;
}

این یعنی کانتینر ۸۰٪ عرض صفحه رو می‌گیره، نه یک مقدار ثابت.

۳. استفاده از Bootstrap

Bootstrap یک فریم‌ورک CSS آماده برای طراحی ریسپانسیوه. با استفاده از کلاس‌های آماده می‌تونی راحت ساختار ریسپانسیو بسازی.

قدم اول: لینک Bootstrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

قدم دوم: ساختار ستونی ریسپانسیو

<div class="container">
  <div class="row">
    <div class="col-md-6">ستون ۱</div>
    <div class="col-md-6">ستون ۲</div>
  </div>
</div>

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

نکات حرفه‌ای برای طراحی ریسپانسیو

• از حالت Mobile-First استفاده کنین: (یعنی طراحی رو از حالت موبایل شروع کنین و بعدا به حالت Desktop برید. به خاطر اینکه در گوشی فضای کمتری برای طراحی دارین و بعدا در حالت دسکتاپ فضا بیشتر میشه و طراحی راحت تر).
• تصاویر رو با max-width: 100% تطبیق بدین تا از کادر بیرون نزنن.
• با ابزار DevTools مرورگر، سایت رو در حالت موبایل تست کن.
• فونت‌ها و دکمه‌ها رو طوری انتخاب کنین که در موبایل هم خوانا باشن.

جمع‌بندی

برای ساخت یک سایت ریسپانسیو میتونین با استفاده از Media Query، واحدهای نسبی و فریم‌ورک Bootstrap می‌تونین به‌ راحتی صفحات وبی بسازین که در همه دستگاه‌ها به‌ درستی نمایش داده می‌شن. این کار نه‌ تنها تجربه کاربر رو بهتر می‌کنه، بلکه روی سئوی سایت هم تاثیر مثبت داره.

امیدواریم که این مقاله برای شما مفید بوده باشه!!