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