Best method of displaying a pricelist

Get Started
1

As part of my girlfriends website:

http://bluebelle-beauty.com

she wants her treatment menu/pricelist to be displayed on the website.

What would you recommend as the best way of showing this to allow for search engine recognition also?

I was thinking of adding it as a pdf file? Would you do that or just have the treatments listed?

2

Hi chadste.
Why not use tables ?, that’s what they are for.
An ordered or unordered list should be a possibility too.
pdf-docs can’t be read by search engines, that’s sure.

noRiddle

3

Thanks no riddle.

I didnt think that the search engine would find the pdf much use!

I thought it would be the easiest way of displaying the pricelist and providing visitors with an easy way of downloading it.

Failing that I was thinking something along the lines of this:

http://www.koko-beauty.co.uk/treatment-menu/massage-tan.html

4

That should be pretty straightforward to create in HTML. No tables required.
If I were you I’d go for HTML because

  1. It’s one less click away; people don’t have to download and open the pdf (which takes time, and people on the web are really impatient!) but can just the view the information on the page itself

  2. Some internet devices don’t have a way to open and view pdf files (think mobile phones)

Of course you could still offer the pdf as an alternative if you like, but I wouldn’t make it the primary and only source.

5

I do think a table would be a lot more user friendly, and it’d have the correct HTML markup.

So, something like this:

#pricelist {
	background: #ffc;
	border-collapse: collapse;
}

#pricelist caption {
	padding: 1em 0;
	text-align: left;
}

#pricelist thead {
	background: #ccc;
}

#pricelist tfoot {
	background: #c00;
	color: #fff;
}

#pricelist th,
#pricelist td {
	padding:1em;
	text-align: left;
}

<table summary="This list describes our entire catalogue of products" id="pricelist">
	<caption>Product list</caption>
	<thead>
		<tr>
			<th>Item</th>
			<th>Description</th>
			<th>Price</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="3">Some footer information</td>
		</tr>	
	</tfoot>
	<tbody>
		<tr>
			<td>Item name</td>
			<td>Item description</td>
			<td>Item price</td>
		</tr>
	</tbody>
</table>
6

Completely agree with kohoutek.
The page looks quite nice like that now but it is not user friendly, hard to read, or better, to get an impression of the prices at one glimps.
Tables are nowadays considered to be a bad approach to build and design web pages but
they serve perfectly for purposes like yours, chadste.

If you don’t want to use tables (why not by the way ?)
you can do it with a definition list which would be a lot more CSS coding effort though.

(As you can see in kohoutek’s example,
with tables you don’t have to show borders and you are able to style every single row and / or cell, what else do you want ?)

noRiddle

7

It depends upon how complex the data is and how you are trying to present it in the first place. Obviously at a bare minimum you need a HTML version since it will be basically more accessible and you’ll want visitors to be able to quickly access the data.

At the moment that list is a little spartan so would be marked up a list most likely as it only list 3 objects under a generic single heading.

If you were doing something more complex which involved a comparison then Maleika’s example of using a table would be a good starting point.

8

If im completely honest Id never considered using a table on my website. I wasnt of the impression that it would be the best way of displaying the price and treatment under a heading. That said, Im more than willing to give it a go if it will improve the site.

Im still completely new to web design - as you will see from my previous posts but I am slowly getting an idea!!

9

Sorry, but that’s totally wrong. Google can and does read and index PDF documents.

Don’t believe me? Try this: http://www.google.co.uk/search?q=filetype:pdf
Google finds 511 million PDF documents in its index.

10

I only just figured out how to do this today but breaking the prices down into different areas like hair and nails and using javascript to hide and show them looks pretty professional IMO.

I did it here: http://workclaims.mediaxombie.com/compensation.php

You can obviously make it sleeker, in firefox its very jittery for some reason but looking at that KOKO site there just seemed to be TOO MUCH information presented to you.

Just use <noscript> in case a user has Javascript turned off.