Skip to main content

Responsive design and colour in web development

I'm not a web designer. If you've worked with me before, you're probably tired of me saying that. Funnily enough, in high school I took art, and always considered myself artsy by inclination, if not vocation or personality.

On a recent project I ended up doing more design work that I'd planned, which happens. I learned about two new things from this process:

1. Responsive web design using Zen grids. It's kind of funny to be back using grids like the old table layout world of pre-2000. But it's now sane and zen grids is one way to keep up with the cool kids doing 'responsive design', which just means your site looks good on all kinds of devices, (yeah, just like html was supposed to by original design, grumble, grumble).

2. Mac colour vs. PC colour. I've know about the different experience of PC users vs. Mac users for a while, but have tried to ignore it (claiming, truthfully, that I am in fact colour blind, though not very). On one project, the designer delivered his mockups with pdfs and after I implemented them, discovered that all my colours were wrong, because he'd done his work on a Mac.

On this project, I was working with Anne-Marie doing some bare-knuckle colour tweaking and was really confused because she was loving a colour scheme that I thought was pretty ugly. After putting it down to my colour blindness getting worse, one day she phoned up telling me it WAS pretty ugly, just not on her Mac. Since it was late in the process, I did a little research one weekend and came up with a quick way of making the site colour css on a Mac different from the one on a PC (i.e. anything non-Mac). The way I did this was based on this page:

http://www.w3.org/TR/1998/REC-CSS2-19980512/colors.html#gamma-correction

What I now understand about colours and computers is this:

The way we define colours for CSS (i.e. an RGB triplet) is an abstraction - a point in a three dimensional space (0..255 in each dimension), which is then turned into a colour on our monitor. That's all nice and clean, and I remember from physics that colour is just a wavelength, so this all sounds pretty reasonable. But here's where it gets tricky: the mapping of that three dimensional space onto actual colours is based on old CRT monitor technology, basically converting each RGB value into a voltage for the corresponding phosphor colour (with some changes since the phospors aren't actually red green and blue). So we're mapping our colour space into a collection of colours that is defined by a electro-mechanical process, a process which can't actually produce all possible visible colours. Which is why it should and sometimes is called sRGB - i.e. there's no canonical universal logical map from RGB numbers to real colours, only a convention invented by Microsoft et al based on machines that are largely obsolete.

So Steve Jobs and his designers had a problem - they wanted to expand the available colours, but the sRGB standard wasn't actually able to show them, even if his machines could. Kind of like trying to play piano music on a bad cassette tape, it's just not possible because some frequencies can't be reproduced. The way they solved it was by keeping the RGB idea, but changing the way an RGB colour was presented on their machines, by taking those RGB values and increasing their "intensity" on display. Which is why a given website looks brighter and more intense on a Mac machine, even though most PCs are capable of displaying those values as well.

So the answer to my problem was: take the colours in my css file, and perform a simple mathematical operation (the "gamma" exponent) and resave those colours in the original css file, keeping the old ones in their own css file ("mac.css") that only gets loaded for mac machines (using some simple javascript in this case, though you could use other mechanisms I suppose).

You might think this surely must be re-inventing the wheel, since this problem has existed for some time. It might be, but I couldn't find that wheel anywhere. I suspect this is a problem that gets just wished away mostly, and mostly it doesn't seem to matter if you pick your colours well (Mac users are just used to a different experience). Maybe our colours on this site were just borderline enough that it did matter (what does borderline mean? I think it means close to the edge of the available colour space).

And of course, if you're mixing and matching css and png files as part of your design, you need to pay attention to a whole different issue of consistency which is what most of the discussion about mac/pc colour differences seems to be focussed on.

Comments welcome.




Popular posts from this blog

Confused by online payment processing? You're not alone.

In the old days during "polite" conversation, it was considered rude to talk about sex, politics, religion and money. You might think we're done with taboos, we're not (and I'll leave Steven Pinker to make the general argument about that, as he does so well in The Better Angels of Our Nature).

The taboo I'm wrestling with is about money - not how much you make, but about online payment processing, how it works, and what it costs. In this case, I think the taboo exists mainly because of the stakes at hand (i.e. lots of money) and the fact that most of those who are involved don't get much out of explaining how it really works - i.e. the more nuanced communications are overwhelmed by sales-driven messaging, and the nuanced stuff is either proprietary secrets or likely to get slapped down by the sales department.

In other words, if you want to really understand about online payment processing because you want to decide between one system and another, you'…

Me and varnish win against a DDOS attack.

This past month one of my servers experienced her first DDOS - a distributed denial of service attack. A denial of service attack (or DOS) just means an attempt to shut down an internet-based service by overwhelming it with requests. A simple DOS attack is usually relatively easy to deal with using the standard linux firewall called iptables.  The way iptables works is by filtering the traffic based on the incoming request source (i.e., the IP of the attacking machine). The attacking machine's IP can be added into your custom ip tables 'blacklist' to block all traffic from it, and it's quite scalable so the only thing that can be overwhelmed is your actual internet connection, which is hard to do.

The reason a distributed DOS is harder is because the attack is distributed from multiple machines. I first noticed an increase in my traffic about a day after it had started - it wasn't slowing down my machine, but it did show up as a spike in traffic. I quickly saw that…

drupal, engagement, mailing lists, email

I lived, worked and studied in Costa Rica from 1984 to 1989. Ostensibly, I was there to study Mathematics at the University, and indeed I graduated with an MSc. in Mathematics supervised by Ricardo Estrada (check that page, he even advertises me as one of his past students). And yes, I do have a nine page thesis that I wrote and defended in Spanish somewhere in my files, on a proof and extension of one of Ramanujan's theories. But mathematics is a pretty lonely endeavour, and what drew me back to Central America (after the first visit, which was more of an accident), was the life and politics. The time I lived there was extremely interesting (for me as an outsider, though also painful and tragic for it's inhabitants) because of the various wars that were largely fuelled by US regional hegemonic interests (of the usual corporate suspects and individuals) and neglect (of the politicians and public) - the Contra war in Nicaragua, the full-scale guerrilla wars in El Salvador and …