NB: This page is archived without styles. Go to our home page or read our blog.
A number of designers and developers have asked me for recommendations on laying out product pages using lists and CSS. So I decided to write a mini tutorial.
A number of designers and developers have asked me for recommendations on how to layout product range pages using semantic mark-up and CSS. So I decided to write a mini tutorial for our training manual and try it out here first. An Amazon style product presentation made from wholesome mark-up and free from unnecessary divs or classes.
Previously, I've been using a combination of headers, paragraphs and unordered lists within a collection of divs for Karova Stores. Then, back in December, Dan Cederholm ran a SimpleQuiz on multi-paragraph list items in which it was suggested that paragraphs and lists that are nested inside definition lists were both valid and semantic. Russ Weekley also posted a killer article on definition lists over at Max Design. In it, Russ plays out scenarios where a combination of definition lists and CSS produce powerful results, but none of his examples touched on e-commerce.
In a real situation, the content of a product range page will vary greatly from store to store. By adding a little CSS, we can create a wide variety of different visual layouts.
First I'll divide the definition list into Amazon's three logical information groups;
<!-- Book title, author and product image -->
<dl> <dt><img src="images/e-comm_zeldman.jpg" alt="Designing with Web Standards by Jeffrey Zeldman"></dt> <dt><a href="#">Designing with Web Standards</a>></dt> <dt><span>Jeffrey Zeldman</span></dt> <!-- General product information including prices --> <dd> <ul> <li>Dispatched within 24 hours</li> <li>New Riders</li> <li>Paperback | June 2003</li> </ul> <ul> <li><span>List Price</span>: ’27.50</li> <li><span>Our Price</span>: ’19.25</li> <li><span>You Save</span>: ’8.25 (30%)</li> <li><a href="#">Used and new</a> from ’14.83</li> </ul> <ul> <li><span><abbr title="Average">Avg</abbr> customer review: 5 stars</span></li> <li><a href="#">Add to basket</a></li> </ul> </dd> <!-- Description for the publisher's notes --> <dt>Book description</dt> <dd>You code. And code. And code. You build only to rebuild. You focus on making your site compatible with almost every browser or wireless device ever put out there. Then along comes a new device or a new browser, and you start all over again. You can get off the merry-go-round. It's time to stop.</dd>
<dd>More information on <a href="#">Designing with Web Standards</a> by <a href="#">Jeffrey Zeldman</a></dd> </dl>
I'll also add a unique id to the list (this will be dynamically generated through the application)
<dl id="pr00000">
Then a single class to style the product image.
<dt class="pr-img"><img src="images/e-comm_zeldman.jpg" alt="Designing with Web Standards by Jeffrey Zeldman"></dt>
And several spans within the nested unordered lists. (I prefer to use neutral spans rather than presentational strong tags.)
<li><span>List Price</span>: ’27.50</li>
I'll start on an Amazon style presentation by defining the overall width of the definition list which I'll match to the width of the content area.
dl {
width : 770px; /* width of the wrapper */
margin : 0;
padding : 0;
}
Followed by defining a standard width for each definition title. In this example I am going to also float each definition title to the right.
dt {
float : right;
width : 670px;
margin : 0;
padding : 0;
padding-top : 1em;
font-weight : bold;
}
As I want my thumbnail product image to sit along side the name of the book (un-original I know), I'll float that particular title to the left and give a width to match the image, plus a few pixels white space.
dt.pr-img { /* thumbnail image */
float : left;
width : 100px
}
CSS for the book title and author name is straight-forward.
dt a {
font-size : 120%;
}
dt span a { /* author name */
font-weight : normal;
font-size : 100%;
}
As I would like the lists of features to line up with the left edge of the book title, I'll give the definition description a width to match the definition title and float them right.
dd {
float : right;
width : 670px; /* width of the list minus thumbnail image */
margin : 0;
margin-top : 0.5em;
padding : 0;
}
And each nested unordered list will also be given a specific width and floated left inside the definition description. A small amount of right margin adds some attractive white space.
dd ul {
float : left;
width : 200px; /* width adjusted for three column example */
margin : 0 10px 0 0;
padding : 0;
list-style-type : none;
}
dd ul li {
margin : 0;
padding : 0;
list-style-type : none;
}
Finally those extra spans. In situations like this I prefer to use neutral <spans> rather than more common, presentational mark-up like <strong>.
dd ul li span { /* neutral rather than presentational mark-up */
font-weight : bold;
}
And there we have it. An Amazon style product presentation made from wholesome mark-up and free from unnecessary divs or classes. And just for the hell of it, I also tried replicating Barnes and Noble and Tesco product presentation styles too.
I hope that you found this useful.
#1 On June 10, 2004 10:51 AM Phil Baines said:
Very good Andy. It is always nice to see our techniques being used in 'real world' examples, rather than web development sites.
I do think that some times we tend to forget that these techniques need to lend themselves to real life development like this. Thanks for the info. Lets see if Amazon change their markup now then! No such luck I think.
Good for your system too. Not only will it be easier for your clients, but it will be easier for you to maintain if needed.
#2 On June 10, 2004 12:22 PM Jamie said:
Really useful Andy, I'm always trying to get my head round the usage of definition lists.
If you were displaying a number of products, would you keep them all in the same definition list, or open and close new ones each time?
For example:
[dl]
[dt]Book 1 image[/dt]
[dt]Book 1 Title[/dt]
[dd]Book 1 Desc[/dd]
[dt]Book 2 image[/dt]
[dt]Book 2 Title[/dt]
[dd]Book 2 Desc[/dd]
[/dt]Or
[dl]
[dt]Book 1 image[/dt]
[dt]Book 1 Title[/dt]
[dd]Book 1 Desc[/dd]
[/dl]
[dl]
[dt]Book 2 image[/dt]
[dt]Book 2 Title[/dt]
[dd]Book 2 Desc[/dd]
[/dl]
#3 On June 10, 2004 12:36 PM Jonathan Snook said:
I'm still having trouble with the semantic relevance of using a definition list. Sidesh0w [https://sidesh0w.com/weblog/2004/06/02/several_mornings_after/] recently used them in his redesign but in a way that didn't seem semantic to me. Ethan argued that the W3C eludes to other practical purposes of the DL and that is something that you could certainly argue here.
How about using a table? I'm going to look into this further but I think a table could be used to create more relevance between the elements. Then use the display property in CSS to accomplish the fun stuff.
#4 On June 10, 2004 01:08 PM Malarkey said:
Jamie
Debate over the precise semantics of definition lists (if indeed there are any) will continue to rumble on.
My approach advocates a solution like your second option and takes a semantic approach similiar to Russ's image gallery example at https://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm
#5 On June 10, 2004 04:30 PM Jonathan Snook said:
To followup, I've put together an example of how it data could also be set up as a table and styled accordingly. https://www.snook.ca/archives/000166.html
It's only failing is IE. I'll leave it to the masses to decide. :)
#6 On June 14, 2004 02:35 PM Malarkey said:
Interesting solution there Jonathon and your mark-up does makes sense as tabular data. It's a real shame that IE's presentation lets you down.
I think that both these examples reaffirm that on occassion, there is no 'right' way of doing something. And where semantics are concerned, everyone will have his/her opinion.
#7 On June 15, 2004 12:06 PM Richard Rutter said:
Andy - great use of definition list here. I'm a big fan of pushing DLs beyond a dictionary-style list of terms and definitions as their simple format makes coding the HTML a nice easy job. I even advocate using them for simple forms https://www.clagnut.com/blog/241
Jamie's question regarding displaying the information for more than one book, seemed easy to answer at first: I immediately thought just keep the list going. But then I realised each book has two DT/DD pairs, the implication being that each book should have its own DL, probably with each DL inside a list item.
Yes, a fair few nested lists but the mark-up would still be pretty lean and would certainly be meaningful (semantic shemantic) with plenty of hooks for your CSS.