Designing an effective pricing table

http://www.red-team-design.com/designing-an-effective-pricing-table

by redmaniack • 14 years ago

50 16 14 years ago

The enterprise column does not appear to be aligned correctly (Firefox 10.0, Mac OSX 10.6.8). http://i.imgur.com/oTnfU.png

redmaniack3• 14 years ago

It's fixed now, 10x!

ritonlajoie• 14 years ago

well, I think that's why I'm afraid trying to learn CSS ;(

redmaniack3• 14 years ago

Hey, thanks for the heads up. I'm updating it now.

There's no problem with the CSS, I just forgot to decrease font size for the featuress list.

Note that Enterprise "100GB Monthly Bandwidth" is rendered on two rows...

dpham• 14 years ago

sorry if I sound like a markup nazi, but... the pricing table contains tabular with headers and should be treated as such. The columns should be table cells and not divs (all a sudden you no longer have to provide a width on the entire container and it could stretch to fit and used in any location). The header-class container should either be a th, or if you opt for a non-table element, then an actual header tag would be appropriate. Maybe an h6? The bold tag was a poor choice; either or would be a better option.

As far as reusability goes, the id="pricing-table" should really have been a class.

redmaniack3• 14 years ago

Hey, I appreciate your thoughts.

Now, to "defend" myself...

I'm afraid that using a regular table wouldn't allowed me to create this pricing table as it looks now. Although this is called a "pricing table", I think using a table isn't recommended in this case as it is quite restrictive.

Also, I avoided using HTML5 elements like "header" because I didn't wanted to include an extra HTML5 shim (for older browsers) dependency.

Regarding using versus , this could be a long discussion here :). I think just fits in this case as I don't want to add any importance from a content or SEO perspective.

lazerwalker2• 14 years ago

As an argument for using HTML5 elements like 'header', the only older browsers that don't support them are IE 6/7/8, and the shim is < 5 lines of JS you can easily throw in a IE conditional comment block.

estel• 14 years ago

Couldn't it also be thought of as a list? I'd usually implement something like this as an unordered list.

rcgs• 14 years ago

There was no discussion of design theory in this article. A better title would be "Marking up a pricing table".

mootothemax2• 14 years ago

If you just need to plug in a CSS pricing table to your site and, like me, have the web design talent of a dead fish, CodeCanyon can be very useful, e.g.:

http://codecanyon.net/search?utf8=%E2%9C%93&term=pricing...

Domenic_S• 14 years ago

Holy cow, did that guy really sell $8k worth of css? (the first pricing table)

mootothemax2• 14 years ago

Holy cow, did that guy really sell $8k worth of css? (the first pricing table)

Less some quite hefty fees:

http://themeforest.net/make_money/payment_rates

If you create stuff that people like me need, though, I can totally understand how you could do well. There are so many small little bits of web design that I need help with, things like this for $8 are an unbelievable steal.

Veus• 14 years ago

Ill stick to just leaving a comment on the content of the article. Great tips, thanks!

jhaile• 14 years ago

I think this article should be titled "How to create a basic pricing table with HTML and CSS" This isn't an effective pricing table. There are plenty of articles out there about how to make a pricing table effective and this doesn't follow most of the rules. Of course - to really determine if a pricing table is effective, you need to test it and do some multivariate testing. None of which the article talks about.

huhtenberg• 14 years ago

Where is the A/B testing data to support the claims of effectiveness?

lazerwalker2• 14 years ago

The article is interesting enough (it never occurred to me to create a 'curved drop shadow' effect solely via CSS with transforms -- slick!), but it's very poorly named. It's not about designing a pricing table, it's about implementing a pricing table in HTML/CSS based on the author's design, with zero discussion of any of the factors that went into the design.

Designing an effective pricing table

Related Stories