At An Event Apart (AEA) 2012 in Atlanta, I listened to many presenters discuss responsive and adaptive web design, what they are and when to use them. If you aren’t familiar with responsive web design, Ethan Marcotte wrote a great book published by A Book Apart and has a great article posted on A List Apart. What I loved about the presentations this year was that the presenters were not rigid in their approach towards adaptive/responsive web design. They were humble and as interested in learning from us as we were from them.
As a quick clarification, responsive web design is adaptive web design, but adaptive is not necessarily responsive. Responsive web design relies on fluid grid layout and fluid images, along with media queries to set breakpoints where the content renders in a way that negatively impacts the ability for the user to interact with the page. Adaptive web design does not use fluid grids and images, but relies on media queries to change how the content is presented at various break points or screen sizes. As I heard discussed many times at AEA, I believe originally from Jeffrey Zeldman, responsive design is progressive enhancement on steroids. It helps to optimize the overall user experience while interacting with your site.
Determining whether your site should take an adaptive or a responsive strategy depends on your content. Existing sites can enhance the presentation of its content by using media queries to change how the content is displayed. This is a much easier approach than trying to wrangle an existing site into a responsive design. I am currently working on a product that takes an adaptive approach because the intricacy of the design made implementing a responsive design difficult.
Since you made it this far, you are most likely about to embark on an adaptive design project. Here are a couple of tips that should help make the development a bit smoother:
- Start with the small screen and expand.
- This forces you to focus on what is really important to your users.
- Design elements can be added (progressive enhancement) as screen size increases, rather than be removed (graceful degradation) as the screen size gets smaller. Set a baseline experience and expand out.
- Attach the breakpoints to your content, not to device sizes.
- There are a lot of sites that tell you all of the device resolutions (breakpoints) you will want to establish for your layout. These are helpful, but your layout will need to be altered based on the presentation of the content, not the size of the device.
- Make sure you test your design on an actual device, not just an emulator and more than just an iOS device!
- Have Fun and Experiment…Learn and Grow!!!
Posted on February 29, 2012 in Responsive Design