طراحی وب واکنش‌گرا

طراحی وب واکنش‌گرا یا ریسپانسیو (به انگلیسی: responsive web design) (سرواژه:RWD) یک روش طراحی وب است که هدف آن نمایش مطلوب صفحه در طیف گسترده‌ای از دستگاه‌ها از تلفن‌های همراه تا نمایشگر کامپیوترهای رومیزی است.^[۱][۲][۳]

"محتوا مانند آب است"، یک ضرب‌المثل که اصول RWD را نشان می‌دهد

یک وب‌سایت طراحی شده به روش واکنش‌گرا تصاویر انعطاف‌پذیر و مدیا کوئری‌های سی‌اس‌اس سازگار است.^[۱][۴][۵]

• مفهوم شبکه‌های انعطاف‌پذیر این است که در آن برای اندازه عناصر صفحه به جای واحدهای مطلق مانند پیکسل یا پوینت از واحدهای نسبی مانند درصد استفاده می‌کنیم.^[۶]
• اندازه تصاویر انعطاف‌پذیر نیز با واحدهای نسبی تعیین می‌گردد تا بیرون از عنصر نمایش‌دهنده خود نشان داده نشود.^[۷]
• مدیا کوئری‌ها امکان استفاده از CSSهای مختلف برای صفحه براساس ویژگی‌های دستگاه نمایش‌دهنده (معمولاً بر اساس عرض مرورگر وب) فراهم می‌کنند.
• یکی از عوامل مهم در رتبه‌بندی سایت‌ها توسط موتورهای جستجو همانند گوگل و بینگ واکنش گرا بودن سایت می‌باشد.^[۸]

مزایای طراحی وب واکنش گرا

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

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

گوگل با ابزار mobile-friendly واکنشگرا بودن وبسایت را بررسی می‌کند.

مفاهیم مرتبط

در طراحی وب واکنشگرا صفحات وب به گونه ای طراحی می‌شوند تا در طیف وسیعی از دستگاه‌ها به خوبی نمایش داده شوند و کاربر به خوبی با آن تعامل کند.^[۹]

تقدم تلفن همراه، جاوااسکریپت محجوب، افزایش روزافزون

تقدم تلفن همراه، جاوااسکریپت محجوب، افزایش روزافزون (استراتژی‌هایی موجود در هنگام بررسی طراحی یک وب‌سایت جدید) مفاهیم مرتبطی هستند که پیش از طراحی واکنش گرای وب واقع می‌شوند: مرورگرهای تلفن‌های همراه عمومی قادر به درک کدهای جاوا اسکریپت یامدیا کوئری نیستند.^{[۱۰][۱۱][۱۲][۱۳][۱۴]} پس چاره کار طراحی یک وب‌سایت جامع با قابلیت ارتقاء مفاهیم برای تلفن هوشمند و رایانه شخصی است به‌جای آنکه با افت شدیدی در طراحی یک وب‌سایت پیچیده و سنگین برای نوعی از تلفن هوشمند شویم.^{[۱۵][۱۶][۱۷][۱۸]}

جستارهای وابسته

• مدیا کوئری
• تجربه کاربری

منابع

• مشارکت‌کنندگان ویکی‌پدیا. «Responsive web design». در دانشنامهٔ ویکی‌پدیای انگلیسی، بازبینی‌شده در ۳۰ می ۲۰۱۴.

1. Gillenwater, Zoe Mickley (Dec 15, 2010). "Examples of flexible layouts with CSS3 media queries". Stunning CSS3. p. 320. ISBN 978-0-321-72213-3. Archived from the original on 20 August 2020. Retrieved 4 June 2014.
2. Marcotte, Ethan (May 25, 2010). "Responsive Web design". A List Apart.
3. Schade, Amy (2014-05-04). "Responsive Web Design (RWD) and User Experience". Nielsen Norman Group. Retrieved 2017-10-19.
4. Gillenwater, Zoe Mickley (Oct 21, 2011). "Crafting quality media queries". Archived from the original on 12 November 2020. Retrieved 4 June 2014.
5. "Responsive design—harnessing the power of media queries". Google Webmaster Central. Apr 30, 2012.
6. Marcotte, Ethan (March 3, 2009). "Fluid Grids". A List Apart.
7. Marcotte, Ethan (June 7, 2011). "Fluid images". A List Apart.
8. "Core concepts of Responsive Web design". September 8, 2014.
9. Thevenin, D.; Coutaz, J. (2002). "Plasticity of User Interfaces: Framework and Research Agenda". Proc. Interact'99, A. Sasse & C. Johnson Eds, IFIP IOS Press. Edinburgh. pp. 110–117.
10. "What is Responsive Web Design". July 23, 2012.
11. Wroblewski, Luke (November 3, 2009). "Mobile First".
12. "Graceful degradation versus progressive enhancement". فوریه 3, 2009. Archived from the original on November 13, 2014.
13. Firtman, Maximiliano. Programming the Mobile Web. O'Reilly Media. pp. 512. ISBN 978-0-596-80778-8.
14. Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (February 2010). Designing with Progressive Enhancement. New Riders. p. 456. ISBN 978-0-321-65888-3. Retrieved March 1, 2010.
15. Wroblewski, Luke (November 3, 2009). "Mobile First"
16. Firtman, Maximiliano (July 30, 2010). Programming the Mobile Web. p. 512. ISBN 978-0-596-80778-8.
17. Designing with Progressive Enhancement. March 1, 2010. p. 456. ISBN 978-0-321-65888-3.
18. "Graceful degradation versus progressive enhancement". February 3, 2009.