Responsive Web Design Breakpoints

I read Responsive web design: the war has not yet been won on Elliot Jay Stocks’ blog recently. He’s an experienced web designer, and knows a thing or two about responsive web design. A central point of the article is that responsive design is not just about adapting your design to the sizes of different devices. It’s about finding those points where a given design breaks down and adjusting it so that it works again. He writes,

Introduce media queries only when it [feels] natural to re-adjust the content. … If you adjust your design when it looks right, you won’t have to worry about retro-fitting your media queries for new devices.

Responsive web design is continuous, it is analog. It is about creating a design that works well at every size. If you set your breakpoints at specific device sizes with no consideration for the nature of your design, you can easily end up with a design that fails at an intermediate size. It makes validation of your website much more difficult because you have to check the design at every possible pixel width to make sure that it works.

Either that, or you just ignore the issue, and hope no one ever makes a device with a different screen size.

Instead, if you introduce breakpoints where the design breaks down, you have essentially already validated the design at all sizes in between your breakpoints.

Read more about how ProtoShare can help you create prototypes for responsive web design.