Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Breakpoints and Pixel Dimensions

Saturday, March 8th, 2014 by Servage

css-pixels

The Jenware site (the sample website I have depicted about in the earlier articles) qualifies as a responsive design, but it is clearly simplified and represents some best-case scenarios. Getting responsive right takes some planning and work. Because the mobile Web is relatively new, the development community is still encountering and working through the challenges of mobile design. I’d like to bring you up to speed on some of the trickier aspects and limitations of RWD and mobile design in general.

The website ResizeMyBrowser.com does exactly what its name says. Click one of the dimensions listed on the screen (320×480, for example) and the site resizes your browser window to your chosen size. That puts you in the ballpark for testing your designs at various device widths. Be forewarned, however, that there is no substitute for testing on an actual device! This is just a handy tool during the design process.

Choosing breakpoints

One of the primary design decisions in creating a responsive design is deciding at which widths to introduce a significant design change. The point at which the media query delivers a new set of styles is known as a breakpoint.

Some sites have just two layouts triggered at a single breakpoint. More commonly, responsive sites use three designs targeted at typical phone, tablet, and desktop widths, and I’ve seen as many as five. How many you choose depends on the nature of your site’s design.

But how do you choose your breakpoints? One way is to use the pixel dimensions of popular devices, The below image shows a breakpoint chart that lists the dimensions of the most popular device classes in both portrait and landscape mode as of this writing.

The reality is that new device widths are bubbling up all the time, and we can’t be expected to create a separate design for all of them. For that reason, there has been a move away from pixel values in media queries toward that web development darling, the em. Many developers let their content determine where the breakpoints should happen, which is, in short, the point at which things start looking really bad!

3

Thinking in terms of single column, wide single column, and multiple columns, then defining the logical breakpoints points in ems is a more future friendly approach.

Responsive images

One of the most vexing problems facing mobile web developers as of this writing is how to get images right. Ideally, a device should download only the image size that is appropriate for its dimensions and network speed.

The goal is to avoid downloading unnecessary data, whether that comes in the form of an image that is larger than it needs to be for a small screen or downloading two versions of an image (low-res and high-res) when only one is needed.

What makes images so complicated is that knowing the device size does not necessarily tell you anything about the network speed. Small phones may be using slow EDGE networks or speedy WiFi. Retina iPads are hungry for large images, but may be downloading them over 3G. In addition, you might not want to simply scale down an image for a small display. In some cases, it may be preferable to use a different image entirely that has been cropped to reveal important details at smaller dimensions.

Sources for Further Reading

Breakpoints and Pixel Dimensions, 5.0 out of 5 based on 1 rating
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.