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

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

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

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

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

برای ساخت یک صفحه که در نمایشگرهای مختلف بدون هیچ مشکلی کار کند و تعامل کاربر با آن خوب باشد دو راه وجود دارد:

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

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

تفاوت طراحی Responsive و طراحی Adaptive

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

راه‌های طراحی سایت به صورت ریسپانسیو

راه‌های مختلفی برای طراحی سایت به صورت ریسپانسیو وجود دارند.  برخی از این راه و روش‌ها عبارت‌‌اند از:

1. ریسپانسیو با مدیا کوئری (Media query) در CSS
2. ریسپانسیو با بوت استرپ (یکی از کتابخانه‌های رابط کاربری)
3. ریسپانسیو کردن با استفاده از واحدهای نسبی هنگام دادن مقادیر به attributeهای CSS مانند, EM, REM, VH, VW, %
4. ریسپانسیو کردن کردن عکس‌ها در سایت
5. ریسپانسیو کردن با استفاده از CSS Grid System

۱. ریسپانسیو با مدیا کوئری در CSS

مدیا کوئری (Media query)َ، بخش اساسی CSS3 است که به ما امکان می‌دهد محتوا را متناسب با عوامل مختلفی مانند اندازه یا وضوح صفحه نمایش رندر کنیم. این کوئری به روشی مشابه با یک «عبارت if» در زبان‌های برنامه‌نویسی کار می‌کند و قبل از اجرای کد، بررسی می‌کند که عرض نمای صفحه نمایش چه قدر است. بنابراین ما این امکان را خواهیم داشت که به ازای عرض‌های مختلف صفحه، style های CSS جداگانه و مخصوص به آن صفحه را اضافه کنیم. 

به عنوان مثال در قطعه کد زیر اگر صفحه نمایش حداقل ۷67 پیکسل عرض داشته باشد، تصاویر کلاسِ full-width-img نود درصد صفحه را اشغال می‌کنند و به طور خودکار با حاشیه‌های به همان اندازه پهن در مرکز قرار می‌گیرند.

@media screen and (min-width: 767px) {
.full-width-img {
margin: auto;
width: 90%;
}

در تصویر زیر سه اندازه‌ی رایج از صفحات مختلف نشان داده شده است البته این تصویر صرفاً یک مثال است و ممکن است در پروژه‌های مختلف به جای استفاده از ابعاد زیر از ابعاد دیگری استفاده شود.

همانطور که مشاهده می‌کنید از اندازه‌های با حداقل 1024px برای دستگاه‌های دسکتاپ (کامپیوتر و لپ تاپ)، اندازه‌های بین 768px تا 1023px برای تبلت و از اندازه‌های کمتر از 767px برای smartphone ها استفاده شده است.

👈 برای درک بهتر Media query ها می‌توانید به فصل آموزش طراحی واکنشگرا در دوره‌ی آموزش کاربردی CSS و CSS3 مراجعه کنید.

۲. ریسپانسیو با استفاده از کتابخانه بوت استرپ

بوت استرپ (Bootstrap) دارای 6 نقطه شکست (breakpoint) پیش فرض است که گاهی اوقات از آن‌ها با عنوان نقاط تقسیم‌بندی (grid options) برای ریسپانسیو کردن نیز یاد می‌شود. این سیستم gid بوت استرپ از یک سری container ها، row ها و col ها برای چیدمان و ترازبندی محتوا استفاده می‌کند. این سیستم در واقع با استفاده از Flexbox ساخته شده و کاملاً ریسپانسیو است.

همانطور که در جدول بالا مشاهده می‌شود، بوت استرپ از یک سری حروف مانند sm، md، lg و ... استفاده کرده است که هر یک از آن‌ها برای صفحات زیر به کار برده می‌شوند:

• xs: خیلی کوچک
• sm: کوچک
• md: متوسط
• lg: بزرگ
• xl: خیلی بزرگ
• xxl: خیلی خیلی بزرگ

برای صفحات با عرض کمتر از 576px از xs استفاده شده و برای صفحات با عرض 576px تا 768px از sm استفاده می‌شود و به همین ترتیب، تا نقطه شکست xxl پیش می‌رویم. در واقع در پشت پرده‌ی این نقاط شکست نیز از همان media query استفاده شده است.

👈 برای یادگیری کامل Bootstrap می توانید به دوره‌ی آموزش سریع بوت استرپ 5 مراجعه کنید و یا از سایت 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 می‌توانید به بخش رایگان آموزشی اندازه و سایزها در CSS در دوره آموزش کاربردی CSS مراجعه کنید یا مقاله‌ی واحدهای اندازه‌گیری در CSS را مطالعه کنید.

۴. ریسپانسیو کردن عکس‌ها

برای ریسپانسیو کردن عکس‌ها نیز علاوه بر راه‌های ذکر شده در قبل، راه های دیگری نیز وجود دارد. علاوه بر صفت (attribute) src، صفت دیگری نیز با نام srcset وجود دارد که می‌توان از آن در ریسپانسیو کردن عکس‌ها استفاده کرد. در این حالت باید مانند قطعه کد زیر، از ویژگی srcset HTML در تگ های img خود استفاده کنید تا بیش از یک اندازه تصویر را برای انتخاب مشخص کنید (وردپرس به طور خودکار از این قابلیت برای تصاویر موجود در پست‌ها یا صفحات استفاده می‌کند).

<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg 320w"
src="small.jpg"
/>

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

1. لینک 1
2. لینک 2

۵. ریسپانسیو با استفاده از CSS Grid Layout

CSS Grid Layout یکی از کاربردی‌ترین ماژول‌های CSS است که با امکان طراحی صفحات در دو بعد، پیچیدگی استفاده از CSS در طرح‌بندی صفحات را کاهش می­‌دهد. Grid CSS یک سیستم طرح‌بندی مبتنی بر شبکه، با ردیف‌ها و ستون‌ها را ارائه می‌دهد که طراحی صفحات وب را بدون نیاز به استفاده از شناورها و موقعیت‌یابی آسان‌تر می‌کند.

این ماژول در CSS است به برنامه نویس‌های وب کمک می‌کند تا بتوانند طرح­‌های پیچیده و واکنش­‌گرا را به‌آسانی پیاده سازی کنند و کمک می‌کند که بدون اینکه بخش‌های مختلف یک صفحه باهم تداخل داشته باشند، آن صفحه را به چندین بخش تقسیم کنید. این ماژول چنان کاربردی است که برخی استفاده از آن را بهینه تر از استفاده از بوت استرپ می‌دانند. برای آگاهی بیشتر به مقاله‌ی چرا CSS Grid Layout بهتر از Bootstrap است؟ مراجعه کنید.

چرا طراحی ریسپانسیو مهم است؟

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

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

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

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

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

جمع بندی

عوامل متعددی در طراحی وب‌سایت ریسپانسیو نقش دارند. بدون درک پایه‌ای از HTML و CSS، ممکن است دچار اشتباه شوید. اما با آشنایی با بخش‌های مختلف سازنده، بررسی مثال‌های متعدد با ابزارهای توسعه وب و آزمایش همزمان با استفاده از کد نمونه، باید بتوانید سایت خود را بدون هیچ مشکل خاصی ریسپانسیو کنید.

منبع