طراحی واکنشگرا چیست؟
بیش از یک دهه قبل که تنوع دستگاه‌ها خیلی کمتر بود، طراحی صفحات وب با عرض ثابت (fixed width) یک موضوع
پذیرفته‌شده و بدیهی بود و اکثر کاربران نهایی تجربه‌ی یکسانی از مشاهده‌ی یک وبسایت داشتند. این عرض ثابت
معمولاً 960px بود و کاربرانی که از نمایشگرهایی با رزولوشن بالاتر استفاده می‌کردند، مقداری فضای خالی در دو
طرف صفحه داشتند.
اما در سال 2007 اپل با انتشار iPhone اولین تجربه‌ی واقعی از وبگردی با موبایل را ارائه داد و روش تعامل مردم
با وب برای همیشه تغییر کرد. مطابق آماری که در وبسایت StatCounter ارائه شده:
-
در طول یک سال از جولای 2010 تا جولای 2011 میزان استفاده از مرورگرهای موبایلی از 2.86 به بیش از 7 درصد
رسید.
-
در سپتامبر 2019 میزان استفاده از مرورگرهای موبایلی 51.11 درصد، مرورگرهای دسکتاپ 45.18 درصد و تبلت‌ها
3.71 درصد گزارش شد.
-
تا جولای 2022 سهم مرورگرهای موبایلی به 60.73 رسید، در حالی که سهم مرورگرهای دسکتاپ به 37 درصد و تبلت به
2.27 درصد کاهش یافت.
اینکه تعداد افرادی که از دستگاه‌های با نمایشگر کوچکتر برای مشاهده‌ی صفحات وب استفاده می‌کنند، در حال افزایش
بوده و هست، یک واقعیت غیر قابل انکار است. اما از طرف دیگر، همزمان استفاده از نمایشگرهای 40 اینچی ultrawide
نیز رایج شده است. در حقیقت، بر خلاف گذشته، حالا دیگر بین کوچکترین و بزرگترین نمایشگری که کاربران برای
مشاهده‌ی صفحات وب استفاده می‌کنند، تفاوت زیادی وجود دارد و در بین این کوچکترین و بزرگترین، دستگاه‌های متنوع
دیگری نیز وجود دارد. بنابراین، دیگر طراحی با عرض ثابت به‌هیچ‌وجه محلی از اعراب ندارد.
پس، مسئله از این قرار است:
کاربران نهایی از دستگاه‌های مختلفی برای مشاهده‌ی صفحات وب استفاده می‌کنند و بنابراین، طراحی یک صفحه‌ی وب
باید به‌گونه‌ای باشد که در هر دستگاه به شکلی مناسب برای همان دستگاه نمایش داده شود. مثلاً عکسی که در یک
نمایشگر بزرگ با سایز مشخصی نمایش داده می‌شود، در نمایشگرهای کوچکتر با سایز کوچکتری به نمایش درآید. یا سایز
فونت متون بسته به ابعاد نمایشگر، تغییر داده شود.
و اما راه حل:
طراحی واکنشگرای صفحات وب یا RWD به ما امکان می‌دهد که با استفاده از HTML و CSS صفحاتی را طراحی کنیم که به
تغییر ابعاد نمایشگر (و خیلی ویژگی‌های محیطی دیگر) واکنش نشان داده و بر اساس آن نمایش داده شوند. فلسفه‌ی
طراحی واکنشگرای وب به طور خلاصه از این قرار است: ارائه‌ی محتوای وب به شکلی که برای دستگاه‌ها و نمایشگرهای
مختلف، مناسب باشد.
عبارت Responsive Design برای اولین بار در مقاله‌ای توسط Ethan Marcotte در سال 2010 استفاده شد. او در این
مقاله، از سه تکنیک موجود یعنی flexible grid layout، flexible images/media و media queries تحت یک رویکرد واحد
استفاده کرد و آن را RWD نامید.
رویکرد Mobile First در طراحی واکنشگرا
رویکردی که در ابتدا برای پیاده‌سازی RWD به کار گرفته شد، این بود که کار با طراحی برای نمایشگرهای دسکتاپ شروع
می‌شد و سپس، تغییرات مورد نیاز برای دستگاه‌های کوچکتر در قالب مدیا کوئری‌ها (media queries) اعمال می‌شد. اما
با پیشرفت و توسعه‌ی فرایندها مشخص شد که اگر کار را با طراحی برای کوچکترین نمایشگرها شروع کنیم و در ادامه،
تغییرات مورد نیاز برای نمایشگرهای بزرگتر را اعمال کنیم، همه چیز، از طراحی و مدیریت محتوا تا توسعه، بهتر عمل
خواهد کرد.
در این رویکرد که mobile first نامیده می‌شود، طراحی مبنا یا پایه برای کوچکترین نمایشگرها انجام می‌شود و سپس
با طی آنچه که progressive enhancement نامیده می‌شود، طراحی و محتوا برای نمایشگرهای بزرگتر و دستگاه‌های با
قابلیت‌های بیشتر، گسترش داده می‌شود.
نحوه‌ی پیاده‌سازی رویکرد mobile first به این صورت است که استایل‌های CSS پایه با در نظر گرفتن کوچکترین صفحه
نمایش‌ها مستقیماً درون استایل‌شیت نوشته می‌شود و استایل‌های مربوط به نمایشگرهای بزرگتر و دستگاه‌های دارای
قابلیت‌های بیشتر درون بلاک‌های مربوط به مدیا کوئری‌ها وارد می‌شوند. تا پایان این فصل با جزئیات مربوط به این
روند آشنا خواهید شد.
مؤلفه‌های اصلی طراحی واکنشگرا
طراحی واکنشگرا یک تکنولوژی مجزا نیست، بلکه یک رویکرد یا پارادایم است که ابزارهایی مانند مدیاکوئری‌ها،
تکنیک‌هایی مانند تعیین سایز مینیمم و ماکزیمم برای تصاویر و سایر مدیاها یا فونت‌ها و ماژول‌هایی مانند Flexbox
و Grid در آن نقش دارند. در اینجا با مهمترین موارد مربوط به طراحی واکنشگرا و نقش آنها در RWD آشنا می‌شویم.
تگ متا با نام viewport
اولین قدم برای واکنشگرا کردن یک صفحه‌ی وب، افزودن یک تگ meta با نام viewport به صفحه است:
CSS
<meta name="viewport" content="width=device-width, initial-scale=1">
این تگ meta اگرچه استاندارد نیست اما روش عملی برای دیکته‌کردن نحوه‌ی رندر صفحه به مرورگر محسوب می‌شود. این
تگ توسط Apple معرفی شد و برای واکنشگرا کردن یک صفحه‌ی وب، ضروری است. معنای این تگ meta برای مرورگر این است
که باید عرض دستگاه را به عنوان ملاک رندر صفحه در نظر بگیرد.
اگر در این تگ meta به‌جای مقدار device-width صراحتاً یک مقدار را بر حسب پیکسل وارد کنیم، مرورگر صفحه را با
آن مقدار ثابت رندر خواهد کرد که البته این کار اصلاً توصیه نمی‌شود.
تکنولوژی‌های مدرن Layout
در فصل نهم با تکنولوژی‌های مدرن ظرح‌بندی یعنی Flexbox و Grid و نحوه‌ی استفاده از آنها آشنا شدیم. این
تکنولوژی‌ها به طور پیش‌فرض واکنشگرا هستند.
اینکه آیتم‌های یک کانتینر flex بر اساس فضای موجود، کوچک و بزرگ می‌شوند و اینکه می‌توانیم از پراپرتی‌هایی
مانند flex-grow و flex-shrink برای تعیین رفتار آیتم‌ها بر اساس فضای موجود در اطرافشان استفاده کنیم،
نمونه‌هایی از واکنشگرایی Flexbox است. پراپرتی flex-wrap نیز یکی دیگر از مظاهر واکنشگرایی Flexbox است.
تکنولوژی Grid هم ذاتاً واکنشگراست و در ترکیب با مدیا کوئری‌ها (media queries) می‌تواند صفحاتی کاملاً
واکنشگرا ایجاد کند. واحد fr یکی از جنبه‌های واکنشگرایی Grid محسوب می‌شود.
تصاویر واکنشگرا
فرض کنید تصویری داریم که 800px عرض دارد. در یک نمایشگر دسکتاپ و به طور کلی، اگر viewport حداقل برابر با
800px باشد، عکس به طور کامل و بدون نیاز به اسکرول افقی نمایش داده می‌شود. اما اگر عرض viewport کمتر از عرض
عکس باشد، هماند تصویر زیر، بخشی از عکس دیده نمی‌شود و لذا یک اسکرول‌بار افقی نمایش داده می‌شود.
این مشکل را می‌توانیم به راحتی با استفاده از دو پراپرتی زیر حل کنیم:
CSS
img{
max-width: 100%;
height: auto;
}
پراپرتی اول باعث می‌شود که عرض عکس هیچ‌وقت از عرض کانتینرش بیشتر نشود و پراپرتی دوم باعث می‌شود که نسبت
جانبی (aspect ratio) عکس حفظ شود. در این وضعیت، اگر viewport را کوچک و بزرگ کنیم، عکس هم تغییر اندازه می‌دهد
و نسبت عرض به ارتفاع عکس هم حفظ می‌شود.
تایپوگرافی واکنشگرا
با استفاده از تکنیک‌های مربوط به تایپوگرافی واکنشگرا می‌توانیم سایز فونت متون را به سایز viewport وابسته
کنیم.. قبلاً با واحد اندازه‌گیری vw آشنا شده‌ایم که معادل 1% از عرض viewport است. برای مثال، اگر عرض
viewport برابر با 1000px باشد، 1vw معادل 10px است.
فرض کنید بخواهیم وقتی viewport برابر با 1000px باشد، سایز فونت برای عنصر header برابر با 48px باشد. کافیست
از مقدار 4.8vw برای پراپرتی font-size عنصر header استفاده کنیم. اما مشکلی که در این شرایط داریم این است که
اگر عرض viewport بزرگتر شود، سایز فونت header خیلی بزرگ می‌شود. مثلاً برای viewport معادل 2000px سایز فونت
header برابر با 96px خواهد بود. از طرف دیگر، اگر viewport خیلی کوچک باشد، سایز فونت header بیش از حد کوچک
خواهد بود. راه‌حل این مشکلات، تابعی است به نام clamp.
تابع clamp سه پارامتر ورودی دارد: سایز مینیمم، سایز ترجیحی و سایز ماکزیمم. در مورد مثال بالا، ما می‌توانیم
4.8vw را به عنوان سایز ترجیحی تعیین کنیم و 48px را به عنوان کران پایین و 64px را به عنوان کران بالا تعیین
کنیم:
CSS
font-size: clamp(48px, 4.8vw, 64px);
به این ترتیب، سایز فونت همچنان به viewport وابسته است اما هیچ‌وقت از 48px کمتر و از 64px بیشتر نمی‌شود.
مدیا کوئری‌ها
مدیا کوئری‌ها (media queries) که ماهیتاً at-rule هستند (یعنی قاعده‌هایی که با کاراکتر @ شروع می‌شوند)، به ما
امکان می‌دهند که اِعمال قاعده‌های CSS مشخصی را به برآورده شدن شرط یا شروط معینی وابسته کنیم.
برای مثال، با استفاده از یک مدیا کوئری به فرم زیر می‌توانیم ترتیبی دهیم که استایل margin تعریف‌شده برای
عناصرِ دارای کلاس container تنها در صورتی روی این عناصر اعمال شود که سند مورد نظر در یک دستگاه screen نمایش
داده شود (یک سند چاپی نباشد) و حداقل عرض viewport برابر با 80rem باشد:
CSS
@media screen and (min-width: 80rem) {
.container {
margin: 1em 2em;
}
}
هنگام معرفی رویکرد mobile first گفتیم که این رویکر با استفاده از مدیا کوئری‌ها پیاده‌سازی می‌شود. روال معمول
برای این کار به این صورت است که ابتدا یک layout تک‌ستونه برای دستگاه‌های موبایلی تدارک دیده می‌شود و سپس،
سایز viewport را بزرگ می‌کنیم و هر جا که نیاز به تغییر layout داشته باشیم، این کار را با ایجاد یک مدیا کوئری
مانند مثال بالا انجام می‌دهیم. این روال هم mobile first است و هم content based یا محتوا محور. یعنی ما
تغییرات را بر اساس محتوا ایجاد می‌کنیم نه بر اساس سایز دستگاه‌های مختلف مثل موبایل‌ها و تبلت‌ها و لپ‌تاپ‌ها.
مدیا کوئری‌ها مهمترین مؤلفه‌ی مربوط به RWD هستند و لذا در درس بعدی آنها را با جزئیات بیشتر بررسی می‌کنیم.