I’ve a full and rich job: I write code; I deal with databases; I ponder the improbable; and I stick my oar (no, not my ORE!) in at various levels of discussion; and I create web pages…. which is todays wee rant.
Web page design is hard…. damn hard.
If you are designing a poster, or a building, or a car, or a box for biscuits, then the medium you are designing for is immutable: It has known dimensions; everything can be precisely placed relative to everything else; and there is a quantifiable margin of error in your measurements.
When designing for the web, NOTHING is fixed: You do not know the size of the canvas your design is rendered on; you don’t know the colour-range available; you don’t know the fonts available; and you don’t know what platform your customer is going to use to render your design
You need to balance the visual asthetics, structural integrity, cross-platform-compatibilty, and graceful degradation. Working in the public sector I cannot, ethically as well as quasi-legally, discriminate against people through bad design.
This is what I (at the time of writing) test under:
- Firefox 2 & 3; Konqueror; Opera; Lynx
- Windows Vista
- Firefox 2 & 3; IE 7; Opera
- Windows XP
- Firefox 2 & 3; IE 6 & 7; Opera
- Mac OSX
- Firefox 2 & 3; Safari; Opera
- What does the site look like with images turned off?
- What does the site look like with css turned off?
- What does the site look like if the user chooses to use a different font?
- What does the site look like if the user chooses to use a larger font size?
- Does the site work if the user chooses not to have their browser full-screen?
- FF3 & some other browsers now scale up images as well as text sizes: does the layout still work?
- Are you using colour to convey specific information?
This is things like:
- Does each form input have a matching label?
- Does each “set” of form inputs have a fieldset around them, and a legend for that set?
- Do you have an h1 before an h2, and an h2 before an h3?
- Are your menus lists, ‘cos that’s what they are, structurally speaking
- Is all your text text, not graphics?
- Does your (x)html pass validation?
- Does your css pass validation?
I LIKE validation: If I write a page with is technically correct (the (x)html and css both validate cleanly) and renders as the designer desires across all the major browsers, then when a user comes in with a “it’s broken for me” problem, the web design is not going to be the problem.
Some other tricks I use for accessibility:
- I have a hidden h1, at the top of the page, which states where the page is from and provides a general context.
- I have a hidden link, to jump straight to the main content of the page.
- I have hidden h2s at the top of the page header, the various menus, and the footer – which help define the context for the following text.
- I have all my menus as list items, styled as tabs or bars or blocks, or whatever the designer wants.
A mock-up page
Well, maybe not.
I’m sure that, given another few days to work on it I could improve some aspects of this page: The curved edge of the menu would be better aligned with the logo (but this has implications when font-sizes are changed); the text in the three large images across the bottom is graphic, and I believe text should be text; and the rounded corners on the submit button are too big.
But I’m pretty proud if it, anyway.
It may not be an exampler page, but it’s damn close 🙂