This article was written in 2013. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
Compared to physical stuff, the web is easy, brilliant and friendly
Creating stuff for the web, if done right, is easy. A while ago, I saw this wonderful illustration by Mike Kus and decided to paint it onto a wall in our house. Painting an illustration like this onto your wall is a lot of work. First you have to design stencils in a vector editor, then you have to send these files to a laser cutter, then you have to drive to the laser cutter, get the stencils, buy paint, and finally paint the illustration onto the wall. I did that. And when I looked at it once it was finished I didn’t really like what I was seeing: the circles were not placed on a logical grid. The illustration was too big. Every circle should have been three centimetres smaller. Correcting this is really a lot of work. Redesign the stencil, send it to the laser cutter again, get the stencils, and paint every single circle back onto the wall. Again. After a month I finally had a beautiful illustration on my wall.
The web is easy
To thank Mike for creating this illustration, I recreated it using HTML and CSS. This is not so hard. You type some HTML, you add some CSS with some clever tricks in it, and you’re done. And since I defined all sizes with ems, it’s very, very flexible, and thus very, very easy to resize. If, on this website, I thought the circles were a bit too big, the only thing I’d have to do is slightly reduce the font-size of the HTML element. Yes, that’t it. No redesign of a stencil. No driving to and from a laser cutter. No painting everything all over. Just reducing the font size of one single element.
Not just easy, the web is brilliant too
This web-illustration looks good on a big screen. We could of course decide to shrink the illustration for people with a small device, but, since this is the web, we can also decide to change the layout of the illustration. And that’s what I did. If you make the screen smaller, the circles will rearrange themselves. And if you make the screen even smaller, they will rearrange again. This is fantastic. But there’s more fantastic stuff we can do. For instance, there are certain browser (like Opera Mini and IE8) that don’t support border-radius, which means we won’t be able to display the circles as circles: they would appear as blocks. I think this is not desirable, right? Mike clearly created an illustration with circles, they shouldn’t look like blocks.
Not just brilliant, the web is friendly too
So instead of sending a false image, with blocks, a better solution would be to just send a textual representation of the image. We could show people something like this:
Two connected balls A blue ball A blue ball A red ball Two connected balls A white ball A white ball Etc.
These people will never have the idea that this is an image of squares, it’s clearly about circular forms. The content, though not detailed, is actually pretty accurate. Now, not only our visitors with less capable browsers get a good description of the image, people who rely on assistive technology, like screen readers, will be able to imagine what this thing looks like too. And this is the reason why I love the web. It is so friendly! The web, if done right, is for everyone.
