Nov 2003

Notes on our latest site

This is as much documentation for me as anything else. Mike and I are practically finished our latest site for a kitesurfing school on the Isle of Tiree which is part of the Inner Hebrides off the west coast. The task was to create a clean, good looking static site that is both usable and accessible in a fairly short time (we weren’t getting paid very much for this so wanted to get it done pronto, hence some of the wee errors) – I think we’ve succeeded, but I’m bound to say that, nobody likes to admit defeat. There are still a few tweaks that I want to make, and I’m not 100% convinced about some of the accessibility implementation, but I’m still learning about that.

If you don’t like the graphics, blame Mike. If you don’t like the coding, blame me. If you don’t like the general layout and design, blame us both and we’ll probably blame you. The site is (hopefully) semantically rich XHTML and CSS. The most interesting bit of markup (don’t be surprised if it’s not that interesting) is on the contact page where I used a couple of definition lists to markup the contact info. I hadn’t used definition lists before and I think it’s a pretty fair use of them. I think I’ll continue to use them like that until I see a convincing argument to the contrary. Anyway, nobody likes to read about success so… onto the bugs!

1. The main navigation menu is an unordered list of links. In an ideal world the items would simply be displayed inline and it would be a lovely horizontal list. Due to IE5.0/pc not being able to cope with margin and padding of inline elements I needed to declare them as block elements and float them to the right. This worked well but highlighted a IE5/Mac float bug which displayed the list vertically. The CSS was lovely and hack free until this :(. A IE5/Mac comment parsing hack was used so I could display the menu items as inline. Things weren’t lining up so I used that hack to also remove the fadey line leaving it usable but not over pretty.

2. The second hack came into play when I removed an unnecessary DIV and put the lower header image as a background to the H1 tag. IE5.0/5.5/pc couldn’t cope with adding up the padding and height so I needed to use a box-model hack.

3. The page is set to 94% of the viewport and has a maximum width of 75em (75 times the standard font height) (seems like a decent line length as most lines are cut short by either a photo or a table). This means the actual width of the page will vary as the text is resized. IE/pc doesn’t understand max-width so is always 94% of the viewport. There is a way to set max-width using the proprietry IE feature expression() but it isn’t valid CSS so I decided against it.

4. IE/pc can’t handle alpha-transparency in PNGs so Mike had to rustle up a nifty GIF in it’s place. PNG would have been ideal, buy hey…

5. At the bottom left of each page there is another list (this one needed no padding or margins so could be displayed inline) whose contents are separated with a full-stop which is inserted using the :after pseudo class in CSS. IE/pc (all versions) and possibly IE/Mac doesn’t recognise this so the full-stops are missing. Works fine in real browsers.

6. The “Skip development list” link at the start of the footer list is being a pain in the arse. In the top menu I’ve hidden the accesskey link by setting it’s width and height to zero and setting overflow:hidden;. For now I’ve made the link disappear by going for display:none; but this isn’t an acceptable solution as some screen readers don’t read items like this! EDIT: Donald alerted me to an obvious change (putting the menu above the footer) which meant I could get rid of this link.

7. The footer is, to put it nicely, a bit
screwed in IE/Mac. I really should try to fix this (I haven’t tried properly), but it’s a slow process using Mike as a remote tester. Maybe sometime.


  1. Site looks good, but a few changes that might make things better.

    I think it would be more usable to put the menu list at the bottom of the content, but above the bottom footer.
    I think that they would make more sense there, ie if you were using a screen reader you would get the title, page content, and then links to other pages.
    therefore there would be no need for wither of the “skip navigation” links, simplifies the code and solves one of you’re bugs at the same time.

    On the prices table, the [td]1 day course[/td] should probably be [th]1 day course[/th], as semantically they are row headings. For that matter, you may wish to use [caption align=top”]Course Prices[/caption], as that is possibly more correct. :)

    On the menu links, personally, I think a small amount (1-2px) of padding would look better :/

    ANyway, this is nitpicking on a pretty damn cool site :D

  2. Hi Donald.

    Good call with the menu, it should definitely be below the footer. Think the skip link on the main menu bar should stay though, even if just to keep the accesskey, which brings me onto the bit I’m confused about – what’s the best way to let users know about any accesskeys you’ve got available on the site? Is it best just to have a page with the accessibility policy on it?

  3. About the table headers:

    While they are row headers I thought that they are also data which is why I marked them up as [td]s. Now that you’ve mentioned it, it’s a tricky one to call. If they are both headers and data they should be marked up as [td] IMO, but what are they?

    Hmmm, don’t suppose it matters really.

  4. Nice CSS mate, hope the recovery is going well, all the best,
    Cris, Glasgow Scotland

  5. Cheers Cris :)

    Starting to get there with the back, it just takes ages I think. Hope you’ve been out kiting loads.

Leave a comment

You must be logged in to post a comment.