راه های ساخت صفحات Responsive در HTML / CSS چیست؟

راه های ساخت صفحات Responsive در HTML / CSS چیست؟

راه های ساخت صفحات Responsive (واکنش گرا) در HTML / CSS چیست؟

طراحی وب Responsive (واکنش گرا) چیست؟

طراحی Responsive رویکردی برای طراحی وب است که باعث می شود محتوای وب شما با عرض های مختلف صفحه انواع دستگاه ها سازگار شود. به عنوان مثال، محتوای شما ممکن است به ستون های مختلفی در صفحه های دسکتاپ تفکیک شود، زیرا عرض صفحات دسکتاپ به اندازه کافی گسترده است و ستون ها متناسب با آن طراحی می شوند. اما فرض کنید که می خواهید این محتوا را به همان صورت و در چندین ستون در یک دستگاه موبایل نشان دهید در این صورت، خواندن و تعامل با این ستون ها برای کاربرانی که از موبایل استفاده می کنند بسیار دشوار است.

طراحی Responsive امکان ارائه چندین style متفاوت از یک محتوا، متناسب با اندازه صفحه دستگاه های مختلف را امکان پذیر می کند.

راه های ساخت صفحات در دستگاه های با عرض متفاوت

نکته: برای Responsive کردن یک برنامه، محدودیتی در راستای ارتفاع وجود ندارد و منظور، Responsive بودن در راستای عرض صفحه است و از این به بعد هر وقت صحبت از اندازه صفحه شد، منظور اندازه عرض صفحه دستگاه است.
برای ساخت یک صفحه که در نمایشگرهای مختلف بدون هیچ مشکلی کار کند و تعامل کاربر با آن خوب باشد دو راه وجود دارد:

  1. طراحی تطبیقی (Adaptive Design)
  2. طراحی واکنش گرا (Responsive Design)

تصویر زیر به طور کلی این دو روش را نشان می دهد.

responsive design

تفاوت بین طراحی Responsive و طراحی Adaptive این است که طراحی Responsive تنها یک نسخه تک صفحه ای را ارائه می کند. در مقابل، طراحی Adaptive چندین نسخه کاملاً متفاوت از همان صفحه را ارائه می دهد. به عبارت دیگر در طراحی Adaptive، توسعه دهنده باید به ازای هر عرض صفحه ای (برای مثال px576، px768 و ...) از دستگاه، یک برنامه جداگانه بنویسد اما در طراحی Responsive نیازی به نوشتن یک برنامه جداگانه برای هر عرض از صفحه دستگاه نیست و تنها در یک برنامه می تواند تمام عرض های مختلف دستگاه را پشتیبانی کند.

چرا طراحی Responsive مهم است؟

اگر در زمینه طراحی وب، توسعه و یا وبلاگ نویسی تازه وارد هستید ممکن است تعجب کنید که چرا طراحی Responsive دارای درجه اهمیت بالایی است.

پاسخ ساده است. امروزه طراحی وب فقط برای یک دستگاه خاص، دیگر کافی نیست. در سال های اخیر، ترافیک وب موبایل از دسکتاپ پیشی گرفته است و هم اکنون بیشترین بازدید وب سایت ها را تشکیل می دهد به طوری که بیش از 51٪ از بازدیدها را همانطور که در تصویر زیر مشاهده می شود، تشکیل می دهد.

Alt: mobile design

وقتی بیش از نیمی از بازدیدکنندگان بالقوه وب سایت شما از موبایل برای مرور اینترنت استفاده می کنند، نمی توانید فقط صفحه ای را که برای دسکتاپ طراحی شده است به آنها ارائه دهید. خواندن و استفاده از آن دشوار است و منجر به تجربه بد کاربر می شود. اما این تمام ماجرا نیست و کاربران در موبایل نیز بیشترین بازدید از موتورهای جستجو را تشکیل می دهند.

سرانجام، طی چند سال گذشته، موبایل به یکی از مهمترین کانالهای تبلیغاتی تبدیل شده است. حتی پس از همه گیری استفاده از موبایل، هزینه تبلیغات موبایل با رشد 8/4% به 52/91 میلیارد دلار رسیده است. چه تبلیغ در رسانه های اجتماعی را انتخاب کنید و چه از روش های دیگر استفاده کنید اکثریت قریب به اتفاق بازدید کنندگان شما از طریق کاربران تلفن همراه هستند.

اگر landing page های شما برای موبایل بهینه نشده و استفاده از آن آسان نباشد، نمی توانید بازده سرمایه گذاری خود را به حداکثر برسانید. رابط کاربری بد منجر به کاهش هدایت کاربران به سمت وب سایت شما و در نتیجه هدر رفتن هزینه تبلیغات خواهد شد.

روش های طراحی وب Responsive

در این بخش، روش های طراحی وب Responsive را پوشش خواهیم داد. برخی از این روش ها عبارت اند از:

  • Media query ها در CSS
  • استفاده از کتابخانه های رابط کاربری مانند Bootstrap
  • استفاده از واحدهای نسبی هنگام دادن مقادیر به attributeهای CSS مانند, EM, REM, VH, VW, %
  • Responsive کردن عکس ها

Media query:

به طور کلی Media query به ما این امکان را می دهد که به ازای عرض های مختلف صفحه style های CSS جداگانه و مخصوص به آن صفحه را اضافه کنیم. در تصویر زیر سه اندازه از صفحات مختلف نشان داده شده است البته این تصویر صرفاً یک مثال است و ممکن است در پروژه های مختلف به جای استفاده از ابعاد زیر از ابعاد دیگری استفاده شود.

 media query

همانطور که مشاهده می کنید از اندازه های با حداقل px1024 برای دستگاه های دسکتاپ (کامپیوتر و لپ تاپ)، اندازه های بین px768 تا px1023 برای تبلت و از اندازه های کمتر از px767 برای smartphone ها استفاده شده است.

مثال: برای درک بهتر استفاده از Media query ها می توانید از سایت w3schools استفاده کنید.

استفاده از کتابخانه هایی مانند 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 grid system

مثال: برای درک بهتر استفاده از Bootstrap می توانید از سایت getbootstrap استفاده کنید.

واحدهای 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 می توانید از سایت w3schools با لینک زیر استفاده کنید.

لینک سایت w3schools: https://www.w3schools.com/cssref/css_units.asp

Responsive کردن عکس ها:

برای Responsive کردن عکس ها نیز علاوه بر راه های ذکر شده در قبل، راه های دیگری نیز وجود دارد. علاوه بر صفت (attribute) src، صفت دیگری نیز با نام srcset وجود دارد که می توان از آن در Responsive کردن عکس ها استفاده کرد.

مثال: برای درک بهتر استفاده از Responsive کردن عکس ها می توانید از لینک های زیر به ترتیب  استفاده کنید:

لینک 1: 

https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html

لینک 2:

https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html

منبع:

https://kinsta.com/blog/responsive-web-design

نظرات
اگر login نکردی برامون ایمیلت رو بنویس: