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

تأثیرات طراحی ریسپانسیو(واکنشگرا) بر سایت

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

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


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

در ابتدا که صفحه نمایش دسکتاپ اکثر افراد 800 یا 1024 پیکسل عرض داشت وبسایت ها تنها برای این دو عرض طراحی شده بودند و در سایز های مختلف هیچ تغییری نمی کردند.

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

اولین طراحی سایت ریسپانسیو متعلق به سایت خودروسازی آلمانی آئودی بود که در سال 2001 توسط یک تیم information architecture خبره در razorfish انجام گرفت.

امروزه اکثر کاربران به جای کامپیوتر از موبایل برای بازدید سایت ها استفاده میکنند و اکثرا هم دوست ندارند که از سایت های غیرریسپانسیو استفاده کنند.طراحی سایت ریسپانسیو باعث می شود که کاربران با استفاده از سایت شما احساس راحتی بیشتری داشه باشند.


سایت ریسپانسیو چگونه عمل می کند؟


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

div{
     width: 100%;
}

به عنوان مثال در قطعه کد CSS بالا ما عرض یک باکس را با درصد داده ایم که باعث میشود با افزایش یا کاهش رزولوشن صفحه نمایش عرض باکس ما هم تغییر کند که این یک مثال خیلی سطحی و ساده از ریسپانسیو سازی است.


بهترین ابزارها برای تشخیص سایت ریسپانسیو

اگر از طریق extension کروم می خواستید چک کنید بهترین گزینه responsive viewer است فقط کافیه extension را نصب کنید و بر روی آن کلیک کنید.

و یک روش دیگر هم هست که بصورت زیر باید عمل کنید:

روی صفحه سایت راست کلیک کنید و بر روی گزینه inspect کلیک کنید سپس ctrl +shift +M را بزنید تا یک نوار در بالا سایت باز شود از آن قسمت روزولوشن یا دستگاه مدنظر خود را انتخاب کنید.


مهم ترین فواید ریسپانسیو سازی

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


از کجا یاد بگیریم؟

اگر طراح سایت هستید و به مبحث طراحی ریسپانسیو علاقه مند شدید حتما یه سر به این آدرس بزنید.

منبع خوبی برای یادگیری طراحی سایت و طراحی ریسپانسیو است.

https://www.w3schools.com/css/css_rwd_intro.asp


چند تا سایت ریسپانسیو

وب سایت digikala.com نمونه بسیار خوب از یک سایت ریسپانسیو است.

وبسایت خبری Fararu.com

با استفاده از ابزارهایی که معرفی شد ریسپانسیو بودن این سایت ها را چک کنید.

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


نویسنده: امید مرادی

اینستاگرام: curlybracket_ir

تلگرام: @curlybracket