Hitting Zombies in the Break Point

20.06.2017 |

Episode #6 of the course Responsive design: An undead introduction by John Rhea


Now that we have a handle on how to beat zombies in the face with a flexible layout, we’ll need scalpel-like precision in optimizing for different screens, aspect ratios, and zombie contagion. That’s where the media query rides in on a refurbished World War II tank that survived Hitler, Mussolini, and the apocalypse to save your website experience and explode the ever-living daylights out of the zombie horde.

Media queries allow us to select what CSS is utilized based on context and conditions. The most utilized media query for responsive design is based on screen size.

One more thing before we get into the shotgun-wielding media query: the best way to sling media queries is to start with a baseline and then make modifications to it within the media queries. Though there aren’t too many browsers that can’t handle media queries anymore, having a baseline gives those browsers something to fight zombies with.

Plus, if your elderly mother has a browser from 1997 and you don’t have a baseline, she won’t be able to gush to the neighbors about your zombie-killing website prowess.

A media query looks like:

@media screen and (max-width: 900px) { }

For this media query, any CSS within the curly brackets will apply when the HTML page is displayed on a screen and the browser is thinner than 900px. And that 900px is called the break point, mostly because it’s where the design or layout breaks or changes but also because you’re cracking zombie skulls.

While the initial zombie-killing media query example only showed max-width, you can also use min-width or min/max height and many other screen characteristics.

If you’re going to use a baseline, you have two basic choices: design for desktop/largest screen first or mobile/smallest screen first.

The benefit of desktop first is that it lets you put all the bells and whistles you had for the desktop in first and get them lined up just right. Then you can drop those bells and whistles like a love affair after a zombie infection.

This process tends to be easier on the designer/developer but isn’t always best for the user, as a mobile browser may download all those bells and whistles without actually showing them to the user.

Mobile first is a stiletto-heeled zombie killer who emphasizes speed and user experience over a developer’s preference and ease.

If you start with the slimmed-down website and add elements in via media queries, those heavy images and design elements that make the desktop awesome aren’t downloaded. That saves bandwidth, processing time, and the lag between smiles.

For users on mobile with an often shaky or slow connection, the faster you can get your site to them and the faster it can run on their low-powered processors, the happier your users are. And happy users are users that kill zombies (and buy your stuff).

Okay, I’ve dropped some knowledge on you for text-based sites and the response is like a human to the zombie contagion, but sites are made up of more than text nowadays. So, you may ask, what about those heavy images I keep referencing? How do you make them respond? Well, thank you for setting up my next lesson nicely.


Recommended book

Designing with Web Standards by Jeffrey Zeldman and Ethan Marcotte


Share with friends