۳ هسته اصلی طراحی وب واکنشگرا

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

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

مورد دیگری که جالب است بدانید این است که تا سال ۲۰۱۰ طراحی واکنشگرا ادامه پیدا نکرد، تا اینکه در آن سال Ethan Marcotte به صورت رسمی آن را ابداع نمود.

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

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

هسته اصلی طراحی وب واکنشگرا

طراحی وب واکنشگرا معمولا از قواعدی پیروی می‌کند که این قواعد را تمام طراحان، فریمورک‌ها و سیستم‌های مدیریت محتوا از آن پیروی می‌کنند:

‍‍۱. Fluid Grids

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

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

امروزه سیستم گریدبندی محلی در سی‌اس‌اس نیز پدید آمده که ما آن‌ را با «CSS Grid Layout Module» می‌شناسیم. میزان پشتیبانی مرورگرها از آن هر روز بهتر می‌شود و این موضوع باعث شده که طراحان بتوانند به صورت بسیار بهتری مشغول به طراحی گرید‌ها و ساختار‌های واکنشگرا شوند.

۲. Media Queries

Media Queries از سال ۲۰۰۰ به بعد وجود داشت و می‌شد از آن استفاده کرد، اما این موضوع تا سال ۲۰۱۲ نتوانست از سمت W3C به یک استاندارد پیشنهادی تبدیل شود. مشابه با fluid grids، مدیا کوئری‌‌ها نیز یک تکنولوژي بنیادی را در پس طراحی واکنشگرا نشان می‌دهند. به لطف Media Queries طراح می‌تواند یکسری داده‌ها را از کاربر جمع‌آوری کند که این موضوع باعث می‌شود بهتر اندازه صفحه نمایش کاربر و حالت آن را مشخص کند. بعد از اینکه اطلاعات جمع‌آوری شد، فایل CSS براساس تنظیمات کاربر نمایش پیدا می‌کند.

۳. تصاویر و رسانه‌های واکنشگرا

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

یک راه بسیار مناسب و عالی برای کار کردن در جهت واکنشگرا نمودن تصاویر و… استفاده کردن از max-width است. یک مثال ساده از این مورد شبیه به زیر است:

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

اگر می‌خواهید دیگر نوع‌ها از رسانه‌ها را در این حالت قرار دهید، برای اینکار ممکن است کمی کار لازم باشد و کمی بیشتر منحصر به فرد رفتار کنید. یک راه‌حل خوب برای اینکه بتوانید height را به کار ببرید استفاده کردن از حالت زیر است:

.wrapper-with-intrinsic-ratio {
    position: relative;
    padding-bottom: 20%;
    height: 0;
}
 
.element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

بعد از اینکه این موارد را به کدهای CSS اضافه کردید، تمام تصاویر و فایل‌های رسانه‌ای با مرورگرتان مقیاس پذیر می‌شوند و دیگر چیزی از View مرورگر خارج نمی‌شود.

در پایان

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

منبع