Can I Still Use Px?

Posted: 21 Jan 2013 05:30 AM PST

Moving from static to flexible layouts involves a move from absolute to relative measurements. That generally means giving up px in favor of ems for vertical measurements and % for horizontal measurements. A question that continues to get asked is whether or not it’s ok to still use px here or there.

The short answer is no. The longer answer is I don’t believe in absolutes and as we’re moving away from absolute measurements and towards relative ones, let’s not be so absolute with an answer to the question.

Why Relative Measurements?

Responsive isn’t buzzword. It’s a change in thinking about how we develop websites. For a long time we had been creating fixed width and usually centered sites thinking it gave us more control over our designs. We inherently knew the web is a flexible medium and our static methodology wasn’t the right answer, but creating a well designed flexible experience didn’t seem possible, at least not without considerably more work and a lot more compromise than we’d like.

As the number of mobile devices increased and as more and more people began using those devices, it became clear the control we thought we were giving ourselves was an illusion. Fortunately Ethan Marcotte came along and showed us that the technology was there to develop flexible sites well and without as much effort as we thought.

You can’t have some parts of a design adjust to various conditions while others remain fixed and still maintain the proportion between them.

When you create a grid or any kind of layout in general you set it up around some fixed measurement. In print this measurement is the size of the page. It’s a fixed constraint you have to deal with and it becomes the starting point. When we moved to the web we took all our understanding and work designing around a fixed canvas and wanted to apply it so we arbitrarily fixed the canvas.

We took something that wasn’t a constraint and created an arbitrary constraint to make our lives easier.

We’ve now come to realize that a fixed size isn’t a constraint we should design around. In giving up the notion of a fixed canvas we need to find another fundamental element to design grids and layouts around, which might include:

a measure of text
the size of a banner ad
the size of an image

A measure of text (probably the best fundamental element for most sites) isn’t fixed or it shouldn’t be. It should vary with font-size and line-height. Even things that seem static like an image or ad change size in a responsive layout.

Grids and layouts are no longer about absolute widths and heights. They’re about proportion and scale. A column in an 8 column grid is 12.5% of the total. The gutter on each column might be 15% of the total column width. As soon as you start introducing an absolute measurement into the mix it throws off the rhythm and proportion. You can’t have some parts of a design adjust to various conditions while others remain fixed and still maintain the proportion between them.

But Ems and % are Difficult

The biggest reason people hang on to px is they’re easier to work with. There’s no math involved. You use your eye to choose how many px and you’re done.

With % you have to keep track of the container. 80% of what? The body? The main container div? The paragraph? With ems you have to deal with the cascade. 0.875 of 1 is easy enough to calculate, but 0.875 of 0.925 of 0.75 becomes a mess.

The math itself isn’t really that hard, though even with a calculator it can be hard to keep track of. It’s the bookkeeping and remembering what you’re dividing by what that’s a pain. It’s more math and bookkeeping than any of us wants to do. And let’s face it none of us likes seeing numbers like .80952381 in our css.

There are solutions. Preprocessors like Sass and Less will let us set some basic proportions and do the math for us through mixins and functions. It’ll look messy in the end, but we’re spending time in the clean preprocessed file.

Another solution, the rem, is just about ready for prime time use. It eliminates all of the bookkeeping as all the division is relative to a single root element. IE8 and below as well as Opera Mini won’t like our use of rems, though combined with a preprocessor we can still make them work.

Sure no one wants to do the math or bookkeeping, but it’s not really an excuse not to use relative measurements. It isn’t that hard and there are solutions now and on the way to make it easier.

Can I Still Use Px?

The question usually doesn’t get phrased in any way that asks when are px a better choice, but rather when is it ok for me to skip all the math and make life easy for myself. I’ve seen all sorts of responses that say you should use relative measurements, but not to beat yourself up for using px.

Even though I can’t think of a single reason why px are the better option at this point, I won’t tell you that you can never use them. Like I said I don’t believe in absolutes. Just because I can’t think of a reason, doesn’t mean a reason doesn’t exist. In fact in a moment I’ll share how px still end up in my own work despite my not thinking they should.

Again if the point is to develop flexibly and relate elements to each other proportionally then using absolute measurements makes no sense as they’ll always throw off the proportion and inhibit flexibility.

So how do px find their way into my work even as I seem so dead set against them? When tweaking a design it’s sometimes quicker to drop in some px and adjust than it is to keep doing the math over and over. Ideally these px get converted to ems or % once you’ve settled on an amount. Unfortunately it can be all too easy to forget and leave the px in.

One place I still specifically use px is border-widths. Often what I want is a thin line around an element and I don’t want the line getting thicker as the browser or font-size grows. There can also come a point on smaller screens where through rounding your border goes to 0 and disappears.

Relative measurements with min and max widths are the better solution and even here using a single px can throw proportions out of whack. Probably not to the eye, but then again how often have you had to correct a completely broken layout because something was a single px off?

I also still set px on images, though max-widths and heights of auto don’t make those px so absolute.

Is it ok to use px then? I’m still having a hard time thinking of a good reason, but it’s not for me to tell you what you have to do and one more time I don’t believe in absolutes. If you have a good reason for choosing px over em or %, then go ahead and use px.

However, I’d strongly suggest your reason should be more than wanting to save yourself some math and bookkeeping. Have a reason for why it improves your design beyond how it helps you avoid a couple of things you’d rather not do.

Summary

The shift toward responsive design is in part a shift toward flexible layouts. It’s one of the big 3 of responsive design after all. Much of this flexible shift is a move from absolute measurements like px to relative measurements like em or %.

We’re no longer designing to a fixed canvas. We’re designing proportionally to something within the content like the measure of text or an ad unit. Proportion requires relative measurements, especially when the elements you build that proportion around don’t have a fixed size.

Sure ems and % can be a pain to work with at times. The math gets ugly because of the cascade and we get lost in the bookkeeping. We have tools to help us deal with these things, though.

We have calculators and preprocessors and even better rems, which work most everywhere with fallbacks where they don’t.

I won’t tell you that you have to use em and % and never include a px measurement in your code, however I struggle to find any legitimate reason not to, assuming you’re developing a flexible layout. If you are going to choose px please have a reason other than not wanting to do the math.

The post Can I Still Use Px? appeared first on Vanseo Design.