Rune Madsen

Product page features list

  • Save
Product page features list css html blu-ray dvd e-commerce uitableview definition list video game

1 Attachment

For product pages on I wanted to create a simple list with the features for a product.

Before redesigning the site I had developed and designed the iOS app where I used a UITableView to display this information. Luckily, I was able to use a definition list for the site, which perfectly translates the same list-style design from an iOS table view to the web.

The customer can quickly glance through the special features, such as whether a title has 7.1 surround, is 3D-compatible or which languages are available in the movie or game.

If a feature isn't available (or for example, the languages aren't yet known), this element simply doesn't get rendered. The order in which the features appear is always the same.

I have a attached a screenshot of the the full product page view and you can see it for yourself here:

Other products such as a PS3 game have a number of other features that need to be listed, including specific game features. Here's an example of a game product page:

keyboard shortcuts: L or F like