Defining page breakpoints

Breakpoints are the screen resolution dimensions at which your website will adapt to better display the page content. It’s common to define and work towards the devices you’re targeting (iPhone, iPad etc.), but defining for products that are in use today can be a nightmare going forward. Instead, it is much better practice to let the content itself determine when it should adapt.

Image for post
Image for post

You’ve probably heard of the ‘Mobile First’ approach. Tackling the small screen design first is a good idea as it forces you to concentrate on what is really important. Once you’ve perfected your minimum view you can start to expand the screen size until a breakpoint becomes necessary.

With screen sizes getting bigger, it’s also important not to neglect big screens. Whilst full width designs can look great on the average screen size, with an equally good looking responsive small screen view, on a big screen the content can get lost. It’s good practice to use a maximum width to take ever growing screen sizes into consideration.

Using this method you are allowing your pages to be more responsive and dynamic, and working from small to big you will find it a lot easier to accommodate all the content instead of hiding content as you go smaller.

Written by

I am Simon Mauro Guido, a Product Designer (UI/UX) and Visual Brand Designer based in London.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store