The Official Weblog for Restive Labs

Device Classes As Breakpoints

  Obinwanne Hill        May 5th 2014
Device Classes As Breakpoints

Breakpoints have risen from obscurity and taken center stage in the life of the modern Web designer. They are necessary because they enable us set thresholds for our design aspirations. We live in a world where the Desktop Computer is not the only device holding sway, so we have to be cognizant of this reality and update our tactics to ensure that the Websites we build can work everywhere for everyone.

However, the tools that come standard for building these so-called Responsive Websites [Media Queries] do not really make it easy to target Device Classes like Smartphones, Tablets, TVs, etc. I find that odd because it seems like Device Classes should be logical breakpoints in every respect. I say that because when starting out, it's virtually impossible for you not to ask the question "How is this Website going to look in a Tablet?!"

In this blog post, I intend to reach a definitive conclusion [using as little Math as possible] on whether Device Classes really should be Breakpoints.

The Standard Practice

If you've been doing any sort of Responsive Web Design, you've probably come across Media Queries. To the uninitiated, Media Queries is a CSS3 module that enables content on your web page to adapt to different conditions. The following CSS markup is an example of a media query:

@media screen and (min-width: 240px) and (max-width: 320px){
    body { background-color: red; }
}

The markup above will change background color of our web page to red if the viewport width is between 240 pixels and 320 pixels in width. This technique has become the cornerstone of Responsive Web Design, and it now seems to be the established order.

However, Media Queries are quite limited in terms of capability:

  • They are not intuitive, and it's quite difficult understanding what exactly should be happening to your layout at what threshold, especially when you have so many media directives active
  • They do not allow you to target Device Classes e.g. Smartphones, Tablets, etc. A recent poll I conducted on whether it would be helpful if Media Queries could target Device Classes recorded 54% of all respondents affirming support for such a feature
  • They do not allow for modularity, which makes it virtually impossible to build reusable components for your web page.

The general experience with Media Queries is usually cumbersome and tacky, and it is very possible to find oneself creating 6 to 12 or more different media directives to cover your Web design aspirations. And because you have to duplicate all your CSS rulesets across all these media directives, making even small changes could take significant amounts of time, not to mention having to test the website each time you do it on so many devices.

A Break from Tradition

A few months ago I was building a Website, and instead of using Media Queries like every good Responsive Web designer should, I opted to use a plugin that I developed instead. Things seemed to be working the way I wanted, but I still kept thinking to myself "No Breakpoints?! I must be doing something wrong no?!" How could I be undertaking a Responsive Website project and not using any breakpoints. My insecurity could only have stemmed from one thing, and that thing was...Tradition.

I wanted to build my Website according to Device Classes i.e. Desktop [of PC], Phone [i.e. Smartphone], and Tablet; and it didn't seem like such a complicated aspiration to have. However, it definitely would have been complicated if I was using Media Queries, because Breakpoints in Media Queries are agnostic to Device Class. So I had to explore another approach that I'll explain a little later.

Still, should Device Classes really be Breakpoints in and of themselves?! I read an article titled Designing for Breakpoints by Stephen Hay, which suggests that indeed they [Device Classes] should be Breakpoints. However, maybe I can use some Science to make that declaration definitive, and I’ll try to use an old math trick that always seemed to dog me in high school to do it.

Size and Aspect Ratio Variance Matters

One subject I really loathed when I was in high school was Standard Deviation. I liked Math and most of its topics quite a lot, but Statistics just seemed to be from the Dark Side. It wasn’t until I needed to find a method that would help me determine similarity [or dissimilarity] of physical dimensions of Mobile devices did I realize that Variance and Standard Deviation would actually be very helpful. Funny how stuff you hated to learn comes back to help you in life.

Variance measures how far a set of numbers is spread out. A small variance means that a set of numbers are relative close to each other, and a large variance means that a set of numbers are well spread out. 20, 20, 20, 22, 21; variance is low. 101, 3, 67, 2004, 345; variance is high. A variance of zero indicates that all numbers in the set are identical. Standard Deviation goes a step further to show how much variation exists between a set of numbers and their average value. There’s a very good video tutorial on YouTube, just so we don’t turn this into a Math lesson.

So why do we need all this?! When designing a web page layout, it's natural to think of adaptation across broad, conceptual thresholds. Starting out, it's difficult to not to ask the question "How is this layout going to look in a Smartphone"? It's not that you're overly concerned about a specific device, just Phones as a broad class. Therefore, it will only make sense to employ breakpoints if there are significant differences among specific devices in the Phone category. The same goes for Tablets and other device classes.

A preponderance of Outliers in a specific device class will signal the need for further consideration of layout adaptation and the use of more than one breakpoint. However, if most Phones were similar to each other, then it wouldn't make any sense to define sub-class breakpoints. So if we consider Physical Size and Aspect Ratio of the two major device classes, both within and across classes, we can get a better sense of the variation within corresponding distributions, and also know the prevalence of outliers in a bid to define the right thresholds.

By and large, it is accepted that an Outlier in a distribution of numbers is any value that is plus or minus 3 standard deviation from the mean; we will use 2 standard deviation instead. This is not considered a perfect test in all circumstances, but being that our dataset is relatively small and not random, it'll serve our purposes for now. Looking at data on the Top 10 Devices culled from Screensiz.es (accessed May 3rd 2014) for both Phone and Tablet, and calculating for both Mean Deviation and Standard Deviation, we have the following tables:

  • Device
  • Physical Size
  • Aspect Ratio
  • Mean Dev. (Physical S.)
  • Mean Dev. (Aspect R.)
  • iPhone 4 (4, 4S)
  • 3.5
  • 0.6667
  • (0.94)
  • 0.0787
  • Galaxy S3
  • 4.8
  • 0.5625
  • 0.36
  • (0.0255)
  • iPhone 5 (5c, 5s)
  • 4.0
  • 0.5634
  • (0.44)
  • (0.0246)
  • Galaxy S2
  • 4.3
  • 0.6000
  • (0.14)
  • 0.0120
  • Google Nexus 4
  • 4.7
  • 0.6000
  • 0.26
  • 0.0120
  • Galaxy Nexus
  • 4.6
  • 0.5625
  • 0.16
  • (0.0255)
  • Galaxy S4
  • 5.0
  • 0.5625
  • 0.56
  • (0.0255)
  • Galaxy S Plus
  • 4.0
  • 0.6000
  • (0.44)
  • 0.0120
  • Galaxy Note II
  • 5.5
  • 0.5625
  • 1.06
  • (0.0255)
  • Galaxy S
  • 4.0
  • 0.6000
  • (0.40)
  • 0.0120
Table 1: Top 10 Phones by Popularity
  • Device
  • Physical Size
  • Aspect Ratio
  • Mean Dev. (Physical S.)
  • Mean Dev. (Aspect R.)
  • Apple iPad 1 & 2
  • 9.7
  • 0.7500
  • 0.88
  • 0.0953
  • Apple iPad 3 & 4
  • 9.7
  • 0.7500
  • 0.88
  • 0.0953
  • Google Nexus 10
  • 10.1
  • 0.6250
  • 1.28
  • (0.0297)
  • Samsung Galaxy Tab
  • 7.0
  • 0.5859
  • (1.82)
  • (0.0688)
  • Samsung Galaxy Tab 2
  • 7.7
  • 0.5859
  • (1.12)
  • (0.0688)
  • Samsung Galaxy Tab 10.1
  • 10.1
  • 0.6250
  • 1.28
  • (0.0297)
  • Samsung Galaxy Tab 2 10.1
  • 10.1
  • 0.6250
  • 1.28
  • (0.0297)
  • Asus Nexus 7
  • 7.0
  • 0.6250
  • (1.82)
  • (0.0297)
  • Apple iPad Mini
  • 7.9
  • 0.7500
  • (0.92)
  • 0.0953
  • Amazon Kindle Fire HD
  • 8.9
  • 0.6250
  • 0.08
  • (0.0297)
Table 2: Top 10 Tablets by Popularity
  • Device
  • Mean (Physical S.)
  • Mean (Aspect R.)
  • Standard Dev. (Physical S.)
  • Standard Dev. (Aspect R.)
  • Phones
  • 4.44
  • 0.5880
  • 0.591
  • 0.033
  • Tablets
  • 8.82
  • 0.6547
  • 1.299
  • 0.068
  • Phones + Tablets
  • 6.63
  • 0.6213
  • 2.452
  • 0.062
Table 3: Standard Deviation by Summary

Note: Items in bracket symbolize negative sign

So what does this data tell us?! Let's highlight a few highlights:

  • Physical screen size for Phones: 80% of all phones fall within 1 standard deviation from the mean, and 100% of all phones fall within 2 standard deviations. So in terms of screen size, there are no outliers i.e. phones with wildly diverse physical size characteristics
  • Aspect ratio for Phones: 90% of all phones fall within one standard deviation from the mean, but it’s still 90% within 2 standard deviations. The iPhone (4, 4S) is somewhat of an outlier here, and we can attribute that to its relatively tall screen. Still, very similar characteristics.
  • Physical screen size for Tablets: the data is the same as phones, 80% within 1 standard deviation, and 100% within 2 standard deviation. Hence, we can also say Tablets are quite similar to each other when considering screen size.
  • Aspect ratio for Tablets: 50% of Tablets fall within 1 standard deviation of the mean, and 100% within 2 standard deviation. So it appears Tablets are even more similar than Phones in the Aspect Ratio area. No real outliers here as all Tablets are present and accounted for within 1.6 standard deviation.
  • Mixing Phones and Tablets Together: for physical screen size, 55% of all devices [Phones + Tablets] fall within 1 standard deviation of the mean, and 100% within 2 standard deviation; this points to higher dissimilarity in screen size across device classes. As for Aspect Ratio, 90% of all devices fall within 1 standard deviation from the mean, which basically means that the Aspect Ratio of Phones are Tablets are significantly similar across classes.

As we can see from this data, the physical screen sizes are very similar within individual device classes, but they vary significantly when looking at all devices together. And although the aspect ratios of all the mobile devices are very similar, their physical characteristics are significant enough for us to maintain a clear demarcation between ‘Phones’ and ‘Tablets’.

And these are The Breakpoints

These results seem very instructive. The similarity between most devices within their device class really does not warrant layout adaptation on a sub-Phone or sub-Tablet level. However, the same cannot be said if you consider all devices across device classes. They are all similar from an Aspect Ratio standpoint, but clearly the story is different when considering their Screen Size.

As a result, it appears that we can safely establish that when designing Websites for a Mobile audience, Form Factor and Orientation seem to be the only rational breakpoints that will matter for the majority of design circumstances you come across. Form-factor matters because there is significant dissimilarity between the physical screen sizes of phones and tablets to warrant it. And Orientation matters because there is a need to make changes when the orientation changes e.g. showing a sidebar in landscape that was hidden in portrait.

However, as things stand today, Responsive Web Design [and its primary tool that is Media Queries] is not exactly a front-running Thoroughbred in the 'Intuitive Stakes'. It would really be nice if it [Media Queries] was, and if it could enable Web Designers do something definitive like the following and be done with it already:

@media phone and (orientation: portrait)
{
    //your style rules here
    #sidebar {display: none;}
}
@media tablet and (orientation: landscape)
{
    //your style rules here
    #sidebar {display: block}
}

Now wouldn't that be just lovely?! I still wouldn't use them though, because I still feel they are too limited for the kind of Web Design required for websites of the future, but for now it would ease the pain for a lot of folks that do. I have gone through the CSS4 Media Queries Specification, and unfortunately there is no such proposal in the draft...last time I checked (May 28th, 2014).

In Closing but Moving Forward

I know that some would argue that Device Classes should not be considered because they might not be 'Things' in the near future. I don't understand this argument, because it usually takes massive tectonic shifts in technology and herculean efforts in marketing to disrupt 'Things'. Cars, TVs, Phones, Fridges, Glasses, all 'Things'. These 'Things' simply just don't disappear into obscurity, especially after they attain near ubiquity, which means they have undeniable utility.

Web designers need to have the freedom to build Websites the way they imagine them in the wild. It's hard to think of a Website today without wondering what it would look like on a Phone or Tablet or other device class. In addition, the Science would also suggest that the demarcation between Phones and Tablets is a valid breakpoint. Apart from size, the use cases are somewhat different and it would be great to have a way of.

As a result, I see no reason whatsoever that would suggest that there shouldn't be an intuitive way to make this determination. Based the poll results I cited earlier, the majority of Web designers would like such a feature. I say let's give it to them. Adding this capability to the existing featureset won't hurt anybody.

What is Restive?!

Restive Labs is a creator of software and services for helping Web designers, developers, and enthusiasts build Websites that are both Responsive and Fast.