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

طراحی واکنش گرا (RWD)، روشی برای طراحی وب است که هدف آن ایجاد وب سایت هایی است که نمایش بهینه ای را برای کاربر ارائه دهند که شامل خواندن آسان متون و navigation با حداقل تغییرات در اندازه، panning (حرکت افقی داده گرافیکی در عرض یک صفحه نمایش) و scroll کردن در طیف وسیعی از دستگاه ها (از گوشی های موبایل تا مانیتور کامپیوتر های شخصی) می باشد.

وب سایتی که با متد طراحی ریسپانسیو طراحی شده باشد، محیط view آن از grid های شناور و بخش بندی شده، تصاویر انعطاف پذیر و مدیا کوئری های CSS3، اکستنشن قانون media@ تشکیل شده است.

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

Mobile first (ارجحیت موبایل بر دسکتاپ)، جاوا اسکریپت روان و توسعه ی مداوم

موارد بالا (استراتژی هایی که هنگام طراحی یک وب سایت در نظر گرفته می شوند)، مفاهیم مرتبطی هستند که قبل از طراحی ریسپانسیو وجود داشته اند: مرورگرهای گوشی های ساده ی موبایل درکی از جاوا اسکریپت یا مدیا کوئری ها ندارند، بنابراین توصیه بر ایجاد یک وب سایت ساده و ارتقای آن برای گوشی های هوشمند و کامپیوتر های شخصی می باشد

بهبود مداوم بر اساس تشخیص مرورگر، دستگاه یا ویژگی

وقتی وب سایتی که باید از گوشی های ساده پشتیبانی کند، فاقد جاوا اسکریپت می باشد، در صورتی که ویژگی های مشخصی از HTML و CSS (به عنوان مبنایی برای بهبود مداوم) پشتیبانی شود، تشخیص مرورگر (user agent) که بو کشیدن مرورگر نیز نامیده می شود و تشخیص گوشی موبایل، دو روش برای نتیجه گیری می باشد. البته این روش ها کاملا قابل اعتماد نیستند مگر اینکه مطابق با قابلیت های دستگاه به کار روند.

برای ایجاد گوشی ها و PC هایی با قابلیت بیشتر، فریم ورک های جاوا اسکریپت مانند Modernizr، jQuery و jQuery Mobile که می توانند پشتیبانی مرورگر از ویژگی های HTML و CSS را مستقیما تست کنند (یا دستگاه یا یوزر ایجنت را شناسایی کنند)، از محبوبیت بالایی برخوردارند. می توان از polyfill ها (کدهای قابل دانلودی که امکاناتی که در مرورگر وجود ندارد را ارائه می دهند) برای افزودن پشتیبانی از برخی از ویژگی ها استفاده کرد مثل پشتیبانی از مدیا کوئری و ارتقاء پشتیبانی از HTML5 در اینترنت اکسپلورر. تشخیص ویژگی نیز نمی توانند کاملا قابل اطمینان باشد: برخی اوقات ممکن است که گزارش دهد که یک ویژگی در دسترس است، در حالی که آن ویژگی یا وجود ندارد یا پیاده سازی ضعیفی داشته است و کاملا غیر کاربردی می باشد.

چالش ها و دیگر رویکردها

لوک روبلوسکی برخی از چالش های طراحی موبایل و طراحی ریسپانسیو را خلاصه کرده و یک کاتالوگ از الگو های آرایش multi-device ایجاد کرده است. او معتقد است که در مقایسه با یک روش ساده از طراحی responsive، روش تجربه کار با دستگاه یا RESS (طراحی ریسپانسیو با کامپوننت های سمت سرور) می تواند تجربه ای را برای کاربر ایجاد کند که از بهینه سازی بهتری برای دستگاه های موبایل برخوردار است. با دسترسی به یک API در سرور که کار handle کردن تفاوت های دستگاه (معمولا گوشی موبایل) را مطابق با دیتابیس قابلیت های آن دستگاه انجام می دهد تا کارایی آن را بالا ببرد، پیاده سازی زبان های شیوه نامه مانند SASS یا MML به سبک CSS داینامیک در سمت سرور، می تواند بخشی از چنین رویکردی باشد. ایجاد وب سایت یا اپلیکیشن با استفاده از RESS پر هزینه بوده و چیزی بیش از تنها یک منطق سمت کلاینت نیاز دارد، بنابراین توسط سازمان هایی که بودجه های کلان دارند مورد استفاده قرار می گیرد.

اگرچه با وجود منتشرانی که اقدام به پشتیبانی از طراحی واکنش گرا نموده اند، این چالش اخیرا به موضوع کم اهمیتی تبدیل شده است اما هنوز هم حداقل یکی از مشکلات موجود برای طراحی ریسپانسیو این است که برخی از تبلیغات بنری و ویدیو ها سیال نیستند. البته تبلیغات search و تبلیغات نمایشی (بنرها) از پلتفرم های خاصی در دستگاه و فرمت های متفاوتی برای اندازه ی تبلیغات در دسکتاپ ها، گوشی های هوشمند و گوشی های ساده ی موبایل پشتیبانی می کنند. می توان برای پلتفرم های مختلف از URL های مختلفی استفاده کرد. می توان از Ajax نیز برای نمایش تبلیغات مختلف در یک صفحه استفاده کرد.

یک روش مشابه برای طراحی responsive نیز متد خروجی قابل تطبیق وب یا (AWD (Adaptive Web Delivery می باشد که توسط برند های بزرگ در دنیا مورد استفاده قرار می گیرد. اگرچه که این روش بسیار مشابه با طراحی responsive می باشد اما مهمترین تفاوت آن این است که سروری که وب سایت بر روی آن قرار دارد، دستگاهی را که به سرور درخواست ارسال می کند را شناسایی می کند و از این اطلاعات برای ارسال دسته کد های مختلف HTML و CSS، بر اساس ویژگی های دستاهیی که شناسایی شده است، استفاده می کند.

امروزه روش های زیادی برای اعتبار سنجی و تست طراحی های واکنش گرا وجود دارد که شامل validator های وب سایت های موبایل، نمونه ساز موبایل، ابزارهای تست هم زمان مانند Adobe Edge Inspect می شود. مرورگر فایر فاکس و کنسول گوگل کروم ابزارهای تغییر سایز viewport طراحی responsive را ارائه می دهند.