Avoid thinking in pixels

When writing CSS for websites it's easy to use pixels for everything. Just measure up everything in the design you were given, fill out the numbers and you're done. You've built a beautiful pixel perfect website. Until somebody comes along with a mobile phone. Or their 13" laptop. Or maybe somebody is using a fancy 27" iMac screen. The retina version I mean. Then everything looks weird. Maybe the design doesn't quite fit, causing a vertical scroll. Or maybe the design is an old fashioned 960px grid site. That would certainly create huge amounts of whitespace. Oh and then there was that retina display. Everything looks a bit blurry there.

The point I'm trying to argue here is that pixels are old fashioned. Technically a pixel is a single RGB light that can light up together with many other lights to create an image on the screen. So when you imagine a retina display the pixels are actually smaller. So 1px on a normal screen is four(!) times larger than one on a retina display. I've argued with designers over this. A lot. They view a pixel as this absolute unit of design. Double the pixel density, you double the size of your design. And then you make your design. Font size 16px because that looks great. Except.. you doubled the size of your entire design. So the font sizes should double as well. And you should zoom out twice, because that's how everything will look on your user's screen. Probably. Because you have no clue about the actual pixel density. So, how in the hell are you supposed to solve this?

Well, the solution is simple and extremely complicated at the same time. Drop pixels. Just try to not think in terms of something being 300px wide. Think of it as 25% of the screen width. And then when you resize your browser and the layout becomes cramped, come up with a new percentage. Maybe something like 50%. And then when the screen is even smaller you might want to scale up to 100% width, allowing all columns to line up vertically so a user with a small screen can scroll down to view content. This obviously poses a few usability problems that I'll not go in to right now. Just make sure that content can be navigated properly with a good menu for example. Okay, I'm drifting off. Let's get back to this dropping pixels thing.

When you start defining widths as percentages for your layout you suddenly are extremely flexible. Maybe even a little responsive! Or fluid.. Or both. When you combine these percentages with good breakpoints (base these on your content, not assumptions about devices. Your assumptions are probably wrong.) you get a good responsive layout.

Another nice practice is to start working with (r)ems. The em is a unit relative to the font-size of the containing element. So if you have a section, and you give it a width and height of 10em you essentially give this element a size of 160x160px. This assumes that your user didn't change their browser defaults. Now imagine that you have a list of four items, one should be highlighted. If you've defined the styling for your item in ems, you could highlight one by simply increasing it's font size.

One last thing to mention is how you would go about converting that pixel design you were given to css without pixels. Well, you could start by calculating everything in percentages by taking the design width and the width of the component your styling. Divide the component width by the design width, multiply by 100 and there's the percentage width. To get a size in em divide a size by the font-size (960px /16 = 60em).

This might all seem (over)complicated. And honestly, it sometimes is. And when you nest a few levels and then change the font-size everything gets even more complicated. But I feel like it's all worth it. As soon as you start viewing your content on different devices and see how easy everything just flows into the correct places with almost no extra code, you feel like you're totally on top of the world. Oh and you get bonuspoints for doing that mobile first. Adding things, making them larger and displaying more content is always easier than making things smaller, hiding things (hiding rarely is a good idea) and complicating interactions.

So, yeah, my two cents on a design topic. Something I'll probably be writing more about in the future since my new job requires me to write a whole lot of front-end code.