The joys of web design.

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:

Firefox 2 & 3; Konqueror; Opera; Lynx
Windows Vista
Firefox 2 & 3; IE 7; Opera
Windows XP
Firefox 2 & 3; IE 6 & 7; Opera
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?

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 🙂