Designing an effective pricing table | Hacker News Reader

Designing an effective pricing table

red-team-design.com

50 pointsredmaniack16 comments

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.

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...

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

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.

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

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.

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.

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.

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

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.

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...

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

It's fixed now, 10x!

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

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

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

Reply on news.ycombinator.com