طراحی وب Responsive (واکنش گرا) چیست؟
طراحی Responsive رویکردی برای طراحی وب است که باعث می شود محتوای وب شما با عرض های مختلف صفحه انواع دستگاه ها سازگار شود. به عنوان مثال، محتوای شما ممکن است به ستون های مختلفی در صفحه های دسکتاپ تفکیک شود، زیرا عرض صفحات دسکتاپ به اندازه کافی گسترده است و ستون ها متناسب با آن طراحی می شوند. اما فرض کنید که می خواهید این محتوا را به همان صورت و در چندین ستون در یک دستگاه موبایل نشان دهید در این صورت، خواندن و تعامل با این ستون ها برای کاربرانی که از موبایل استفاده می کنند بسیار دشوار است.
طراحی Responsive امکان ارائه چندین style متفاوت از یک محتوا، متناسب با اندازه صفحه دستگاه های مختلف را امکان پذیر می کند.
راه های ساخت صفحات در دستگاه های با عرض متفاوت
نکته: برای Responsive کردن یک برنامه، محدودیتی در راستای ارتفاع وجود ندارد و منظور، Responsive بودن در راستای عرض صفحه است و از این به بعد هر وقت صحبت از اندازه صفحه شد، منظور اندازه عرض صفحه دستگاه است.
برای ساخت یک صفحه که در نمایشگرهای مختلف بدون هیچ مشکلی کار کند و تعامل کاربر با آن خوب باشد دو راه وجود دارد:
- طراحی تطبیقی (Adaptive Design)
- طراحی واکنش گرا (Responsive Design)
تصویر زیر به طور کلی این دو روش را نشان می دهد.
تفاوت بین طراحی Responsive و طراحی Adaptive این است که طراحی Responsive تنها یک نسخه تک صفحه ای را ارائه می کند. در مقابل، طراحی Adaptive چندین نسخه کاملاً متفاوت از همان صفحه را ارائه می دهد. به عبارت دیگر در طراحی Adaptive، توسعه دهنده باید به ازای هر عرض صفحه ای (برای مثال px576، px768 و ...) از دستگاه، یک برنامه جداگانه بنویسد اما در طراحی Responsive نیازی به نوشتن یک برنامه جداگانه برای هر عرض از صفحه دستگاه نیست و تنها در یک برنامه می تواند تمام عرض های مختلف دستگاه را پشتیبانی کند.
روش های طراحی وب Responsive
در این بخش، روش های طراحی وب Responsive را پوشش خواهیم داد. برخی از این روش ها عبارت اند از:
- Media query ها در CSS
- استفاده از کتابخانه های رابط کاربری مانند Bootstrap
- استفاده از واحدهای نسبی هنگام دادن مقادیر به attributeهای CSS مانند, EM, REM, VH, VW, %
- Responsive کردن عکس ها
- استفاده از CSS Grid System
1. Media query ها در CSS:
به طور کلی Media query (مدیا کوئری) به ما این امکان را می دهد که به ازای عرض های مختلف صفحه style های CSS جداگانه و مخصوص به آن صفحه را اضافه کنیم. در تصویر زیر سه اندازه از صفحات مختلف نشان داده شده است البته این تصویر صرفاً یک مثال است و ممکن است در پروژه های مختلف به جای استفاده از ابعاد زیر از ابعاد دیگری استفاده شود.
همانطور که مشاهده می کنید از اندازه های با حداقل px1024 برای دستگاه های دسکتاپ (کامپیوتر و لپ تاپ)، اندازه های بین px768 تا px1023 برای تبلت و از اندازه های کمتر از px767 برای smartphone ها استفاده شده است.
برای درک بهتر Media query ها می توانید به فصل آموزش طراحی واکنشگرا در دوره‌ی آموزش کاربردی CSS و CSS3 مراجعه کنید و یا از سایت w3schools استفاده کنید.
2. استفاده از کتابخانه هایی مانند Bootstrap:
Bootstrap دارای 6 نقطه شکست (breakpoint) پیش فرض است که گاهی اوقات از آن ها با عنوان نقاط تقسیم بندی (grid options) برای Responsive کردن نیز یاد می شود. جدول زیر این نقاط را نشان می دهد.
سیستم شبکه Bootstrap (Bootstrap’s grid system) از یک سری container ها، row ها و col ها برای چیدمان و ترازبندی محتوا استفاده می کند. این سیستم با استفاده از flex box ساخته شده و کاملاً Responsive است. همانطور که در جدول زیر مشاهده می شود از یک سری حروف مانند sm، md، lg و ... استفاده کرده است که هر یک از آنها برای صفحات زیر به کار برده می شوند:
- xs: خیلی کوچک
- sm: کوچک
- md: متوسط
- lg: بزرگ
- xl: خیلی بزرگ
- xxl: خیلی خیلی بزرگ
برای صفحات با عرض کمتر از 576px از xs استفاده شده و برای صفحات با عرض 576px تا 768px از sm استفاده می شود و به همین ترتیب، تا نقطه شکست xxl پیش می رویم. در واقع در پشت پرده‌ی این نقاط شکست نیز از همان media query استفاده شده است.
برای آموزش بهتر Bootstrap می توانید به دوره‌ی آموزش سریع بوت استرپ 5 مراجعه کنید و یا از سایت getbootstrap استفاده کنید.
3. واحدهای CSS:
همانطور که می دانید در CSS برای اندازه گذاری ابعاد و فونت ها معمولاً از px استفاده می شود. px بر اساس resolution صفحه در نظر گرفته می شود به عبارتی، هر چه قدر resolution صفحه بالاتر باشد ابعاد یک px نیز کوچکتر خواهد بود. اما غیر از px واحدهای دیگری نیز وجود دارد که می توان از آن استفاده کرد. این واحدها نسبی هستند و متناسب با سایر ابعاد در نظر گرفته می شوند. در نتیجه با تغییر ابعاد صفحه، اندازه این واحدها نیز تغییر می کنند و به این ترتیب بسیاری از نیازمندی های ما برای واکنش گرا کردن صفحه را برطرف می کنند.
EM: این واحد در واقع نسبتی از اندازه فونت به کار رفته در المان بالاتر (parent) را اعمال می کند. برای مثال اگر المان بالاتر دارای اندازه فونت 16px باشد و برای المان داخلی اندازه فونت 0.5em در نظر گرفته شود به این معنی است المان داخلی دارای اندازه 8px خواهد بود.
REM: این واحد نیز مانند EM است با این تفاوت که به جای مقایسه با parent خود، با root پروژه مقایسه می شود و نسبتی از اندازه فونت root پروژه خواهد بود. دقت کنید که برای اینکه REM به درستی کار کند باید از style زیر در پروژه خود استفاده کنید:
:root{
font-size: 16px;
}در style بالا به جای عدد 16px می توانید هر عدد دیگری متناسب با پروژه خود استفاده کنید.
VH: این واحد نسبتی از ارتفاع کل صفحه دستگاه موردنظر را نشان می دهد. برای مثال اگر از 1vh برای اندازه فونت استفاده شود به این معنی است که اندازه فونت موردنظر 1 درصد از ارتفاع کل صفحه است.
VW: این واحد نیز مانند VH است با این تفاوت که نسبت به عرض کل صفحه سنجیده می شود.
% : این واحد نیز مانند EM عمل می کند این گونه که نسبتی از اندازه فونت parent به صورت درصد (%) در نظر گرفته می شود.
برای درک بهتر واحدهای CSS می توانید به بخش رایگان آموزشی اندازه و سایزها در CSS در دوره آموزش کاربردی CSS مراجعه کنید یا از سایت w3schools با لینک زیر استفاده کنید.
4. Responsive کردن عکس ها:
برای Responsive کردن عکس ها نیز علاوه بر راه های ذکر شده در قبل، راه های دیگری نیز وجود دارد. علاوه بر صفت (attribute) src، صفت دیگری نیز با نام srcset وجود دارد که می توان از آن در Responsive کردن عکس ها استفاده کرد.
مثال: برای درک بهتر استفاده از Responsive کردن عکس ها می توانید از لینک های زیر به ترتیب استفاده کنید:
لینک 1:
لینک 2:
5. استفاده از CSS Grid Layout:
CSS Grid Layout یکی از کاربردی‌ترین ماژول‌های CSS است که با امکان طراحی صفحات در دو بعد، پیچیدگی استفاده از CSS در طرح‌بندی صفحات را کاهش می‌دهد. Grid CSS یک سیستم طرح‌بندی مبتنی بر شبکه، با ردیف‌ها و ستون‌ها را ارائه می‌دهد که طراحی صفحات وب را بدون نیاز به استفاده از شناورها و موقعیت‌یابی آسان‌تر می‌کند.
این ماژول در CSS است به برنامه نویس‌های وب کمک می‌کند تا بتوانند طرح‌های پیچیده و واکنشگرا را به‌آسانی پیاده سازی کنند و کمک می‌کند که بدون اینکه بخش‌های مختلف یک صفحه باهم تداخل داشته باشند، آن صفحه را به چندین بخش تقسیم کنید. این ماژول چنان کاربردی است که برخی استفاده از آن را بهینه تر از استفاده از بوت استرپ می دانند. برای آگاهی بیشتر به مقاله‌ی چرا CSS Grid Layout بهتر از Bootstrap است؟ مراجعه کنید.
چرا طراحی Responsive مهم است؟
اگر در زمینه طراحی وب، توسعه و یا وبلاگ نویسی تازه وارد هستید ممکن است تعجب کنید که چرا طراحی Responsive دارای اهمیت بالایی است.
پاسخ ساده است. امروزه طراحی وب فقط برای یک دستگاه خاص، دیگر کافی نیست. در سال های اخیر، ترافیک وب موبایل از دسکتاپ پیشی گرفته است و هم اکنون بیشترین بازدید وب سایت ها را تشکیل می دهد به طوری که بیش از 51٪ از بازدیدها را همانطور که در تصویر زیر مشاهده می شود، تشکیل می دهد.
وقتی بیش از نیمی از بازدیدکنندگان بالقوه وب سایت شما از موبایل برای مرور اینترنت استفاده می کنند، نمی توانید فقط صفحه ای را که برای دسکتاپ طراحی شده است به آنها ارائه دهید. خواندن و استفاده از آن دشوار است و منجر به تجربه بد کاربر می شود. اما این تمام ماجرا نیست و کاربران در موبایل نیز بیشترین بازدید از موتورهای جستجو را تشکیل می دهند.
سرانجام، طی چند سال گذشته، موبایل به یکی از مهمترین کانالهای تبلیغاتی تبدیل شده است. حتی پس از همه گیری استفاده از موبایل، هزینه تبلیغات موبایل با رشد 8/4% به 52/91 میلیارد دلار رسیده است. چه تبلیغ در رسانه های اجتماعی را انتخاب کنید و چه از روش های دیگر استفاده کنید اکثریت قریب به اتفاق بازدید کنندگان شما از طریق کاربران تلفن همراه هستند.
اگر landing page های شما برای موبایل بهینه نشده و استفاده از آن آسان نباشد، نمی توانید بازده سرمایه گذاری خود را به حداکثر برسانید. رابط کاربری بد منجر به کاهش هدایت کاربران به سمت وب سایت شما و در نتیجه هدر رفتن هزینه تبلیغات خواهد شد.
منبع:
