Using pixels is not very polite

A few days ago Chris Coyier wrote an article about which font-size units to use. It’s a very clever idea. He basically says to use the em for font-sizes of elements like <h1>, and use rem to adjust the font-size of different components on the page. This definitely makes sense. It sounds like a similar solution to the one I describe here. There is one important flaw in this article though. Chris defines the root font-size in pixels. This is an accessibility problem.


CSS layout for designers

I’m going to do a series of workshops about code for web designers. The goal of these workshops is to teach some essential basics about how HTML and CSS work to people who currently design stuff for the web in tools like Photoshop. After these series I don’t expect them to write production code, but I expect them to be able to solve certain design problems in the browser. I’m going to start with explaining semantics. Then I’ll teach them how to style texts, how to do good typography. After that I’ll teach them all those fabulous selectors we have. They’ll learn how to make animations and transitions, and how to apply bling with shadows, border-radius, gradients, etc.

But there’s more

Understanding irrational ratios

Last week Nathan Ford published an article on A List Apart about shaping your content with grids based on ratios, instead of shaping it with grids based on columns. Since I have no feeling about what’s beautiful and what’s not I love articles like this one. They give me theory I can play with. By playing with this theory I might, one day, understand beauty. And I really want to understand beauty, so I started playing with the theory.

Go on

Accessible notes in the margin

Every now and then I get a strange but happy e-mail alert. The alert tells me that someone liked a highlight I made in a book. This means that somebody was reading the same book I read a while ago, saw that I highlighted a sentence, probably read the comment I wrote in the margin and then decided that this highlight and comment were useful enough to like it. Of course this feature can not be found in a physical book, it is a feature in Readmill, an e-reader.

Sounds interesting

Koop een gameconsole, je hebt ‘m nodig

This column was published in the Dutch, paper version of Web Designer Magazine. It’s in Dutch. Ik heb een nieuwe baan. Om die baan te kunnen uitvoeren heb ik een laptop nodig en gelukkig kreeg ik die van mijn nieuwe baas. Een prachtig glimmend ding, maar deze mooie laptop was te traag. Het was bijvoorbeeld niet echt mogelijk om twee browsers tegelijk te draaien, dan liep de boel vast. Ik moet dat soort dingen kunnen doen met mijn computer. Gelukkig had ik na een week een nieuwe, supersnelle laptop waarop ik mijn werk gewoon naar behoren kan doen. Ik ben natuurlijk een enorme mazzelpik; de meeste mensen hebben niet zo’n baas.

Nee, inderdaad

The problem with paginated archive pages on blogs

A few years ago I created the wordpress templates for the first version of Minimalissimo, which was brilliant. Years and years ahead of its time. Maarten, the mastermind behind that site, asked me to fix the weird problem with paginated archive pages: If you scroll to the bottom of a blog, you often see a link to older posts. These pages are often numbered, like /page/1/, /page/2/, etc. The problem with these pages is that the content on these pages changes all the time. The oldest posts are always displayed on the page with the highest number (on this site, at the moment that’s number 12). This makes these pages completely useless. You can’t link to them because next week the content you’re referring to is probably gone. The numbering is the wrong way around.

Well, why don’t you fix it?

Should you optimise images for retina screens?

Today I asked on Twitter People with a retina screen: do you notice the difference between retina-optimised and normal images on the web?. Immediately people started answering that, sure, heck yes, absolutely, most noticeable with icons, they see the difference. Now I wasn’t really asking about icons because I notice this difference myself. So I rephrased my tweet to during day to day surfing, do you notice the difference between retina-optimised and normal photos on the web?

Good question

Random colour channel transitions

I’ve been playing with some random stuff lately. I created billions and billions of random layouts, random rectangles, random triangles, random quadrilaterals, random ducks, random white images of random size, and random blobs. These are all generated images with random dimensions and random colours. Nothing interactive really, and not very dynamic either. I decided to create an animated blob. I wanted to learn how animations work in SVG (weird!), and I wanted to see what dynamic randomness looks like.

Dynamic randomness sounds fantastic

Human readable colours

How do you describe a colour? Some colours are easy. It might be clear that something is red, blue or yellow. But what do you call something between green and yellow? When is it green? When is it yellow? And how about saturation? When would you call something gray, and when can we say it has a hue? The same with darkness and lightness: There is a point when a color is perceived as white or black.

But where is that point?

Why I dislike the rem unit

There are a few serious issues with the rem unit. The main reason why I dislike the rem unit is because pixels don’t belong on the web. Yes, that sounds weird, but let me explain. If you define font-sizes with pixels people who use certain browsers can’t increase their font-size. This conflicts with the idea that the user should be able to override styles with their own preferences. I think that idea is one of the things that makes the web such a wonderful place. That’s why I dislike pixels. But what does that have to do with the rem?