Human Resistance Manifesto (or, Best Practices in Responsive Design)

20.06.2017 |

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

 

While all websites with responsive design put a dead end on the life of an undead, some are more effective than others. Here are a few best practices to think about when building responsive sites.

 

Kicking Zombies in the Baseline

Ensure that your media queries appear below your baseline and are increasingly more specific. All things being equal, CSS rules placed lower in your file beat out rules higher in the file. So, if you start with your baseline, you can then make surgical changes to it lower in the file and not have to redo everything within this media query.

Similarly, a media query with min-width: 600px is less specific than one with min-width: 900px because the 900px one covers all of what the 600px query covers, plus 300 more pixels of width. Just like how you can build off the baseline with your media queries, setting your more specific media queries lower allows you to build off those above.

 

“I Break for Design”

Some think you should base your break points on common devices such as Apple’s iProducts, but doing this could degrade the experience of other users. Since new screen sizes are spreading like the zombie contagion, a better experience can be had by all if you break based on the design of the site and not the device viewing it. In this way, all users should see a great site because you only break when the design/content calls for it.

 

Killing Zombies with Your Font Size

Thus far, we have used pixels to measure where our break points should be, but there are other ways to measure, and the one that gives the most flexibility is the “em.” 1em is equal to the font-size (defaults to 16px), and you can use them in a similar way to px—e.g. 600px is equal to 37.5em. So, you can set your min-width media query to 37.5em.

How does this help kill zombies, you ask? We’re just swapping units.

The answer is that a user can change the default font size. If they decide to up (or decrease) their font size so they can more easily read the text, your site will hum along just fine—e.g. if they up their font size to 20px, the em units will adjust internally and still make the break point at the appropriate visual time, whereas a pixel-based media query could have fonts spilling out everywhere. (Note: Your padding, etc. needs to be in ems as well, for this to have the best effect.)

Like zombies, fewer break points is better. While there’s no rule on how many break points is too many or how few is just right, keeping them to a minimum makes your CSS code smaller, improves performance, and eases maintenance. While all of these are true, their effect in small numbers on the final page will be marginal. If an additional media query improves the user experience, it’s worth doing. If 100 media queries are required to improve an experience, it’s worth stopping and wondering if these are all needed or if there isn’t another way to do that thing.

We’ve got some best practices under our belt, but those zombies like to get together and ambush you. In the next lesson, we’ll take a look at where they might be hiding in your room and how you can fire through the door before they jump out to get you.

 

Recommended book

CSS Secrets: Better Solutions to Everyday Web Design Problems by Lea Verou

 

Share with friends