lime said:
This is my first go using a CSS only layout. After many versions (about 7 of
them) this is the final version that I would like critiqued.
http://www.limelightstudio.com.au/iss/html/
It's fairly well done from a visual perspective, especially since it's
your first go at a pure CSS layout.
* The light blue backgroud with the grey text does make it harder to
read. Try lightening the background and/or darkening the text colour.
* The Privacy Statement link needs to be a different color than the
"Last Updated ..." text. I hovered over Last Spdated, sice the colour
made it look like a link, then, since it wasn't, I didn't realise
Privacy Statement was until much later.
* Try adding more visual feedback when hovering over the navigation
list. eg. By changing the colour and/or background.
The headings also should not be written in all uppercase within the
markup. I've heard it causes some screen readers to speak all the
letters, rather than read them as words. Use Title Case Like This, and
then style them using text-transform: uppercase; I would also change
the footer to this, just to keep the links together:
_Privacy Statement_ | _Website Design by Limelight Design Studios_
Last updated: 13th November 2004
Make both of those links the same colour, but different from the Last
Updated line.
There are also some markup issues:
* Headings. There's no <h1> - <h6> elements in the entire document.
- Put the ISS logo within an <h1>
- Page title, "Welcome", in <h2>
- Then <h3> for the last two that you have in all uppercase.
* Navigation list: Use <ul> and <li> for each item.
* Remove most, if not all <br> elements, and replace them with more
semantic options. (Most will be replaced with correct <li> and <hn>
elements)
* There seems to be an excessive number of <div>s, and the main content
is incorrectly within <div id="pageTitle">, which should really be an
<h2> anyway.