Screen Sizes & Responsive Design

Designing websites is for desktops and phones...right?

While it's largely true that the grand majority of web traffic is on both desktop computers and smartphones, it's far from the whole truth. Even among just those two pieces of technologies, there's a significant variety in device and display sizes.

Desktop monitors, laptop displays, different brands of smartphones, tablets — the list goes on. Designing a version of your website to comfortably fit every existing screen size would drive you mad.

Thankfully, that isn't necessary. Web designers can instead take advantage of breakpoints.

Breakpoints

When putting together style sheets for a website, breakpoints serve as the border between two ranges of screen sizes. All devices' screen sizes fall somewhere between two breakpoints. Sometimes these are labelled as "small, medium, large", and other times they're referred to as the explicit size range they encompass (768px-1023px, 1024px-1215px; rolls right off the tongue, I know).

When planning out your UI, you can spend some time to consider how many breakpoints your website will have and what sizes exactly they will be. There are, however, libraries of stylesheets that come with breakpoints baked in.

Let's use Bootstrap – the most commonly used CSS front-end library – as an example. This is a front-end framework that holds a ton of design boilerplate for making element design a breeze. It even includes JavaScript for some of the more complicated behaviors.

Bootstrap currently uses six breakpoints that were chosen to umbrella the more common device sizes:

A device whose screen width is 800px across would be considered "medium", by Bootstrap's breakpoints, etc.

Like I mentioned above, you don't need to use Bootstrap (or another framework) to implement this, nor do you have to take advantage of all of a framework's given breakpoints. Bootstrap has six, but I typically only ever find myself creating styles for three breakpoints or so.

What this Means for Designing UI with CSS

With clever use of CSS classes and @media queries (which are rules in CSS you can set to only apply styles given that a certain condition is true), you can create page elements and element styles that only appear for particular screen sizes.

For instance, this block of text only appears on screens in the "large" range, or smaller. If you're reading this, it's probably because you're on a cell phone.

For instance, this line of text that only appears if the screen you're reading on is of size "extra large", or larger. If you're reading this, I'm willing to wager you're on a desktop or laptop.

That example doesn't mean a whole lot, but here's one that I guarantee you've seen before: navigation menus.

At the top of many websites, there's typically a navigation bar with several options to get you to the site's most significant pages. On smaller devices, that row of options is often replaced with a menu button which will instead present the entire list when opened. This website has that — the navigation options are tucked away into a submenu for smaller screens.

These are well and good, but why is it important?

Responsive and Mobile-First Design

Tailoring the experience for different screen sizes is known as responsive design — the website's layout is responding to the device's viewport and adjusting itself accordingly.

A very common and modern approach to web design is the mobile-first approach. This is where the website is created to organically fit on smaller devices, like phones, before anything else. Then, responsive classes and styling are used to have the site adapt to larger devices. This is huge — a very significant portion of web traffic is on mobile devices, and it wouldn't surprise anyone if that portion continued to grow.

The benefit to mobile-first design is that a phone will have an easier time loading a website designed for its size, as opposed to loading a desktop-sized view and then evaluating all of the elements and styles to apply afterward. I've read on a few occasions that this is due to the fact that the average smartphone doesn't have as strong of a CPU as something like a personal computer, but phones are getting notably stronger with each generation, so it's possible that this won't have the hugest impact in the future.

In the context of SEO, a fast load time is important. The last thing you want is someone clicking your website, waiting 8 endless seconds for website to load, getting bored, and clicking off.

Investigate your Frequently-Visited Websites

Subconsciously, you knew a lot of this existed. Popular websites create seamless viewing and usage experiences for different screen sizes. As for the unpopular ones...well I don't often visit those, so how would I know?

Keep an eye open and you'll start to notice the page elements being displayed differently for mobile-vs.-desktop versions.

For Further Information

For more in-depth information on some of the more significant topics in this article, visit the following websites: