Breakpoints in Responsive Design

Brent Simmons:

Responsive design works because of the combination of CSS layout and CSS media-queries. You can change the layout for different sizes.

When I first started, I created two breakpoints (where the layout changes): one for iPad-sized screens and one for phone-sized screens. It seemed logical.

Later on I figured out a better way: create breakpoints when the layout breaks.

I just shrank the width of my browser window until the design broke in some way, then I dealt with it, either by changing things or by creating a breakpoint and changing the layout at that point.

This made more sense because I was working with the design rather than thinking about specific devices.

Seems almost obvious in hindsight, but i had never read about this specific approach before.

Advertisements