Archive results for:

PPK Presentation on Mobile Viewports

Peter-Paul Koch(ppk) of QuirksMode.org gave a very interesting presentation at this years HTML5 Dev Conference about mobile viewports.


Adding Breakpoints

A breakpoint is a logical matching of media features that updates the styles of a page. A single breakpoint represents a rule (or set of rules) that determines the point at which the contents of that media query are applied to a page’s layout.

If you think about breakpoints as the points at which your design will break, you are bound to gain a faster grip on what you’re dealing with. With just using device widths for comparison, you might be tempted to consider as many as six breakpoints: 320px, 480px, 600px, 768px, 1024px, and 1280px.

Using just these breakpoints, you’d be able to target a broad range of devices with the current standard widths, in pixels:

320px mobile portrait
480px mobile landscape
600px small tablet
768px tablet portrait
1024px tablet landscape
1280px and greater desktop large

With those sizes in mind, your link elements might look more like this:

Choosing your CSS breakpoints can be tricky: too many and maintenance becomes too difficult, but too few leads to poor UI rendering on devices you don’t cater for. At a minimum, you should be looking at two breakpoints: Small, for anything under 480px wide, and everything Bigger.

You need to consider which devices you’re targeting and balance the possible return gained against how your users are accessing your applications.