CSS Zen Garden and Commerce Sites

If you’ve ever had a discussion with me you know how strongly I advocate web pages being standards compliant and use CSS-P. It’s not because I’m some HTML drill sergeant, it’s just there’s no reason, other than pure laziness, to not design a CSS-P website. From a maintenance standpoint if you do it correctly and completely isolate all of your content from context. That way changing the design in radical ways only requires the changing one file. From an SEO standpoint getting the main body content first, is a good thing. Lastly it’s just plain easier to maintain and manage.

While I used to be pretty handy with my a pencil and paper, those days are long gone, and I do far to much left brain thinking nowadays. So when I see some visually stunning websites, I’m in awe and maybe a teeny bit jealous. I’ve been a big fan of CSS Zen Garden for a long time. Things like this, this, this, this, and especially this just leave me feeling woefully inadequate. When I was at the bookstore last night, and I saw The Zen of CSS Design : Visual Enlightenment for the Web by the people who run CSS Zen Garden, I had to buy it.

I am reading the book and one of the things I’m noticing is a lot of the designs have a very visually strong masthead. In some cases they are so large they take up a disproportionate amount of screen real estate on an 800 x 600 monitor. Yes I know as of 2005 only about 30% of people have a screen resolution of 800 (w3 Schools browser stats), but here’s the thing, lots of people with resolutions over 1200 don’t surf with their windows at full size. So on my websites I try to put all of the important information above the fold, in the 800 x 600 screen.

For example if I were working on a PPC landing page, it would include the following all above the fold:

  • Headline with the Keyword(s)
  • Bold sub headline with the keyword(s)
  • Product or hero shot
  • Call to action or buy button

Yes there are other elements, but those are the basics. Now when I build a website the same rules apply but I will add the following:

  • Masthead with logo or site name for branding
  • Navigation to major site areas
  • Search box if needed

If you were to use a large masthead, in my opinion you would be doing two things, lowering the amount of free space for your product, and diverting the shoppers attention from the product and “buy button”. If you read any of the eyetracking studies you know people aren’t really reading, they are scanning. They will be looking for headlines, sub headlines, bulleted lists, scanable text, and images, with cues that confirm they are following the correct information scent or have arrived at the desired destination. In my opinion a strong bold masthead image really doesn’t help the shopper. They may make the designer feel good, because hey who doesn’t like to produce stunning artwork. They may even make the CEO feel good because it gives the website some “sizzle”. However when it comes down to the bottom line, are bold powerful graphics improving the websites ROI? Does anyone say “wow this website is so beautiful I have to buy that item”, or are they just glad they found what they were looking for?

Don’t get me wrong I think plain text websites are … well boring, and a website does have to meet the minimum expectations of a professional appearance. However minimalist or spartan designs is much more appealing to me. Here are some examples:

Crate and Barrel
Home Depot
Restoration Hardware
Ok all of them are capped for an 800 width display, but that’s another discussion. They all have most of the important information above the fold. So what about all those beautiful designs, what do we do with them? Well they could go on the homepage, and just scale down for the secondary pages, but that doesn’t always work. They could go on side navigation, but again that doesn’t always work either. I don’t think there is one answer, as every project is different, with different goals and needs. However one thing is certain, the goal of the shopper completing the purchase, should always come first.

Some guideline I have are:

Your website isn’t a museum or art gallery.
Don’t put beautiful artwork on your commerce website for it’s own sake.
Use your artwork to compliment the product you are selling, not distract from it
The goals of the shopper, are more important than the goals or the ego of the creative team and advertising department.

GraywolfSEO.com runs on the Genesis Framework

Genesis Framework

Genesis lets you to quickly and easily build amazing websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.
It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

tla starter kit


  1. Text Link Ads - New customers can get $100 in free text links.
  2. BOTW.org - Get a premier listing in the internet's oldest directory.
  3. Need an SEO Audit for your website, look at my SEO Consulting Services
  4. TigerTech - Great Web Hosting service at a great price.
More in npb, npp, ntt, SEO
Google Patent Analysis

I've spent a good deal of time of the past two days analyzing the Google patent. Now part of me...

Google Sandbox Patent?

I picked this up from Rustybrick who got it from SearchEngineWatch. Looks interesting the whole thing is here. [0077] The...

Landing Pages Teleseminar

So I listened to a teleseminar today from Kowabunga about landing pages. It was about an hour and had companion...