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.
Cross-platform compatibility
This is what I (at the time of writing) test under:
- Linux
- 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
Graceful Degradation
- 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?
Structural Integrity
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.
Almost perfect?
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