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.
Beginnings
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.
Browser Compatibility
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.
Current Challenges
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.
The W3C have proposed the <picture> element and the <img srcset=""> attribute to remedy this situation, however it has not been worked into all the major browsers yet.
Blink/Chrome - The
<img srcset="">attribute has been supported since Chrome 34. The<picture>element has been supported since Chrome 38.Webkit/Safari - Webkit has implemented the
<img srcset="">attribute. The<picture>element has a bug open on it with the status RESOLVED.Gecko/Mozilla Firefox - Mozilla has implemented the
<img srcset="">attribute and the<picture>element as of June 16th and 25th, 2014, respectively.Trident/Internet Explorer - Microsoft has an open bug to implement both the
<picture>element and the<img srcset="">attribute.
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.
More information on Responsive Web Design
- an excellent resource is Ethan Marcotte's book Responsive Web Design.
- Wikipedia
- Responsive Design
