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

Orchestrating Drupal + CiviCRM containers into a working site: describing the challenge

In my previous posts, I've provided my rationale for making use of Docker and the microservices model for a boutique-sized Drupal + CiviCRM hosting service. I've also described how to build and maintain images that could be used for the web server (micro) service part of such a service.

The other essential microservice for a Drupal + CiviCRM website is a database, and fortunately, that's reasonably standard. Here's a project that minimally tweaks the canonical Mariadb container by adding some small configuration bits: https://github.com/BlackflySolutions/mariadb

That leaves us now with the problem of "orchestration", i.e. how would you launch a collection of such containers that would serve a bunch of Drupal + CiviCRM sites. More interestingly, can we serve them in the real world, over time, in a way that is sustainable? i.e. handle code updates, OS updates, backups, monitoring, etc? Not to mention the various crons that need to run, and how about things like…

Building and maintaining Drupal + CiviCRM application containers

In my previous two posts, I provided some background into why I decided on using containers for a boutique Drupal + CiviCRM hosting platform, and why Docker and its micro-services approach is a good choice for building and maintaining containers.

Although I promised to talk about orchestration, that was getting ahead of the story - first I'm going to look at the challenge of keeping your application containers up-to-date with OS and application-level updates. There's a fair amount of work in that, but the tooling is mature and there is lots of good documentation.

A great place to start is to visit the official Drupal docker hub page. From there, you can pull a working Drupal code container, and it gets re-built frequently with all the OS and Drupal-code updates, so you just refresh your containers whenever you want (i.e. whenever a security release comes out, or more often to stay up-to-date).

A nice thing about that project is that it demonstrates a technique for maintaining …

IATS and CiviCRM

Update, Nov 2009: I've just discovered and fixed a bug I introduced in the 2.2 branch for the IATS plugin. The bug was introduced when i updated the API files from IATS and failed to notice that the legacy method for C$ one-time donations was no longer supported.
If you're using a version greater than or equal to 2.2.7, and are using IATS for C$, non-recurring donations, then you're affected.
To fix it edit the file : CRM/Core/Payment/IATS.php, and remove the line that looks like this:

$canDollar = ($params['currencyID'] == 'CAD'); //define currency type The full fix removes a conditional branch based on that value a little further on, but by removing this line, it'll never actually use that branch. Drop me a line if you have any questions.
Update, May 2009: This post is still getting quite a bit of traffic, which is great. Here are a few important things to note:
The IATS plugin code is in CiviCRM, you don't need to add any code.You do still …