Point break

If you’ve been working with responsive web design then you will be familiar with the term ‘breakpoint’ being used to define a media query with a browser width (usually although height can be used too) at which something in the website’s layout or look should be changed. The name itself though has a negative connotation associated with it and we should change that.

Let’s see at what I mean by looking at the term ‘breakpoint’ itself. The ‘point’ part of it makes sense, as it’s a particular position or instant at which something needs to be changed. But ‘break’, well that sounds like something has gone wrong – our web design has somehow broken and we need to fix it, in this case with a media query and some new styling.

This is too negative.

Usually our site isn’t breaking at all, we’ve chosen a point at which we want to change something in our website’s layout – nothing has actually broken!

Tweakpoints and flexpoints

I’m not the first to think this, and it was Jeremy Keith who posted about the same topic in which he acknowledges the existence of ‘breakpoints’ – points at which you change your layout drastically to avoid it looking like crap – but that not all such ‘breakpoints’ are equal. Some, Jeremy continues to say, we define in order to make a subtle or slight improvement to the layout. He suggests calling these particular points ‘tweakpoints’ which describes them accurately.

In response to Jeremy’s post, frontend developer Ralf Göke mentions in a tweet that he likes to refer to such ‘flexible breakpoints’ as ‘flexpoints.’

Differences

To me all these names fit well, but, as Jeremy says, they are not all equal and they have different meanings and the type of changes that are made within them differ:

  1. tweakpoints – subtle changes to things like font size, font family, line height etc.
  2. flexpoints – changes to things like padding, margin, floats, to move or alter the content’s container to help it ‘flex’ a bit better depending on the width in question
  3. breakpoints – when our design does truly break and looks like crap. Ideally we want to avoid these, and a layout that is well designed from the start will often do so

Ultimately

With responsive web design we are already taking into account the need for changes within our website layouts at the design stage. Our layout should never actually need to be referred to as ‘broken.’

I believe that we should be striving to avoid the need to define negative ‘breakpoints’ and instead focus on defining its more positive brethern ‘flexpoints’ and ‘tweakpoints.’