Responsive web design is creating web layouts that can adapt to a multitude of displays and devices. Using this technique, you can eliminate the need to create device-centric designs and allow your content to be displayed from a single source, on an unlimited number of mediums.
Web designers often transform their desktop layouts into something optimized for devices with smaller screens by adding additional javascript and additional css code. That’s not the right solution for mobile devices with less powerful CPU’s and slower network connections where speed and low roaming charges matters more than on desktop PC’s. Simply resizing the same application to fit on multiple devices doesn’t necessarily ensure the best experience for users.
The main objective of responsive web design is to load only those files to the device which are really displayed and to minimize the file size of the downloaded elements, including images. Responsive web design is the practice suggesting that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. Adjusting images to make them context-aware, according to the different screen widths or devices is another important aspect of responsive web design. To achieve this you can combine two methods : image resizing (shrinking) in a first step and cropping if it get below a specific size.
The pioneer of responsive web design is Ethan Marcotte, a web designer, developer, speaker and author, living in in Boston, Massachusetts. His blog is called Unstoppable Robot Ninja.
The technical ingredients for responsive web design are :
- fluid grids
- media queries
- flexible images
- viewport settings
Some web designers prefer the term adapative instead of responsive for these technologies, other call it reactive.
A recommended approach to start with responsive web design is to start with a mobile first layout. You have to keep in mind that most internet users do not keep a browser open full screen. Another issue to care for is caching, mainly if images of different sizes with the same name are used.
Links to some useful documentation about responsive web design and context-aware images are shown in the following list :
- Responsive Web Design : the original article by Ethan Marcotte
- Responsive Layouts Using CSS Media Queries by Kyle Schaeffer
- Fluid images by Ethan Marcotte
- css3-mediaqueries.js by Wouter van der Graaf
- Media queries by W3C : Candidate Recommendation 27 July 2010
- CSS Media Query for Mobile is Fool’s Gold by Jason Grigsby
- Mobile First by Luke Wroblewski
- Device Central CS5.5 by Adobe
- Web Developer by Chris Pederick
- Responsive images code on github by filament group
- Responsive Images: Experimenting with Context-Aware Image Sizing by Scott Jehl
- Responsive Web Design: What It Is and How To Use It by Kayla Knight
- Responsive Web Design Techniques, Tools and Design Strategies by Smashing Magazine
- Forget responsive web design… by Harry Roberts
- Thoughts on Reactive Web Design by Paul Gordon
- Adaptive or Responsive Design? by Paul Gordon
- Optimized Fast Image Delivery by sencha.io
- Responsive images using CSS3 by Nicolas Gallagher
- Techniques for Context Specific Images by Chris Coyier
- Is Multiscreen Enough? Why ‘Write Once’ Shouldn’t be the Goal by Kevin Suttle
- Mobile-friendly: The mobile web optimization guide by Bruce Lawson
- Mobile Usability by Jakob Nielsen
- Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG) by W3C
- Screencast: “Mobile web development techniques” by Andreas Bovens
- Adaptive & Responsive Design with CSS3 Media Queries by Nick La
