طراحی واکنش گرا و مفهوم Mobile First | درس 39 + پروژه درس

درس 39 از دوره آموزش HTML و CSS ارومیا دیزاین

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

پروژه و پاسخ تمرین: دانلود پروژه درس 39 (ZIP)؛ شامل HTML، CSS، تصویر محلی، پاسخ مستقل و راهنمای آزمایش. فایل را استخراج کنید و index.html را باز کنید؛ پروژه بدون اینترنت و نصب ابزار اجرا می شود.

طراحی واکنش گرا یعنی چه؟

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

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

Mobile First؛ ابتدا نسخه باریک، سپس بهبود

در رویکرد Mobile First، استایل های پایه باید صفحه ای قابل استفاده در فضای کم بسازند. سپس در عرض بیشتر، قواعد تکمیلی را اضافه می کنیم. مثلا معرفی در حالت پایه یک ستون دارد و در فضای کافی دو ستونی می شود. نسخه باریک نباید پس از طراحی دسکتاپ و با پنهان کردن بخش های خراب ساخته شود؛ از ابتدا یک حالت کامل و خوانا است.

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

قبل از CSS، اولویت محتوا را مشخص کنید

در پروژه، کاربر ابتدا عنوان و توضیح خدمت را می بیند، سپس به لینک اصلی، مسیر یادگیری و تمرین می رسد. همین ترتیب را در HTML نگه می داریم. در صفحه باریک، ساختار سند باید به تنهایی قابل فهم باشد. اگر برای نمایش عریض، عناصر را با ترتیب های دیداری پیچیده جابه جا کنید، مسیر خواندن و پیمایش صفحه کلید ممکن است غیرمنتظره شود.

در درس انتخاب بین Flexbox و Grid دیدیم که روش چیدمان را برای هر سطح جدا انتخاب می کنیم. اینجا منو فلکس چندخطی دارد، کارت ها شبکه منعطف هستند و معرفی از یک ستون به دو ستون تغییر می کند. استفاده از چند ابزار در یک صفحه، وقتی هر کدام نیاز مشخصی را پاسخ دهند، ساختار را روشن تر می کند.

قدم اول؛ تنظیم درست viewport

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>پروژه Mobile First</title>
  <link rel="stylesheet" href="style.css">
</head>

meta viewport به مرورگر موبایل درباره عرض و مقیاس اولیه صفحه راهنمایی می دهد. بدون تنظیم مناسب، بعضی مرورگرهای موبایل ممکن است صفحه را با یک viewport مجازی عریض تر نمایش دهند و سپس آن را کوچک کنند. در این حالت، متن ریز به نظر می رسد و قواعد وابسته به عرض هم با انتظار شما هماهنگ نیستند. این تگ را در head قرار دهید؛ وجود آن به تنهایی صفحه را واکنش گرا نمی کند.

امکان بزرگ نمایی را با user-scalable=no یا محدودیت غیرضروری maximum-scale از کاربر نگیرید. اگر نوشته در موبایل نامناسب است، اندازه و چیدمان را اصلاح کنید. width=device-width به عرض در پیکسل CSS مربوط است؛ آن را با تعداد پیکسل فیزیکی نمایشگر یکی ندانید. برای شروع این پروژه، همین تنظیم معمول کافی است.

قدم دوم؛ ظرف منعطف با سقف عرض

* { box-sizing: border-box; }

.container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}

ظرف در فضای کم، عرض والد را می گیرد و در نمایشگر بزرگ از سقف مشخص بیشتر نمی شود. padding اجازه نمی دهد متن به لبه صفحه بچسبد. box-sizing برابر border-box، padding و border را در عرض اعلام شده وارد می کند؛ بنابراین ترکیب width: 100% با فاصله داخلی، بی دلیل ظرف را عریض تر نمی کند. اینجا 1100px انتخاب پروژه است، نه عدد اجباری طراحی واکنش گرا.

برای فهم تفاوت width و max-width، درس مدل جعبه CSS را مرور کنید. به جای عرض ثابت 1100px برای همه شرایط، سقف عرض داریم. margin-inline و padding-inline نیز با جهت متن هماهنگ می شوند و نیاز به تکرار قواعد راست و چپ را کاهش می دهند.

قدم سوم؛ متن باید جا برای رشد داشته باشد

body {
  line-height: 1.9;
}

h1 {
  font-size: 2rem;
  line-height: 1.5;
}

.reading { max-width: 65ch; }
.card { min-width: 0; overflow-wrap: anywhere; }

برای کادر متن، ارتفاع ثابت تعیین نمی کنیم؛ عنوان بلندتر و پاراگراف بیشتر باید بتوانند ارتفاع را افزایش دهند. rem اندازه را به اندازه فونت ریشه مرتبط می کند. برای مرور کاربرد واحدها، درس واحدهای اندازه گیری CSS را ببینید. استفاده از rem به تنهایی تضمین خوانایی نیست؛ خروجی واقعی و تنظیمات کاربر را هم بررسی کنید.

max-width برابر 65ch فقط سقف تقریبی طول سطر است؛ ch عرض تعداد مشخصی حرف فارسی را تضمین نمی کند و به معیار کاراکتر صفر در فونت مرتبط است. پس این مقدار نقطه شروع طراحی است. برای متن فارسی، عرض سطر و فاصله خطوط را با فونت واقعی و محتوا بسنجید. درس تایپوگرافی CSS کمک می کند اندازه متن را به خاطر جا دادن کارت ها بیش از حد کوچک نکنید.

قدم چهارم؛ تصویر منعطف و نسبت درست

<img src="responsive-scene.webp"
     width="960" height="600"
     alt="نمای شماتیک صفحه وب در قاب باریک و عریض">

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.hero img { width: 100%; }

max-width مانع بزرگ تر شدن نمایش تصویر از والد می شود و height: auto نسبت آن را حفظ می کند. ابعاد width و height در HTML به مرورگر درباره نسبت تصویر اطلاعات می دهند تا هنگام بارگیری بتواند فضا را بهتر رزرو کند. در این پروژه فایل تصویر محلی است و بدون اینترنت نمایش پیدا می کند.

کوچک شدن نمایش تصویر، حجم فایل دانلودی را خودکار کم نمی کند. برای کارایی واقعی باید ابعاد فایل، فشرده سازی و در پروژه های مناسب انتخاب تصویر با srcset و sizes را جدا بررسی کنید. در این درس هدف، جا گرفتن تصویر و حفظ نسبت است؛ تصویر اصلی معرفی را هم بی دلیل lazy نمی کنیم، چون می تواند در محدوده اولیه صفحه باشد.

قدم پنجم؛ منو و کارت ها بدون عرض ثابت

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
}

فلکس اجازه می دهد منو در فضای کم بشکند؛ عرض لینک ها از محتوای آن ها می آید. در شبکه کارت، حداقل پیشنهادی 240px داریم، اما min اجازه می دهد در والد باریک تر از این مقدار هم یک ستون جا بگیرد. با فضای بیشتر، تعداد ستون ها خودکار افزایش پیدا می کند. برای این تغییر، نیازی به نام گذاری مدل گوشی یا ساخت ده ها شرط نداریم.

منطق شبکه را در درس CSS Grid و رفتار منو را در درس Flexbox مرور کنید. پنهان کردن منوی موبایل بدون ساخت راه دسترسی جایگزین، طراحی واکنش گرا محسوب نمی شود. در نمونه این درس، همه لینک ها باقی می مانند و فقط به خط بعد می روند.

یک نمونه ساده از بهبود در عرض بیشتر

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.hero > * { min-width: 0; }

@media (min-width: 800px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

قاعده پایه تک ستونی است. از عرض viewport برابر 800px به بالا، قاعده تکمیلی دو ستون می سازد. min-width اینجا شرط حداقل عرض viewport است و به ویژگی min-width روی عنصر ربط مستقیمی ندارد. عدد را در این مثال بر اساس نیاز دو قسمت معرفی انتخاب کرده ایم؛ در جلسه بعد روش تعیین نقطه شکست و جزئیات مدیا کوئری را کامل تر بررسی می کنیم.

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

آزمایش طراحی واکنش گرا؛ فقط چند اسکرین شات کافی نیست

عرض پنجره را پیوسته کم و زیاد کنید و بین اندازه های رایج هم بایستید. در پروژه، عرض های 320، 375، 799، 800 و 1280 پیکسل برای بررسی نمونه پیشنهاد شده اند. نزدیک مرز تغییر را هم ببینید؛ در 799 معرفی باید تک ستونی و در 800 دو ستونی شود. اعداد، برنامه آزمایش همین پروژه هستند و تضمین پشتیبانی از تمام شرایط نیستند.

متن یک کارت را سه برابر کنید، عنوان را بلند کنید و بزرگ نمایی مرورگر را روی 200 درصد قرار دهید. به هم پوشانی، خروج متن، لینک های دور از دسترس و اسکرول افقی کل صفحه دقت کنید. بزرگ نمایی می تواند عرض قابل استفاده در پیکسل CSS را هم تغییر دهد؛ تغییر تعداد ستون ها در این وضعیت لزوما خطا نیست. مهم این است که محتوا قابل استفاده بماند.

با Tab تمام لینک ها را دنبال کنید و نشانه فوکوس را نگه دارید؛ درس focus-visible روش نمایش آن را توضیح می دهد. ابزار شبیه سازی مرورگر مفید است، اما جای آزمایش روی دستگاه واقعی، لمس و مرورگر دیگر را کاملا نمی گیرد. در صورت اسکرول افقی، درس overflow را مرور کنید و عنصر عامل سرریز را پیدا کنید.

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

در بخش practice پروژه، لینک های tools در حالت پایه ستونی هستند. از عرض حداقل 700px آن ها را ردیفی و چندخطی کنید، اما نسخه باریک را دست نزنید. این تمرین ترتیب Mobile First را روشن می کند: حالت پایه کامل است و فقط در فضای بیشتر بهبود می یابد. پیش از دیدن پاسخ، توضیح دهید چرا نوشتن قاعده عریض قبل از قاعده پایه ممکن است نتیجه را تغییر دهد.

@media (min-width: 700px) {
  .practice .tools {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

در فایل اصلی، display: flex، جهت column و gap برابر 12px برای tools وجود دارند. پاسخ فقط قواعد لازم برای فضای بیشتر را اضافه می کند. solution.css از ابتدا فعال نیست؛ پس از تلاش مستقل، خط زیر را بعد از style.css در head قرار دهید و رفتار 699 و 700 پیکسل را مقایسه کنید.

<link rel="stylesheet" href="solution.css">

پرسش های متداول

آیا Mobile First یعنی حذف امکانات در گوشی؟

خیر؛ نسخه باریک باید محتوای اصلی و مسیرهای ضروری را کامل و قابل استفاده نگه دارد. تغییر چیدمان با حذف دسترسی فرق دارد.

آیا meta viewport صفحه را خودکار واکنش گرا می کند؟

خیر؛ این تگ تنظیم مرتبط با viewport را فراهم می کند، اما اندازه گذاری و چیدمان مناسب همچنان لازم است.

آیا باید برای هر مدل گوشی یک شرط بنویسیم؟

خیر؛ شرایط را بر اساس نیاز محتوا و فضای موجود انتخاب کنید، نه فهرست نام دستگاه ها.

چرا تصویر کوچک نمایش داده می شود ولی هنوز سنگین است؟

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

آیا ZIP پاسخ تمرین و تصویر را هم دارد؟

بله؛ تصویر محلی، HTML، CSS اصلی، solution.css و راهنمای اجرای آفلاین داخل فایل هستند.

دانلود پروژه، تصویر محلی، راهنما و پاسخ تمرین درس 39

درس بعدی دوره، جلسه 40 «مدیا کوئری ها و تعیین نقاط شکست» است. برای مطالعه تکمیلی، راهنمای طراحی واکنش گرا در MDN و مستند meta viewport را ببینید.