In responsive web design, breakpoints are designated as a series of measurements at which the web designer has decided that the layout of a web page should change in response to a change in size of the display screen. Our research over the past few months is set to crack-open what we feel to be the single largest dilemma facing us in responsive web design: precisely where these breakpoints should occur?
When we first set out designing websites, back in 2002, the set of challenges we faced were different to those we face today. Back then we fuffed-out-loud whilst working to get websites looking equally as good on different browsers. Much has changed yet some things stay the same: today we find ourselves fuffing-out-loud when working to get websites looking equally as good on different devices. The website you use today isn't your Mum's website of yesteryear.
We work with a far richer toolkit of responsive web design techniques which have evolved through a level of standards compliance we could have only dreamed about 14 years ago. Although, thankfully, web browsers have become far more compliant one major thing that has become far less standardised is the size of the screen that our websites are displayed upon. We practice what's become known as responsive web design so that we're able to design and develop a website that looks great and performs predictably whether you choose to browse it on your phone, tablet, laptop, desktop or TV.
Back in 2002, designing different sized websites for different monitor resolutions was, quite rightly, deemed to be bonkers. Today, however, designing one website that responds to the display screen size of the device that's being used to browse it by changing not just its size but its layout and content is now the norm. Thanks, however, to the hard work of countless web developers and designers our responsive web design toolkit means that we're able to deliver what was simply unthinkable 14 years ago in 2002. I wouldn't go as far as to say this is still bonkers but the mental effort required to create something like five websites in one is far from insignificant.
If responsive design doesn't f*** with your head then you're simply not trying hard enough. @subatomicweb
As far as websites go, breakpoints are latent dimensions used in the design and construction of a website which indicate where the web designer anticipates the need to change the layout of the web page. Breakpoints are fundamental to the notion of responsive web design; the presence of a breakpoint enables a website to declare to a device that's 'self-aware' of its own properties how to display the web page's content. Underpinning our responsive web design work are two critical concepts: i) the absence of an
@media query is the first media query and ii) content alone determines a web layout's breakpoints. Or, put more colourfully, by @brad_frost & @stephenhay
Start with the small screen first, then expand until it looks like shit. @brad_frost | @stephenhay
The problem with taking this approach literally means having to rewrite breakpoints for every website individually and needing to continually monitor the display screen sizes of new devices as and when they hit the market. Whilst the approach isn't broken, what it does do is push the cost of development onto our Customers and, at a time when web design pricing is even more sensitive than usual, so we went looking for a reliably repeatable formula that turned-out to be a fibonacci sequence.
At the risk of sounding a tad melodramatic, the past few months of development to find a meaningful and reusable set of breakpoints which will work reliably across all websites and all devices has tested us and proven that the definition of breakpoint:
the stage at which your control over yourself or a situation is lost [dictionary.cambridge.org] is, indeed, correct.
Our research began by capturing and plotting the incredibly diverse range of display screen sizes encountered across a typical website [see footnotes]. The display screen size plot of the 237 screen sizes that we generated highlighted a clear relationship between device screen sizes and standard video resolutions such as: VGA, SVGA, SXGA, WXGA and HD. To date, we'd been able to detect and differentiate between devices based-upon a count of the display screen's pixels but so-called Retina displays, capable of multimillion-pixel views, rendered this initial approach highly unreliable. The nail in the coffin was realising that the iPhone 6 and the iPad, despite having dramatically different sized displays, both declared themselves as having a display width of 980 pixels.
Our research ended once we'd exhausted and abandoned using device pixel-counts. We found a direct, cosy relationship between video resolution standards and typographical measurement and rapidly switched to expressing device properties with
em widths. What triggered the conversion was that Steve had scribbled four em-widths onto notepaper and realised that not only was the sequence made up of nice round numbers but, critically, the numbers were close to being a partial fibonacci sequence. 10, 20, 30, 50, 80, 130 & 210 ems
A fibonacci sequence describes an infinitely incremental set of numbers where the next number in the sequence is the sum of the two numbers which precede it and so on. This means that, in a fibonacci sequence, the numbers scale beautifully (such that a fibonacci sequence can be used to describe a nautilus shell such as the one that you may find at the top of this blog page). Our research confirmed that, because the resolutions of, for example, iPhones, iPads, MacBooks and iMacs are designed as a range that doesn't simply double in size from device to device, there is a relationship between device resolution and video resolution. Overlay a fibonacci diagram over a display screen plot and you're able to use a fibonacci sequence as a reliable predictor of when to introduce a responsive web design breakpoint that works beautifully across a wide range of devices.
A fibonacci sequence has now become our perfect predictor for plotting responsive website breakpoints independently of device properties. At the low-end of the sequence it looks like we're able to exercise granular control over small handheld devices upon which responsive design is more sensitive to. Looking ahead to a future-proof predictor, as and when device resolutions change again all we predict we'll need to do is to fiddle with the first two numbers in our chosen fibonacci sequence. Time will tell and this blog post looks like a great place to record whether this prediction holds true when we find ourselves looking back at our development history in another 14 years' time.