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.
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.