۱. Mobile-First یعنی چه و چرا حیاتی است؟

رویکرد Mobile-First به این معناست که شما ابتدا سایت را برای کوچک‌ترین صفحه (موبایل) طراحی می‌کنید و سپس به تدریج برای تبلت و دسکتاپ گسترش می‌دهید. این برعکس روش سنتی است که ابتدا نسخه دسکتاپ ساخته می‌شد و بعد با فشرده‌سازی، نسخه موبایل درست می‌کردند. مزایای Mobile-First:

• تمرکز روی محتوای اصلی: در صفحه کوچک، فقط عناصر ضروری نمایش داده می‌شوند.
• سرعت بالاتر: کد CSS ابتدا برای موبایل نوشته می‌شود و سپس با Media Queries برای دسکتاپ اضافه می‌گردد.
• سئوی بهتر: گوگل نسخه موبایل را ایندکس می‌کند و اگر آن نسخه بهینه باشد، رتبه شما بالا می‌رود.

برای مثال، در سایت دکتر رضوانی ما تمام صفحات را ابتدا با عرض ۳۲۰ پیکسل تست کردیم. نتیجه؟ Core Web Vitals عالی و نرخ پرش زیر ۳۰٪ روی موبایل. برای آشنایی با بهینه‌سازی سرعت، راهنمای Core Web Vitals را مطالعه کنید.

۲. Media Queries: قلب طراحی ریسپانسیو

Media Queries به شما اجازه می‌دهند بر اساس عرض صفحه، استایل‌های متفاوتی اعمال کنید. ساختار استاندارد Mobile-First به این صورت است:

/* استایل پایه برای موبایل */
.container { padding: 10px; font-size: 16px; }

/* تبلت (۷۶۸px به بالا) */
@media (min-width: 768px) {
    .container { padding: 20px; max-width: 720px; margin: auto; }
}

/* دسکتاپ (۱۰۲۴px به بالا) */
@media (min-width: 1024px) {
    .container { max-width: 960px; }
}

/* دسکتاپ بزرگ (۱۲۰۰px به بالا) */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}
                

نکته: همیشه از `min-width` استفاده کنید (Mobile-First). هرگز با `max-width` از دسکتاپ به موبایل نیایید.

۳. CSS Grid و Flexbox: دو ستون layout مدرن

Flexbox برای چیدمان‌های یک‌بعدی (مثلاً منوی افقی) و CSS Grid برای چیدمان‌های دو بعدی (مثلاً صفحه اصلی با سایدبار) استفاده می‌شود. ترکیب این دو به شما قدرتی بی‌نظیر می‌دهد.

مثال Flexbox برای منوی ریسپانسیو

nav ul {
    display: flex;
    flex-direction: column; /* موبایل: عمودی */
    gap: 10px;
}
@media (min-width: 768px) {
    nav ul { flex-direction: row; } /* تبلت و دسکتاپ: افقی */
}
                

مثال Grid برای صفحه اصلی

.main-layout {
    display: grid;
    grid-template-columns: 1fr; /* موبایل: یک ستون */
    gap: 20px;
}
@media (min-width: 768px) {
    .main-layout {
        grid-template-columns: 2fr 1fr; /* دسکتاپ: محتوا + سایدبار */
    }
}
                

۴. تصاویر واکنش‌گرا: `srcset` و `picture`

تصاویر بزرگترین قاتل سرعت در موبایل هستند. با ویژگی `srcset` می‌توانید چند نسخه از یک تصویر برای عرض‌های مختلف ارائه دهید:

<img src="small.webp"
     srcset="medium.webp 768w, large.webp 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     alt="توضیح">
                

۵. تایپوگرافی روان (Fluid Typography)

به جای استفاده از اندازه‌های ثابت، از واحدهای `vw` و `clamp()` استفاده کنید تا فونت به طور خودکار متناسب با عرض صفحه بزرگ و کوچک شود:

h1 { font-size: clamp(1.5rem, 5vw, 3rem); }
p { font-size: clamp(1rem, 2.5vw, 1.2rem); }
                

۶. تست و دیباگ: ابزارهای ضروری

همیشه سایت را روی دستگاه‌های واقعی تست کنید. اما برای توسعه، Chrome DevTools (حالت Device Mode) بهترین دوست شماست. همچنین از ابزارهای آنلاین مثل BrowserStack می‌توانید سایت را روی صدها دستگاه واقعی تست کنید.

۷. سوالات متداول (FAQ)