چرا باید به طراحی واکنش گرا و قانونمند جواب آری گفت؟
در گذشته تمام مرور های وب از طریق کامپیوتر انجام میشد و گوشی های هوشمندی نیز وجود نداشتند که وبسایت ها را آنطور که هست نمایش دهند به همین دلیل برای وبسایت ها یک عرض ثابت در نظر گرفته میشد که این عرض ثابت عموما 960 یا 980 بود اما آن زمان هم این کار دردسر ساز بود چرا!؟
برای مثال یک کاربر با صفحه نمایش عرض 1024 وبسایت را مشاهده میکرد در هر طرف 32 پیکسل فضای سفید یا فضای خالی داشت که این امری معقول بود اما وقتی کاربری با صفحه نمایش 1920 وبسایت را مشاهده میکرد چقدر فضای خالی در کناره های وبسایت مشاهده میکرد؟ 480 پیکسل این مقدار فاصله سفید به زیبایی و کارایی سایت ضربه میزد و عملا به یک چهارم این فضا نیازی نبود و دور ریخته شده بود به با گوشی خود به وبسایت این جور وبسایت ها مراجعه کنید. فاصله زیادی در کناره های تصویر وجود دارد. که این وبسایت در صفحه نمایش با عرض 1920 مشاهده شده است.
این ایجاد وبسایت با عرض ثابت (960) یا (980) فاحش تر شد وقتی که بازار مرور وبسایت با تلفن های هوشمند داغ شد و هر کسی که وبسایت را با گوشی هوشمند مرور میکرد وبسایت کاملا زوم منفی میگفت تا وبسایت کل عرض را پر کنید
کاربر برای مرور کل وبسایت باید عمل زوم کردن و بالا و پایین رفتن یا چپ و راست رفتن در وبسایت با گوشی را انجام میداد که این عمل خسته کننده بود. وبسایت چون نوار اسکرول افقی داشت این اتفاق در صفحه نماایش ها کوچکتر از 960 (مثل تبلت هاو...) هم وجود داشت.
برای حل این مشکل طراحی واکنش گرا به میان امد که برای هر صفحه نمایش وبسایت را تغییر چیدمان میداد و عرضی متغیر در هر صفحه نمایش برای وبسایت اختصاص میداد عرض ها به صورت زیر هستند.
در صفحه نمایش های عریض(بزرگتر از 1200) 1170 پیکسل
در صفحه نمایش های معمولی (کوچکتر از 1200) 992 پیکسل
در صفحه نمایش های تبلت و لپ تاپ های مینی 991 پیکسل
در موبایل های و گوشی های هوشمند 442 پیکسل
در گوشی های کوچک تر 100 درصد عرض گوشی موبایل
این عمل باعث میشد که اول اینکه نوار افقی از وبسایت حذف میشد و مرور وبسایت در همه صفحه نمایش ها آسان میشد و وبسایت کاربر پذیر تر بود و در اصل برای هر نوع دستگاه با عرض صفحه نمایش یک چیدمان وجود داشت.
وهمچنین دیگر برای صفحه نمایش های بزرگ فضای ها خالی زیاد که باعث از دست رفتن زیبایی میشود نیز وجود نداشت و فواصل صحیح انتخاب و تنظیم شده بودند.
اما طراحی ریسپانسیو یا واکنش گرا نسبت به ایجاد یک نسخه مجزا برای موبایل یا ... چه مزیتی دارد؟
تصور کنید که دو نسخه سایت، یکی برای کامپیوترهای معمولی و یکی هم برای موبایل، در اختیار دارید. با توجه به اینکه این دو سایت، یک سایت هستند اما برای نقاط مختلف مطالبشان هم یکی است. روبات گوگل که هر چند وقت یک بار سری به سایت شما می زند پس از ایندکس کردن نسخه ابتدایی به سراغ نسخه موبایل می رود و مطالب نسخه دوم را به عنوان “تکراری” یا “Duplicate” می شناسد که در صورت اتفاق افتادن این موضوع رنکینگ سایت شما بسیار نزول خواهد کرد. اما در صورتی که شما یک سایت واکنش گرا برای تمام ابزارها در اختیار داشته باشید تمام مطالبتان در همین یک سایت قرار خواهد گرفت و از ایجاد محتوای تکراری (Duplicate Content) جلوگیری خواهد شد.
مزیت های دیگر طراحی ریسپانسیو نسبت به طراحی با عرض ثابت (960 یا 980)
1. افزایش ترافیک (به دلیل مرور وبسایت با موبایل و سهم بزرگ موبایل در وب)
2. محتوای طبقه بندی شده بر اساس نوع عرض و دستگاه
3. کم شدن حجم وبسایت و بارگذاری سریع تر
پایان...