(Play with your browser size to experience the magic)
What is this?
- A Web design approach aimed at crafting sites to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from mobile phones to desktop computer monitors)
- A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule
- Mashable called 2013 the Year of Responsive Web Design. Many other sources have recommended responsive design as a cost-effective alternative to mobile applications
- RWD is the approach that suggests that design and development should respond to the users behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the users preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
- Almost every new client these days wants a mobile version of their website. Its practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle – and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It wont, of course.
Three key technical features that are the heart of responsive Web design:
- Media queries and media query listeners
- A flexible grid-based layout that uses relative sizing
- Flexible images and media, through dynamic resizing or CSS
Truly responsive Web design requires all three features to be implemented.
The way forward
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. Thats not to say there isnt a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.
But that kind of design thinking doesnt need to be our default. Now more than ever, were designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to design for the ebb and flow of things.