Responsive Web Design (RWD) is an approach to Web design and development that aims at crafting sites to provide optimal experiences across a wide range of devices based on screen size, platform, and orientation.
Responsive Web Design (RWD) is an approach to Web design and development that aims at crafting sites to provide optimal experiences across a wide range of devices based on screen size, platform, and orientation. Proper execution of RWD can cut down on overall development time as multiple versions of the same website do not need to be created to target specific devices or screen resolutions.
The practice of RWD consists of a variety of techniques which include flexible grids and layouts, images, and an intelligent use of CSS media queries. The goal is to provide a consistent viewing experience across multiple devices. As the user switches from their desktop to their mobile phone or tablet, the website should automatically switch to accommodate for resolution, image size, and scripting abilities. In other words, the website should respond to the user's device or preferences on the fly.
Responsive Web Design got its start when it was first coined as a theory by Ethan Marcotte. His article "Responsive Web Design," published in a May 2010 article in A List Apart outlined the building blocks of making a responsive website and outlined beginning practices to accomplish fluid designs.
All current browsers currently support the means to facilitate responsive design. Some older browsers (such as Internet Explorer 8) may require polyfills to bridge small gaps in functionality. However, since the goal of RWD is to allow the site to respond to the device it is being viewed on, you may opt-out of supporting older browsers that do not exist on mobile devices.
Currently, the biggest challenge with RWD is image support. For example, you would want a very high-quality image on the desktop view of your website, but you would not want to send such a big image to small screen on a mobile device. There are currently many theories and techniques to bridge this gap, however most fall short in some aspect.
Trident/Internet Explorer - Microsoft has an open bug to implement both the
<picture>element and the
Quickly Starting with RWD
While many developers chose to manage RWD on their own, there are several responsive-ready HTML5 frameworks that you can choose from to hit the ground running.
- Bootstrap - http://getbootstrap.com/
- Foundation - http://foundation.zurb.com/
- Skeleton - http://www.getskeleton.com/
- HTML5 Boilerplate - http://html5boilerplate.com/
- gumbyframework - http://gumbyframework.com/
- yaml - http://www.yaml.de/
- 960.gs - http://960.gs/
For more information on Responsive Web Design, an excellent resource is Ethan Marcotte's book Responsive Web Design.