Last update : June 25, 2014
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.
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.
The technical ingredients for responsive web design are :
- fluid grids
- media queries
- adaptive images
- viewport settings
Some web designers prefer the term adaptive 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.
Links to some useful documentation and scripts about responsive web design are shown in the following list :
- Ethan Marcotte : A Book Apart : Responsive Web Design
- Todd Parker, Patty Toland, Scott Jehl, Maggie Costello Wachs : Designing with Progressive Enhancement
- Luke Wroblewski : Mobile First
- Scott Jehls : polyfill respond.js
- Chris Pederick : browser extension Web Developer
- Ethan Marcotte : Responsive Web Design : the original article (103 comments)
- Nick La : Adaptive & Responsive Design with CSS3 Media Queries (243 comments)
- Kayla Knight : Responsive Web Design: What It Is and How To Use It (141 comments)
- Jason Grigsby : CSS Media Query for Mobile is Fool’s Gold (24 comments)
- Harry Roberts : Forget responsive web design… (22 comments)
- Kyle Schaeffer : Responsive Layouts Using CSS Media Queries (29 comments)
- Andreas Bovens : Screencast: “Mobile web development techniques” (12 comments)
- Bruce Lawson : Reading List: mobile development approaches (4 comments) — Mobile-friendly: The mobile web optimization guide (3 comments)
- Rien Swagerman : CSS3 Media Queries for dynamically resizing elements on different screen sizes (3 comments)
- Kevin Suttle : Is Multiscreen Enough? Why ‘Write Once’ Shouldn’t be the Goal (2 comments)
- Jeremy Keith : Conditional loading for responsive designs — Clean conditional loading
- Jakob Nielsen : Mobile Usability
- Luke Wroblewski : Mobile First
- Smashing Magazine Editorial Team : Responsive Web Design Techniques, Tools and Design Strategies (65 comments)
- Adobe : Device Central CS5.5
- W3C : Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG) — Media queries by W3C : Candidate Recommendation 27 July 2010
- Viljami Salminen : Adaptive vs. Responsive, what’s the difference?
- The State Of Responsive Web Design, by Stéphanie Walter
- Responsive Webdesign – présent et futur de l’adaptation mobile, par Stéphanie Walter
- Weighing Options : WPtouch, Responsive Design and your Mobile Strategy, by Dale Mugford
- Treehouse Blog : Learn skills to change the world today!