The steadiness of colour

I will be teaching about colour in the coming weeks. One of the things I definitely want to discuss is the idea that you cannot be certain of how people will view your colours. Of course there are environmental differences: is the viewer standing in the sunshine, is it dark, are there reflections, is the room lit by light-bulbs, halogen or candles? Is the user colour blind? These factors are not unique to the web though, they also apply to paint, printed material and all other coloured things.

So what about the web?

Designprincipes voor het web

Dit weekend, tijdens het procrastineren, heb ik een webpagina gemaakt die elke keer een van de principes uit de collectie van Adactio toont. Ik hou van deze principes. Je kan je werk er aan toetsen, en bovendien zijn ze veelal bedacht door mensen die slimmer zijn dan ik. Het zijn ook prima punten om eens goed over na te denken. Zo heb ik altijd moeite met het eerste punt van de ten principles for good design van Dieter Rams. In dat punt staat dat goed design innovatief is. Hier ben ik het helemaal mee eens, of absoluut mee oneens, afhankelijk van de gebruikte definitie van innovatie.

Innovatie, mooi woord

Toegankelijkheid is design

Ik zat laatste te lunchen met een vriend. Hij was gevallen met de fiets en had zijn hand gebroken. Zijn hele arm zat in het gips. Eten ging op zich prima maar het draaien van spaghetti was wat lastig. En het bedienen van zijn computer ook. En dat is natuurlijk vervelend voor iemand die met computers werkt. Maar het is ook niet onmogelijk. Veel programma’s en websites zijn zo gemaakt dat ze ook met een handicap prima te bedienen zijn.

Best fijn, eigenlijk

Black should be black

Every now and then I hear designers say that black should not be black. That instead of using color: black; you should use something like color: #666;. I heard people defending this argument by saying that in real life black is never really black. The ink in a book? Not really black. A black t-shirt? Not really black. The colour of my phone? Not really black. So, we argue, since black things are not really black in real life, they shouldn’t be black on our screens.

Makes sense, right?

Techniek vs mensen

Een product design team, bijvoorbeeld een team dat nieuwe TV’s ontwerpt, bestaat van oudsher uit drie disciplines. Een interaction designer die nadenkt over wat de gebruiker met het ding moet kunnen doen. Een visual designer die nadenkt over hoe het ding er uit moet zien. En een developer die nadenkt over wat er allemaal mee mogelijk is, die onderzoekt waar de grenzen van de huidige techniek liggen. Een tijd geleden sprak ik eens met iemand uit het TV-design-team van Philips. Voor hem was het vanzelfsprekend dat deze drie disciplines samen aan een TV werkten. In de jaren tachtig wilden designers natuurlijk ook heel graag hele platte TV’s maken. En het zou ook heel eenvoudig zijn om prachtige prototypes te maken, van piepschuim ofzo. Maar hoe hard ze ook zouden willen, het was toendertijd gewoon technisch onmogelijk. Een TV had een beeldbuis en een beeldbuis was dik.

Maar websites zijn toch niet dik?

Paper sizes on the web

According to Bringhurst there are a few ratios that look fantastic. These ratios have been used for ages for things like sheets of paper and books, but you can also find them in architecture, paintings, sculptures and in nature. And even in music. These ratios look pleasant, they sound good, and they make sense in a mathematical way, so we should probably use them. So I wondered, can we create and use them on the web?

Can we?

Voor wie maak je eigenlijk een website?

Er liggen een aantal erg interessante design principes ten grondslag aan HTML, de taal waarmee websites gebouwd worden. Een van de mooiste vind ik de zogenaamde Priority of Constituencies, de volgorde van kiesdistricten. De vertaling is wellicht een beetje onduidelijk, maar in dit principe wordt er bepaald wiens mening zwaarder weegt als er een conflict optreedt tussen verschillende belanghebbenden. In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. De gebruiker heeft altijd gelijk. Als de gebruiker er niet toe doet, dan heeft de author gelijk. Dat zijn wij. De designers, de developers, de content editors, en iedereen die verder meewerkt aan onze websites. Als de mening van ons er niet toe doet dan hebben de implementors gelijk, de browser-bouwers. Je kan hier uit afleiden dat het de taak is van browser-bouwers om het zo eenvoudig en prettig mogelijk te maken voor mensen om onze creaties te gebruiken. Na de implementors zijn pas de specifiers aan de beurt. Dit zijn de mensen die de HTML specificatie schrijven. En pas als allerlaatste doet de theorie er toe. Soms worden er dus beslissingen genomen die voor sommige groepen nergens op slaan. Maar tóch zijn het de juiste beslissingen omdat ze nuttig zijn voor een groep die belangrijker is.

Dat is wat anders dan consensus, toch?

The ideal measure on the web

A while ago I created a tool to help you define the ideal length of line for text on the web. You can adjust a few variables, like font-family and language. When you slide the slider it shows you how many words there are on a line, or how many characters. You can now choose an ideal measure depending on the theory you like most (10 words or something between 45 and 75 characters). It turns out there’s a much easier way to define an ideal measure, according to Bringhurst.

Exciting, what is it?

How big is an em?

You can’t use the em as a unit in most pixel-editors. If we use these types of editors in our design process, this means that we have to calculate em-sizes from pixel-sizes. And if we do that, an em seems like a terribly complex unit. Pixels use the simple metric system, which is easy to use. We all know how to count from 1 to 10. If we calculate em-sizes from pixel-sizes we’re suddenly working with multiples of 16, instead of 10. Which is much harder.

But pixels are hard as well

The weird 62.5% antipattern

There’s always been a problem with using the em on the web. The core of this problem is that there is no option in Photoshop to use the em as a unit. That’s really the only reason we use pixels. We have to use them in Photoshop. This pixel-thinking has influenced our em-thinking. Many developers use calculators to turn pixel-values into em-values. And thus we turn a pixel-perfect photoshop template into a pixel-perfect, but fluid website. But turning pixels into ems is hard. They don’t really match. They result in crazy numbers. There is a very clever hack that tries to solve this problem. But, as with all hacks, it creates new, worse, problems.

What’s the trick?