5 ms·

Designing an effective pricing table

50 points by redmaniack 14y ago

nathancahill 14y 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 http://i.imgur.com/oTnfU.png
- redmaniack 14y ago
  It's fixed now, 10x!
ritonlajoie 14y ago
well, I think that's why I'm afraid trying to learn CSS ;(
redmaniack 14y 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 14y 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.
- redmaniack 14y 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.
 - lazerwalker 14y 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 14y ago
 Couldn't it also be thought of as a list? I'd usually implement something like this as an unordered list.
rcgs 14y ago
There was no discussion of design theory in this article. A better title would be "Marking up a pricing table".
mootothemax 14y 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&categories=css&sidebar_redirect=true http://codecanyon.net/search?utf8=%E2%9C%93&term=pricing...
- Domenic_S 14y ago
  Holy cow, did that guy really sell $8k worth of css? (the first pricing table)
  - mootothemax 14y 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 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 14y ago
Ill stick to just leaving a comment on the content of the article. Great tips, thanks!
jhaile 14y 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 14y ago
Where is the A/B testing data to support the claims of effectiveness?
lazerwalker 14y 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.

50 points by redmaniack 14y 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 http://i.imgur.com/oTnfU.png

redmaniack 14y ago
It's fixed now, 10x!

ritonlajoie 14y ago

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

redmaniack 14y 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 14y 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.

redmaniack 14y 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.
- lazerwalker 14y 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 14y ago
Couldn't it also be thought of as a list? I'd usually implement something like this as an unordered list.

rcgs 14y ago

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

mootothemax 14y 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&categories=css&sidebar_redirect=true http://codecanyon.net/search?utf8=%E2%9C%93&term=pricing...

Domenic_S 14y ago
Holy cow, did that guy really sell $8k worth of css? (the first pricing table)
- mootothemax 14y 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 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 14y ago

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

jhaile 14y 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 14y ago

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

lazerwalker 14y 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.