It’s exciting times to design for the web. All the good stuff in HTML5 and CSS3 have become more applicable in both client work and even more in our own projects. Since A List Apart published Responsive Web Design by Ethan Marcotte a couple of months back we’ve started to make sites a bit more responsive. (Try resizing the browser window on this site.)
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.
While our work to make UNICEFs giftshop mobile-friendly isn’t truly responsive (no fluid grid), it’s a couple of steps in that direction. Can’t wait to make the whole site responsive in next years redesign.
Here are some examples of responsive designs. Resize away!
Designing sites that work great on your mobile makes it easier to focus on what’s most important. It gets you thinking about content and design from a refreshing point of view. You should try it out. Here is some recommended reading:
- Luke Wroblewski has been talking a lot about designing for mobile first. The main reasons are: Mobile is exploding. Mobile forces you to focus. Mobile extends your capabilities.
- Jeremy Keith wrote a great post on why you should serve the same website to everyone. One web.
- 37Signals have been experimenting with responsive design
- There has been some critique too but I agree with the valid points Jeremy Keith makes in the comments and in his post linked to above.
Tags: design, designprogress, responsive