Responsive break points

Last week I tweeted about media queries, and that break points (the number of pixels when the media query takes effect) should be when the design breaks. This got a few questions, comments and remarks, so maybe a blog post is required.

Responsive design should not only be the theory behind creating mobile sites, it should also be for making a website look good for different viewports. There are many types of mobile device, if they have a "real" web browser, they often start at 320px in width (although there is smaller), and then range up in size, this also changes depending on how the device is rotated. Desktop and laptop screens often start from 1024px in width, which happens to be the same width of a landscape rotated iPad. There are then huge variations in different laptop and desktop screen resolutions. We also need to take into account the actual viewport (the size of the browser), even if the users old 15" LCD only has a resolution of 1024x768 pixels, they may have resized the browser to something smaller, this could be 632px, 786px or any other random variation. It's our job to make sure the site still looks great, the content is still readable and usability doesn't suffer.

When using a mobile first approach the site will always look good when small, as the browser window / screen resolution / viewport grows, the design needs to change along the way to keep it looking good. If this means a tweak of a heading size every 100 pixels then you'll need to add lots of media queries to do this. If the browser is resized and would look better going from single column to two columns at 712px then use that for the media query, why wait for the iPad portrait width of 768px to do this.

This theory of changing the design, adding media queries and adding break points as the design breaks does mean more media queries are needed, and more thought is needed, but it will make the site a lot more usable.

Simple SEO PDF guide

Get our latest PDF guide, Simple SEO.

Similar posts

Mailing list

Subscribe for monthly updates, blog posts, and client case studies direct to your inbox.

Twitter