Mobile First در برابر Desktop First

از کجا شروع کنیم؟ Mobile First در برابر Desktop First

در درس قبل، به‌طور خلاصه به دو فلسفه طراحی اشاره کردیم. حالا وقتشه این دو رویکرد رو، با جزئیات کامل، مثال‌های عملی و دلایل فنی، مقایسه کنیم؛ چون انتخاب بین این دو، مستقیماً روی نحوه نوشتن Media Queryها (که در درس بعدی می‌بینیم) و حتی کیفیت Performance صفحه اثر می‌ذاره.

Desktop First: رویکرد سنتی

.container {
  width: 1200px;
  display: flex;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    flex-direction: column;
  }
}

در رویکرد Desktop First، استایل پایه (یعنی کدی که بدون هیچ Media Query نوشته می‌شه)، برای بزرگ‌ترین صفحه‌نمایش (معمولاً دسکتاپ) طراحی می‌شه. سپس، با Media Queryهایی که از max-width استفاده می‌کنن، به‌تدریج، برای صفحه‌نمایش‌های کوچک‌تر، استایل‌ها ساده‌تر یا بازآرایی می‌شن.

Mobile First: رویکرد مدرن

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .container {
    width: 1200px;
    flex-direction: row;
  }
}

در رویکرد Mobile First، این ترتیب کاملاً برعکس می‌شه: استایل پایه، برای کوچک‌ترین صفحه‌نمایش (موبایل) نوشته می‌شه. سپس، با Media Queryهایی که از min-width استفاده می‌کنن، به‌تدریج، با افزایش عرض صفحه، ویژگی‌های بیشتر و پیچیده‌تری اضافه می‌شن.

چرا Mobile First امروزه رویکرد ترجیحی محسوب می‌شود؟

چند دلیل فنی و عملی مهم، Mobile First رو به رویکرد رایج‌تر در پروژه‌های مدرن تبدیل کرده:

دلیل ۱: تناسب با نحوه Cascade در CSS

همون‌طور که در فصل ۲ با Cascade و Source Order دیدیم، در تساوی Specificity، Ruleای که دیرتر میاد (پایین‌تر نوشته می‌شه)، معمولاً برنده می‌شه. Media Queryهای min-width (که در Mobile First استفاده می‌شن)، به‌طور طبیعی، با این منطق هماهنگ‌ترن: استایل پایه ساده، و استایل‌های پیچیده‌تر، بعداً و به‌عنوان لایه‌های اضافه، روی اون قرار می‌گیرن؛ نه این‌که مجبور باشیم مدام چیزهایی رو Override یا Reset کنیم (که در Desktop First، معمولاً لازمه).

دلیل ۲: اولویت به تجربه موبایل

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

دلیل ۳: Performance بهتر روی دستگاه‌های ضعیف‌تر

/* Mobile First: مرورگر موبایل فقط استایل پایه را می‌خواند */
.box {
  padding: 10px;
}

@media (min-width: 1024px) {
  .box {
    padding: 40px;
  }
}

در Mobile First، یک مرورگر موبایل (که معمولاً محدودیت پردازشی بیشتری داره)، فقط استایل‌های پایه (ساده‌تر) رو می‌خونه و اجرا می‌کنه؛ Media Queryهای مربوط به صفحه‌نمایش‌های بزرگ‌تر، اصلاً روی موبایل فعال نمی‌شن. در Desktop First، برعکس این اتفاق می‌افته: مرورگر موبایل، باید ابتدا استایل‌های سنگین‌تر دسکتاپ رو بخونه، و بعد، با Media Query، بخشی از اون‌ها رو Override کنه؛ که از نظر حجم پردازش، کمی ناکاراتره.

یک مقایسه کامل در جدول

ویژگی	Mobile First	Desktop First
نوع Media Query غالب	min-width	max-width
استایل پایه (بدون Media Query)	ساده، مخصوص موبایل	پیچیده، مخصوص دسکتاپ
جهت افزایش پیچیدگی	از ساده به پیچیده (با افزایش عرض)	از پیچیده به ساده (با کاهش عرض)
هماهنگی با منطق Cascade	طبیعی و روان	معمولاً نیاز به Override بیشتر
وضعیت امروز	رویکرد ترجیحی و رایج	هنوز در برخی پروژه‌های قدیمی‌تر دیده می‌شود

یک مثال کامل و مقایسه‌ای برای یک چیدمان سه‌ستونه

/* رویکرد Mobile First */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

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

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

در این مثال Mobile First، ابتدا یک ستون (مناسب موبایل)، بعد دو ستون (از ۶۰۰ پیکسل به بعد)، و در نهایت سه ستون (از ۱۰۰۰ پیکسل به بعد) تعریف شده؛ هر Media Query، فقط چیزی رو که لازمه اضافه می‌کنه، بدون نیاز به Reset کردن چیز دیگه‌ای.

چه زمانی هنوز Desktop First معنا دارد؟

هرچند Mobile First، امروزه رویکرد غالبه، ولی در بعضی پروژه‌های بسیار خاص (مثلاً ابزارهای داخلی سازمانی که فقط قراره روی دسکتاپ استفاده بشن، یا داشبوردهای پیچیده مدیریتی که اصلاً قرار نیست روی موبایل باز بشن)، ممکنه شروع از دسکتاپ، از نظر عملی، منطقی‌تر باشه؛ ولی این حالت‌ها، استثنا محسوب می‌شن، نه قاعده.

نکات مهم

• Mobile First از min-width و طراحی از ساده به پیچیده استفاده می‌کند؛ Desktop First از max-width و طراحی از پیچیده به ساده.
• Mobile First، به‌خاطر هماهنگی بهتر با منطق Cascade و Performance بهتر روی موبایل، امروزه رویکرد ترجیحی محسوب می‌شود.
• در پروژه‌های بسیار خاص و کاملاً مخصوص دسکتاپ، Desktop First هنوز می‌تواند انتخاب منطقی باشد، ولی این حالت استثناست.

اشتباهات رایج

• ترکیب نامنظم min-width و max-width در یک پروژه، بدون پیروی از یک استراتژی واحد و منسجم.
• شروع از Desktop First به‌صورت پیش‌فرض و بدون فکر، در حالی که اکثریت پروژه‌های امروزی، از Mobile First بیشتر سود می‌برند.
• نوشتن استایل‌های پیچیده و سنگین در حالت پایه (بدون Media Query)، که روی موبایل هم اجرا می‌شود و Performance را کاهش می‌دهد.

جمع‌بندی

Mobile First، با شروع از ساده‌ترین استایل (برای موبایل) و افزودن پیچیدگی با Media Queryهای min-width، امروزه رویکرد ترجیحی طراحی واکنش‌گراست؛ چون هم با منطق Cascade هماهنگ‌تره و هم Performance بهتری روی دستگاه‌های موبایل ارائه می‌ده. Desktop First، رویکرد سنتی‌تریه که از max-width استفاده می‌کنه و امروزه بیشتر در پروژه‌های خاص و مخصوص دسکتاپ کاربرد داره.