Redesign: From green to white, with a bit of red
29 February 2020 | 8th Edition
Since the dawn of time (almost) we have used a Dark Angels inspired green for the background of this website. But that has now transitioned to a cleaner white.
One of the redesign goals was to make this place more accessible. And one way of aiding that is to make the text as clear as possible. This can certainly be achieved with a dark background — but the thinking here is that using a white canvas would also allow more flexibility to incorporate different types of content without the need to customise it (too much) to work on a green background. This changeover is ongoing but has not been without its problems.
Legacy images
In the Librarium section for instance, the banners were originally produced incorporating the background green as part of the image, or, they had transparent backgrounds but with a green matte (an anti-aliased fringe). Either way both are now not ideal for use on a white background. In time these will need to be changed at source — but in the meantime it's a fudge — they will sit within a green panel. Not ideal but a quick option for now.
This is actually a good case in point for being more forward-thinking when it comes to content creation. Foreseeing how things might look in 5 or 10 years time is hard. Trying to make standalone content design and platform-agnostic is really the goal I think.
The headings challenge
Another interesting issue thrown up was the hierarchy of headings being used. An analysis revealed that quite a few styles were being used incorrectly. For instance the H3 and H4 headings were being used interchangeably over time from page to page yet performing the same function. So the task has not merely been switching over a css template style from one to another, but also taking the time to go through each page and properly look at content and how it has been divided up.
I also felt that in some cases too many heading levels were being used on one page: so an H1, H2s and various H3s and H4s. Too many. So a rationalisation has taken place resulting in the dropping of H2s in pretty much all circumstances. H3 headings now take on the role of general content dividers with H4s becoming their subdivisions. H2s will be solely used on pages where there is an index to divide up the content — the H2s effectively becoming top-level 'chapter headings' if you like. Strictly speaking, this is against general advice not to skip H types on a web page in case it causes confusion to people using screenreaders. But this rationalisation will make writing, editing and page-creation simpler, keeping page designs more consistent. We'll see how it goes.
Here is the family of headings as they currently stand:
h1 example
h2 example
h3 example
h4 example
h5 example
h6 example
Hierarchy has been achieved through a combination of size, colour and the use of top and bottom margins. I don't generally like adding top marging to elements in web design but in some instances it is simply the best method of getting space where you need it.
There is still a bit of work to do around getting the size relationships working properly at all screens from desktop to mobile. But this something can be tweaked in the background.
Ends
