four screens, two orientations, one Boston Globe

Looking at the Boston Globe on four screens confirms some of my inclinations regarding breakpoints for Responsive Designs.

The portrait orientation in particular shows that one design that scales up to a breakpoint somewhere between 640 and 768 makes a lot of sense. The Kindle Fire (600 pixels wide in portrait mode) works well with the same flexible one-column layout used for 320 pixels. Meanwhile, the 768 pixel wide iPad handles a two-column layout quite nicely.

It also clearly illustrates something I had undervalued until recently. The primary breakpoints should not be hard and fast. The page header seen on the Fire in portrait (compared to the one on the phones) shows the advantage of establishing additional breakpoints for key elements on the page. The same layout optimization is used on the phones in landscape mode.

four screens, two orientations, one Boston Globefour screens, two orientations, one Boston Globe 2

Leave a Reply

Your email address will not be published. Required fields are marked *