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”.
A good place to start is the original 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. Books dedicated to a subject give you enough information to build a conceptual framework. 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 case for starting with small screens and using progressive enhancement to accommodate larger viewports.
- 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. Much of it pertains to mobile.
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: