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

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

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

اجزای اصلی طراحی واکنش‌گرا

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

گریدهای انعطاف‌پذیر

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

تصاویر انعطاف‌پذیر

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

img {
     max-width: 100%;
}

اساساً این بدان معناست که اگر یک عنصر از قالب خود بزرگ‌تر باشد، این قانون آن را مجبور می‌کند تا با عرض آن قالب تطابق برقرار کند. از آنجا که مرورگرهای مدرن متناسب با اندازه تصاویر را تغییر می‌دهند، نسبت ابعاد تصاویر نیز حفظ خواهد ماند. قانون ۱۰۰ درصد تقریباً برای تمام عناصر از جمله ویدیوهای قرار داده شده قابل استفاده است.

مدیا کوئری

از زمان معرفی Media Types در CSS 2.1، استایل شیت‌ها بیشتر شامل موبایل‌ها و سایر دستگاه‌ها شده‌اند. Media Types به استایل‌دهی اجازه می‌دهد تا کلاس‌های خاصی از دستگاه‌های وب را هدف قرار دهد. اما با وجود استانداردهای اندک بین دستگاه‌ها و پشتیبانی سازندگان دستگاه،Media Types هرگز نتوانست مطابق با پتانسیل‌های خود عمل کند.

مدیا کوئری‌ها مطابق با پتانسیل‌های خود عمل می‌کنند. Media Types بر روی نوع دستگاه‌ها دقت داشت اما مدیا کوئری‌ها قابلیت‌های دستگاه را بررسی می‌کنند.

شاید یک مدیا کوئری ساده مانند این باشد:

<link rel="stylesheet" type="text/css"
  media="screen and"
  href="generic.css" />

دو اجزای کوئری شامل Media type و کوئری اصلی می‌باشد. مورد اول تنظیمات مطابق با صفحه نمایش را انجام می‌دهد و مورد دوم (حداکثر عرض دستگاه: px۴۸۰) بررسی می‌کند که آیا عرض دستگاه px۴۸۰ است یا کمتر. در اینصورت دستگاه generic.css را بارگذاری می‌کند و درغیر اینصورت لینک تا زمانی که وضوح مناسب مشخص نشده و استایل‌شیت مناسب بارگذاری نشده نادیده گرفته می‌شود.

چیزی بیشتر از وضوح

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

به عنوان مثال ممکن است در صفحه نمایش کامپیوتر یک طرح به صورت ۳ ستون با یک بخش متن و دو نوار عمودی در کناره‌ها باشد. همین طراحی ممکن است در صفحه نمایش گوشی به شکل یک بخش متن تمام صفحه با دو نوار به عنوان عناصر افقی در پایین باشد.

ذهنیت انعطاف‌پذیر

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

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

به عنوان مثال تفاوت بین اختصاص دادن عرض ۱۰۰ درصد و ۱۰۰ پیکسل به دو عنصر یکسان را در نظر بگیرید. در مورد اول شما جدا از نوع صفحه نمایش، مطمئن خواهید بود که این عنصر تمام صفحه را پر می‌کند. عنصری با عرض ۱۰۰ پیکسل در صفحه نمایش آیفون ۴۸۰ پیکسل بزرگ بوده، اما در صفحه دسکتاپی با وضوح ۹۰۰x۱۶۰۰ کوچک خواهد بود.

طراحی واکنش‌گرا به معنای تجارت است

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

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

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

منبع