طراحی واکنش گرا چیست؟

طراحی واکنش گرا چیست؟

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

ظاهر طراحی واکنش گرا به چه صورت است؟

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

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

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

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

طراحی واکنش گرا چکونه کار می کند؟

سایتهای واکنش گرا از شبکه های سیال استفاده می کنند، تمام المان های صفحه بر اساس نسبت سایز دهی می شوند و نه بر اساس سایز پیکسلی.بنابراین اگر شما بخواهید از 3 ستون کنار هم استفاده کنید، به عنوان مثال باید بدین شکل تعریف کنید: هر ستون یک سوم صفحه را بگیرد یا اینکه ستون اول نصف صفحه و ستون دوم و سوم هر کدام یک چهارم صفحه. چند رسانه ای ها مانند ویدیو و عکس نیز بصورت خودکار، سایز مناسب با صفحه را میگیرند و مناسب با تغییر سایز صفحه، تغییر اندازه می دهند.

چالشهای مرتبط

موس در مقابل لمس

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

المان های گرافیکی و سرعت بارگیری صفحه

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

نرم افزار و نسخه موبایل

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

چرا کسب وکارهای کوچک باید به سمت طراحی واکنش گرا روی بیاورند؟

امروزه بیشتر مردم از موبایل های خود استفاده می کنند. در آمریکا 45% از افراد بزرگسال دارای موبایل هوشمند هستند و 31 درصد از آنها صاحب تبلت می باشند و این اعداد نیز رو به افزایش است. ترافیک وب سایتتان را چک کنید و ببینید که چه رقم بالایی از بازدید کنندگانتان، با موبایل وارد سایت شما شده اند. پس همین امروز دست به کار شوید و راه حلی مدرن و به صرفه را برای وب سایت خود در نظر بگیرید.

به اشتراک گذاری این مطلب :
آیـا به مشـاوره نیـاز دارید؟
021-88171021
ارتـباط از طریـق تـلگرام