تصویر منوچهر صدری خانلو
قریب به ۴ ماه پیش، در پستی در همین بلاگ همکار عزیزم آقای اکبری به معرفی طراحی پاسخگو پرداخت و به بیان اولیه برخی از ابزارها که برنامه نویسان وب می توانند با استفاده از آنها به طراحی مناسبی برای دستگاه های مختلف برسند اشاره کرد. البته به نظر من عبارت "طراحی واکنشی" معادل بهتری برای Responsive Design است، اما کم و بیش در میان طراحان فارسی زبان عبارت پاسخگو جا افتاده‌تر است. در این چند ماه اخیر اهمیت استفاده از طراحی پاسخگو (واکنشی) بیشتر و بیشتر شده است و به بحث مهمی در بازاریابی اینترنتی و ارتباط با مخاطبان تبدیل شده است. پرسشی که در اینجا می توان طرح کرد این است که آیا طراحی پاسخگو به یک استاندارد تبدیل می شود یا تنها یک راهکار خوب برای طراحی و نمایش در دستگاه های مختلف است؟ در طی این مطلب هدفم بیشتر بازخوانی گفته‌های پست یادشده است تا در ادامه و پست بعدی به اهمیت این نوع طراحی در بهینه سازی برای موتورهای جستجو یا سئو اشاره کنم. 
 
طراحی پاسخگو یا طراحی واکنشی چیست؟
طراحی پاسخگو به این معناست که شما نیازی به طراحی چند نسخه از وب سایت برای نمایش در کامپیوتر دسکتاپ، تبلت و موبایل ندارید. ایده طراحی ساده است. به جای اینکه یک صفحه با عرض ثابتی مثل ۸۰۰ پیکسل طراحی کنیم، بهتر است المان های صفحه به نوعی باشند که شکل و اندازه و محل خود را با توجه به اندازه مرورگر صفحه نمایش تطبیق دهند. تشخیص اندازه صفحه نمایش با استفاده از مدیا کوئری در css امکان پذیر است. این ایده طراحی را اولین بار اثان مارکوت در سال ۲۰۱۰ در مقاله ای تحت عنوان طراحی پاسخگو در وب طرح کرد.
 
مثال هایی از طراحی پاسخگو
با یک مثال ساده شروع می کنیم. فرض کنید المان های صفحه را از A تا I نامگذاری کنیم. در طراحی پاسخگو، در صفحه نمایش های قدیمی یا تبلت ها که سایز صفحه نمایش کوچک تر است المان ها با ابعاد ۳ در ۳ نمایش داده می شود. 
طراحی پاسخگو
اما در صفحه نمایشی که کمی بزرگتر است این ابعاد به ۲ در ۴ تغییر پیدا خواهد کرد.
طراحی پاسخگو
و در صورتیکه صفحه نمایش خیلی باریک باشد، المان ها تنها در یک ستون نمایش پیدا می کنند.
طراحی پاسخگو
حال در یک مثال واقعی بلاگ رستا قبلاً تشریح شد و وب سایت شرکت مایکروسافت مثال بسیار خوب دیگری از طراحی پاسخگو است. المان های صفحه در تصویر زیر شماره گذاری شده اند.
طراحی پاسخگو مایکروسافت
در اندازه صفحه نمایشی که باریک تر است المان ها به صورت زیر نمایش داده خواهند شد.
طراحی پاسخگو مایکروسافت
نکته ای که در وب سایت شرکت مایکروسافت وجود دارد، این است که تمام المان ها در این سایت در هر اندازه ای از نمایش حفظ می شوند. اما در مثالی دیگر و در وب سایت Smashing Magazine، برخی از المان ها در اندازه نمایش موبایل دیگر نمایش داده نمی شوند. علت این موضوع محدودیت های سخت افزاری است که موبایل در مقایسه با یک کامپیوتر دسک تاپ دارد. در اندازه نمایش کامل سه ستون در وب سایت وجود دارد. ستون سمت چپ برای نمایش منوی سلسله مراتبی، ستون وسط برای محتوای اصلی و ستون سمت راست برای باکس جستجو و تبلیغات.
در یک تبلت همین وب سایت به شکل زیر نمایش داده می شود. به طرز مناسبی در صفحه اندازه باریک تر، ستون وسط و راست حفظ می شوند و منو به بالای صفحه انتقال پیدا می کند.
طراحی پاسخگو تبلت
در صفحه ای با اندازه باریک تر (بر روی کیندل)، این ترکیب المان ها تغییر می کند. تبلیغات فدای اهمیت محتوا می شوند و به جای آن سطح دوم منو در سمت چپ صفحه نمایش داده می شوند. منوی اصلی نیز در بالای صفحه حفظ می شود و باکس جستجو به بالای صفحه انتقال پیدا می کند.
طراحی پاسخگو کیندل
حال همین صفحه در اندازه ی موبایل که باریک ترین اندازه موجود است، مجدداً تغییر می کند. تبلیغات حذف شده اند. منوها به دلیل باریک بودن در یک منوی Drop Down گنجانده شده اند. جستجو در فضای خالی ناشی از تغییر شکل منوی اصلی جای داده شده است و محتوا در زیر این المان ها قرار گرفته است.
طراحی پاسخگو موبایل
در نهایت آنچه بدیهی است، قدرت مانور بالایی است که شما در این طراحی به دست می آورید. علاوه بر این خلاقیت شما همچنان فضای بروز دارد و در زمان شما برای طراحی های مختلف برای نسخه های مختلفی از دستگاه ها صرفه جویی می شود.
در پست بعدی به اهمیت این نوع طراحی در بهینه سازی برای موتورهای جستجو یا سئو می پردازم.
 
این مطلب ترجمه ای آزاد از این پست است.
 

دیدگاه‌ها

تصویر هادی داودپور

هادی داودپور

بابت پست ممنون، من قبلا راجع به به این موضوع کمی کنکاشت کرده بودم، مطلب خیلی جالبیه.

افزودن نظر جدید