Project Cerbera Realign (9th May 2007)
As I work with more designers and use more websites I start to pick up on elegant solutions to design issues. One of these is the use of a linked heading followed by a horizontal list of links to provide a category with several sections. This is a great idea for many reasons:
- Simple to mark up by using
<h2>,<ul>,<li>and<a>. - Simple to lay out using well-supported CSS properties.
- Can be repeated.
- Easy to scan-read through the headings.
- Each category has a strong visual association with its sections.
- Each heading effectively becomes a skip link anchor to get past the previous list.
- More compact vertically than regular bullet lists would be.
- Makes better use of the available horizontal space than a regular bullet list.
- Automatically “bulletproof” because the heading text and list items will expand to fit all content and will wrap to new lines if there isn’t enough horizontal space.
Because it has so much going for it, I’ve applied it to the following pages:
Currently, tutorial index for each game edition category just has an entry for each section it contains. This compact listing method could be used to put a list of tutorials under each category. This would let users see exactly what tutorials were in that category rather than having a lame summary.
The typography of the site has also changed a bit. The letter-spacing of headings has been reduced somewhat and better fallbacks have been specified for machines on which Lucida Sans isn’t present.
The paragraphs and lists are now narrower in the main content so the lines aren’t so long. The gap from the main text to the browser edges is now symmetrical, which seems to balance the pages aesthetically.