Responsive Web Design
In 2010 Ethan Marcotte coined the term responseive web design to describe a process for creating flexible, versatile websites. By using media queries in conjunction with a fluid grid a designer can alter the flow of content within a website to provide a good viewing experience on a phone-sized screen as well as a 70" display. Philosophically it embraces the idea that when designing for the web we should “accept the ebb and flow of things”.
Getting Started
A good place to start is the origional article.
Articles on A List Apart and other blogs are great for an introduction to a technique or idea but concepts that require a degree of nuance are hard to learn from a blog post or two. To help provide that extra depth A Book Apart publishes small volumes on different aspects on creating for the web. I have read several of their books. They are all good.
- Responsive Web Design by the man himself is a good introduction into this methodology.
- Mobile First by Luke Wroblewski makes the argument that websites should be designed with the mobile viewport in mind. Only when there is more screen real estate available should they be enhanced.
Follow What’s Going On
- mediaqueri.es is a gallery of responsive sites that illustrate how different approaches to presenting content at varying screen widths.
- @RWD has frequent updates to all things related to responsive web design.
- Luke Wroblewski’s blog is constant source of high-quality information. It mostly pertains to mobile.
- He wrote an excellent summary of common patterns employed by sites listed on mediaqueri.es
Beyond A Simple Page
Applying responsive design principles to a blog or a portfolio site requires a good deal of deliberation to get it right. When websites increase in complexity and start to take on features of a web application the difficulty is compounded. Some of the trickier areas are site navigation and search.
- Brad Frost summarized common approaches to responsive navigation patterns.
- Smashing Magazine published a sample chapter from Mobile Design Pattern Gallery by Theresa Neil on patterns for searching, sorting, and filtering in a mobile context. She recommends two additional titles as background for designing search interfaces: