UX – Screen Size Breakpoints

I think I’ll be tagging all of my UI/UX posts with UX in the title, just for simplicity’s sake. That way, you can skip them if you’re not interested.

So! Screen size breakpoints. What are they and why do we care?

Interactive Fun Times!

To see screen size breakpoints in action, you can use this site! Visit tavenmoore.com from a desktop computer with a pretty good size monitor on it. Make sure the browser is resizeable, then snag one of the sides and slowly begin shrinking the width of your browser.

See how things start to shift around to better encompass the space?

Every time the content LEAPS to a new configuration, that’s the code hitting a new breakpoint and changing what CSS your browser is rendering.

I’m not 100% happy with everything about this theme’s handling of the smallest breakpoints, but it’s definitely good enough for now and it’s a great example of what I’m talking about here.

Extra fun points? Doing this on other sites around the internet and seeing which ones are using break points.

Designing for multiple screens

Back in the day, pretty much every website was designed around the assumption that 99% of the userbase had about the same size monitor at about the same screen resolution. 800×600. Anyone remember those days?

Then, disaster struck! cue dramatic lightning strike About the year 2000, people started buying BETTER monitors. With higher resolution and more screen real estate.

Design retaliated by sticking their fingers in their ears for as long as they could, then very grumpily redesigning websites to fit a primarily 1064×768 resolution — typically restricting the majority of the website content space into a 1000 pixel “stream” down the center of the page.

And if you had 800×600 resolution, you just had to deal with it, because we designers are too busy to create tons of versions of our sites for you.

Ah, I remember those days.

The tide is turning. HAS turned, for most companies. We’re not dealing with a battle between two screen resolutions anymore. We’re fighting an epic WAR between screen resolution, browser versions, mobile phones, tablets — it’s DANGEROUS out there, and trying to design for all of them is a nightmare.

(Though pretty much every designer agrees that Internet Explorer is the One True Villain in all of this, as NOTHING fun ever works in IE and folks who use IE are notorious for never updating. Which is not entirely their fault, because Windows has been historically horrifically expensive to update, but that’s another post entirely)

Some sites are still doing the fingers-in-ear routine. These are the ones you have to painfully pinch and zoom when browsing via your phone.

The moment you realize your world has turned into “does this site look nice on a Kindle fire turned horizontally using the Safari app AND a Windows phone held vertically?” you realize you need some standards.

Enter the handy-dandy Breakpoints system.

Screen Size Breakpoints

The industry has more-or-less decided to agree upon a series of screen sizes as “breakpoints” — significant changes in screen size which kinda-sorta represent different devices folks might be using.

Many designers are using media queries in CSS to hide/show/move various blocks of the website around so that they look different for the various screen sizes.

Twitter Bootstrap (a very popular design platform, and you needn’t know more than that for the moment) has simplified these media queries to the easy-to-understand XL (wide, big screens) L (normal size screens) M (small computers or very large tablets) S (tablets and really big phones) and XS (most phones).

TLDR : Too Long, Didn’t Read

In other words, instead of having to worry about EVERY SCREEN RESOLUTION EVER, designers try to make things look good in about five different sizes.

Discussion Time!

I mostly wrote this post so I could talk to you all about the heated debate over the use of the hamburger icon, but I figured it was an important enough building-block topic to be worth its own post.

Tell me — have any of you tangled with sites that were inflexible and painful on various devices? Any sites you really wish would become more mobile friendly? (FlightRising.com, I’m looking at YOU)

Related posts:

UI vs UX and Why You Should Care
?? Video Game Design