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

از ویکی‌پدیا، دانشنامهٔ آزاد
پرش به: ناوبری، جستجو

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

یک سایت طراحی شده به روش واکنش‌گرا[۱][۴] با لایه‌های انعطاف‌پذیر، طراحی‌های شناور،[۵] تصاویر انعطاف‌پذیر[۶][۷][۸][۹] و مدیا کوئری‌های CSS3 سازگار است.[۳][۱۰][۱۱]

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

مفاهیم مرتبط[ویرایش]

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

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

جستارهای وابسته[ویرایش]

منابع[ویرایش]

  • مشارکت‌کنندگان ویکی‌پدیا، «Responsive web design»، ویکی‌پدیای انگلیسی، دانشنامهٔ آزاد (بازیابی در ۳۰ می ۲۰۱۴).
  1. ۱٫۰ ۱٫۱ Marcotte, Ethan (May 25, 2010). "Responsive Web design". A List Apart. 
  2. "Ethan Marcotte's 20 favourite responsive sites". .net magazine. October 11, 2011. 
  3. ۳٫۰ ۳٫۱ Gillenwater, Zoe Mickley (Dec 15, 2010). "Examples of flexible layouts with CSS3 media queries". Stunning CSS3. p. 320. ISBN 978-0-321-722133. 
  4. Pettit, Nick (Aug 8, 2012). "Beginner’s Guide to Responsive Web Design". TeamTreehouse.com blog. 
  5. ۵٫۰ ۵٫۱ Marcotte, Ethan (March 3, 2009). "Fluid Grids". A List Apart. 
  6. ۶٫۰ ۶٫۱ Marcotte, Ethan (June 7, 2011). "Fluid images". A List Apart. 
  7. "Adaptive Images". 
  8. Hannemann, Anselm (Sep 7, 2012). "The road to responsive images". net Magazine. 
  9. Jacobs, Denise (August 23, 2011). "21 top tools for responsive web design". .net Magazine. 
  10. Gillenwater, Zoe Mickley (Oct 21, 2011). "Crafting quality media queries". 
  11. "Responsive design—harnessing the power of media queries". Google Webmaster Central. Apr 30, 2012. 
  12. Wroblewski, Luke (November 3, 2009). "Mobile First"
  13. Firtman, Maximiliano (July 30, 2010). Programming the Mobile Web. p. 512. ISBN 978-0-596-80778-8.
  14. Designing with Progressive Enhancement. March 1, 2010. p. 456. ISBN 978-0-321-65888-3.
  15. "Graceful degradation versus progressive enhancement". February 3, 2009.