E-commerce layout with definition lists
With work being carried out at Jadu on a new and frankly exciting e-commerce project, I’ve been thinking about better ways to layout the products pages using semantic mark-up.
The use of definition lists came to mind whilst reading CSS Mastery, as the amount of product information or descriptions of a product seemed to almost decree their use. They are under used (by myself) so here are a few quick references.
- Max design looks at the basic use of the dl in Definition lists - misused or misunderstood?
- Malarkey looks directly at the use of definition lists in product layout in E-commerce definition lists, which is a bit handy
- Scott McDaniel gives good writing in Manipulating Definition Lists for Fun and Profit
The definition list can also be used for adverts and news stories or anything that uses a summary, an image and a title.
- Malarkey again describes this in CSS: Hold the front page
- Community MX (!) discuss it in Create a Teaser Thumbnail List Using CSS
Reflecting on the definition list, it’s easy to see how they can be misused, like the table, they can be pushed and sqeezed into holes they just weren’t meant to fit. Used wisely, they do improve semantics and increase the amount of hooks for CSS layout and presentation.
2 comments
1. ScottAugust 13th, 2006 at 4:50 pm
Hi Lee,
Thanks for the reference to the Fun & Profit article. I knew Andy put it in his CSS Mastery book, but I still haven’t had a look yet. Need to pick up a copy. By the way it’s Scott ‘McDaniel’ not ‘Daniel,’ but thanks anyways.
2. leeAugust 14th, 2006 at 11:09 am
I reckon for saving Andy from having to write another chapter, you should of been sent a copy of CSS Mastery from the man himself!
Err, and yes. Very sorry about getting your name wrong, Scott. It was very early and I was not quite switched on. Corrected it is.