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

Varnish saves the day, in unexpectedly awesome ways.

Four and half years ago, I wrote a blog post about Varnish, a 'front-end proxy' for webservers. My best description of it then was as a protective bubble, analogous to how it's namesake is used to protect furniture. I've been using it happily ever since.

But last week, I got to really put Varnish through a test when the picture here, posted by Fair Vote Canada (one of my clients), went viral on Facebook. And Varnish saved the server and the client in ways I didn't even expect.

1. Throughput

Varnish prides itself on efficiently delivering http requests. As the picture went viral, the number of requests was up to about 1000 per minute, which Varnish had no trouble delivering - the load was still below 1, and I saw only a small increase in memory and disk usage. Of course, delivering a single file is exactly what Varnish does best.

2. Emergency!

Unfortunately, Varnish was not able to solve a more fundamental limitation, which was the 100Mb/s network connection. Becaus…

What to do in the age of Trump?

Well, that's the question of the day. If you're part of an organization that does advocacy work, rather than waiting to see what happens first, might as well get yourself ready, even if the details are sketchy still. Here's one opportunity that's ready for you now, message courtesy of Steve Anderson of OpenMedia.

OpenMedia, David Suzuki Foundation, SumOfUs and a range of other organizations are supporting a new shared set of civic engagement tools.

Vancity Community Foundation is providing some support to subsidize some of the cost of the tools to select values-aligned organizations that sign up before February 28th.

Interested? You can learn more or book a demo from here: http://tools.newmode.net/

Here's some live examples of the tools you can take a look at:

1. Click to Call: http://www.davidsuzuki.org/blogs/healthy-oceans-blog/2016/11/to-help-protect-canadas-oceans-weve-made-it-easy-to-call-your-mp/#newmode-embed-4-266

Check out this video of David Suzuki's d…

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…