user-pic

Responsive Web Design

In the year that's passed since Ethan Marcotte's wonderful primer essay on Responsive Web Design, the adoption of fluid web design has exploded. When combined with media queries, these scalable websites reflect and respond to the size of the browser window and the device accessing the content in unique and appropriate ways.

The mobile landscape is evolving so rapidly that it's impossible to have a fix on every resolution browser on the market today. Responsive web design allows the developer to set parameters of browser real estate to manipulate the layout of the website. For example, a desktop browser with a resolution of 1200 pixels wide may display four columns of content side by side. But, a tablet with a resolution of 600 pixels wide may display the same content as two columns of two rows each, forming a square grid as opposed to a horizontal row. On a smaller device like a smartphone, those original four columns would be changed to a single column, with four rows on top of each other.

responsive web design examples
Example: Browser, Tablet and Smartphone displaying the same content. One codebase, three displays.

In many ways, you are future-proofing your website by using responsive web design. Rather than constantly changing your target browser width, these relational settings allow your website to scale as needed, on demand for browsers large or small.

To view examples of websites using responsive web design, visit the excellent gallery resource Media Queries. If you're interested in implementing responsive web design into your next project, Let's Talk.