

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

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

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

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

~~~
mootothemax
_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.

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

------
dpham
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 <strong> or <em> would be a better option.

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

~~~
redmaniack
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 <b> versus <strong>, this could be a long discussion here :).
I think <b> just fits in this case as I don't want to add any importance from
a content or SEO perspective.

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

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

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

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

~~~
redmaniack
It's fixed now, 10x!

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

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

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

