Designing an effective pricing table(red-team-design.com)

50 pointsby redmaniack14 tahun yang lalu16 comments

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

16 comments

jhaile14 tahun yang lalu

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.

mootothemax14 tahun yang lalu

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_S14 tahun yang lalu

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

mootothemax14 tahun yang lalu

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.

rcgs14 tahun yang lalu

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

dpham14 tahun yang lalu

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.

redmaniack14 tahun yang lalu

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.

lazerwalker14 tahun yang lalu

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.

estel14 tahun yang lalu

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

lazerwalker14 tahun yang lalu

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.

redmaniack14 tahun yang lalu

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

nathancahill14 tahun yang lalu

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

redmaniack14 tahun yang lalu

It's fixed now, 10x!

Veus14 tahun yang lalu

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

huhtenberg14 tahun yang lalu

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

ritonlajoie14 tahun yang lalu

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