It is ironic that the design aspect of responsive web design is often shadowed by the implementation or development side of the process. As builders of the web we often concern ourselves with the semantics of the process, ensuring that three columns collapses into two, and finally into one; but we forget that the big challenge we face in this process is to still design a beautiful interface for the content as well as ensuring the branding conveyed on a mobile is also consistent as the viewport increases

Responsive design is about a single source of content across many viewports, and therefore requires the content up front for a truly award winning design that spans a million devices.

Content is more than just words, it also include images, videos, tables, forms, audio and more. Each item in itself is a challenge, and even more so when looking at multiple areas on a single page.

When responsive design first became a ‘thing’ many of us struggled how we could make our traditional web designs behave across an ever growing number of viewports.

Responsive Grids are the best way to get started with your responsive layout and come in many forms. Use an existing framework or build one yourself, it’s totally up to you.

Navigation is second to content when it comes to importance on your site, check out these emerging patterns to make sure your hierarchy is useful across the range of media queries.

Responsive Typography relies on the fact that you build your CSS using proportional measurements, like EMs.

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.