When done well, blogging can be a great way to develop a stronger rapport with your customers. Many retailers also start blogging with intentions to bolster their search engine rankings and gather links from other blogs or websites. Good blogs will lure readers back again and again with worthy content and may turn a browser into a buyer or a one-time customer into a lifetime fan.

I recently spent a little time checking out the blogging efforts of some of the largest online retailers to see how they approached the design and layout of their company’s blog (or network of blogs). While blogging can help build a company’s credibility and might spread information about products to a wider audience, blogging isn’t for everyone and some of the biggest ecommerce businesses don’t run their own blogs. This is a look at a few of the blogs from those who do.

Amazon Inc.

(Internet Retailer Rank of 1 for 2009)

Omnivoracious’ Amazon Blog

Omnivoracious is a blog about books written by a handful of people who love to read.

Platform: Custom / Typepad (blogs on separate domain are Typepad, blogs within Amazon are not)
Domain: Separate Domain and a duplicate copy sits within the Amazon domain.
First Post: 2007
Columns: 2
Layout: Content in the middle, information on the right
Features: The right column includes a link to the RSS feed, an “about” section, a blog roll, and a looong list of topics covered in the blog. Confusingly, the blog exists in two locations (at omnivoracious.com and at amazon.com) with slightly different information in the right hand column between the two. The version within the main Amazon site is more difficult to navigate through archives.

Amazon Daily

Amazon Daily aggregates the other Amazon blogs. It sits within the Amazon domain.

Platform: Custom
Columns: 2
Layout: Content in the middle, information on the right
Features: The right column includes a link to the RSS feed, a link to sign in, a calendar of posts by date, and a list of topics.  Missing is a search of blog articles.

Amazon also maintains a number of other blogs following the above formats.  Blogs on separate domains include Chordstrike, Al Dente Blog, Car Lust Blog, End User Blog, Armchair Commentary, Wag Reflex, and Toy Whimsey.  Blogs within the Amazon main domain include Baby Babble Blog, Green Scene, and Amazon Game Room.

Dell Inc.

(Internet Retailer Rank 3 for 2009)

Direct2Dell – Dell Community

The community of Dell blogs pulls together articles and posts about Dell products, technology, and aspects of Dell as a company.

Platform: CommunityServer 2008.5 SP2
Domain: Subdomain
First Post: July 2006
Columns: 3
Layout: Unlike most of the blogs seen here, this design places the components and blog features in a left column with the main article content in the middle.
Features: List of blogs, languages, and post categories in the left column.  RSS and email notifications, blog roll, and archives are in the right column.

Apple Inc.

(Internet Retailer Rank 5 for 2009)

Apple Hot News

Though hard to call a real blog, the Apple Hot News page aggregates articles and recent pages, and offers subscription via RSS.

Platform: Custom
Domain: Within main site
Columns: 2
Layout: Content in the middle, components in the right column.
Features: The page holds the typical Apple store top nav, presents snippets of content articles down the middle, and offers links to top TV shows, tunes, trailers, widgets, and more down the right.

Sears Holdings Corp.

(Internet Retailer Rank 7 for 2009)

My Sears Blogs

The blog posts about all things Sears: corporate news, local store events, and the latest sales and specials.

Platform: Typepad
Domain: Subdomain
First Post: March 2009
Columns: 2
Layout: Content in the middles, information on the right.
Features: Among the blog features of the right column are categories, archives, polls, and a Twitter stream. Links to reviews and community discussions are also present at the top.

Newegg Inc.

(Internet Retailer Rank 7 for 2009)

EggXpert Community Blogs

The EggXpert community blog space brings together blog posts related to technology, gadgets, deals, and topics of interest to the Newegg family of sites.

Platform: CommunityServer 2.1 SP2
Domain: Separate Domain
First Post: April 2007
Columns: 2
Layout: Article content fills the middle, information is on the right.
Features: The right hand column includes links to FAQs, forums, shopping sites, social media sites, most viewed content, most comments, and RSS syndication.  Missing is an easy archive or category breakdown, although the content has sorting options.

Best Buy Co.

(Internet Retailer Rank of 10 for 2009)

Geeksquad Intelligence Geek Blog

The Geeksquad blog focuses on geeky news and tech information.

Platform: WordPress
Domain: Within Main Site (geeksquad.com)
First Post: January 2009
Columns: 2
Layout: Content in the middle, information on the right.
Layout: The sharp looking GeekSquad blog includes categories, a blog roll, archives, recent posts, and a tag cloud in the right column.  The top navigation includes a site search, social media links, and links to other BestBuy/GeekSquad pages.

QVC Inc.

(Internet Retailer Rank 11 for 2009)

Blogs in QVC Community

The QVC blog community brings together a whole network of blogs from various QVC employees.

Platform: Custom/LiveWorld
Domain: Subdomain
First Post: April 2009
Columns: 2 (primarily)
Layout: Main blog information is in the middle.
Features: The somewhat feature-sparse layout has several links on the left for navigating back to forums and the blog community main page.

SonyStyle.com

(Internet Retailer Rank 12 for 2009)

Sony Electronics Blog

The Sony electronics blog brings updates on Sony technology and new happenings from the digital world.

Platform: Custom
Domain: Separate Domain
First Post: April 2009
Columns: 2
Layout: Blog content in the middle, information on the right.
Features: The electronics blog is easy to navigate and has links to comments and social bookmarking tools below posts. The right column includes links to the RSS of the blog, an about section, and ways to subscribe, along with an archive, links to other social networking pages, featured posts, recent posts, recent comments, and podcasts.

SonyStyle USA Blog

Even more news and info from Sony.

Platform: Custom
Domain: Subdomain
First Post: May 2009
Columns: 2
Layout: Blog content in the middle, information on the right.
Features: While I’m confused by Sony’s need for two separate blogs, this blog is similarly organized: some links are at the top of the right column, and the right also displays the archive, popular posts, categories, favorites, and links to other Sony sites.

WalMart

(Internet Retailer Rank 13 for 2009)

CheckOut Blog

A blog about written by the “team of experts at Wal-Mart and Sam’s Club who have really cool jobs working with gadgets, games, sustainability and more.”

Platform: Custom
Domain: Separate Domain
First Post: August 2007
Columns: 3
Layout: Main content in the middle; two split columns on the right.
Features: Blog articles fill the left-center section of the layout, while the first right column includes categories, the blog roll, a brief “about” blurb, and links to Flickr and YouTube feeds.  The second right column includes an RSS subscription, a blog search, a Twitter link, and recent posts, most commented posts, archives, and an author list.

HP Home & Home Office Store

(Internet Retailer Rank 16 for 2009)

HP Blogs

A large collection of blogs from the HP community.

Platform: CommunityServer 2008.5 SP1
Domain: Subdomain
Columns: 2
Layout: Content in the middle, information on the right.
Features: The blogging community uses a layout with blog content in the center and a right column navigation that includes a search, syndication links, blog tags, and blog categories.

Netflix Inc.

(Internet Retailer Rank 18 for 2009)

The Official Netflix Blog

Blogging about Netflix and the movie experience.

Platform: Blogger
Domain: Subdomain
First Post: May 2007
Columns: 2
Layout: Blog content in the middle, information on the right.
Features: On the right are relevant Netflix links, information about the blog, an archive, labels, and a Ning community badge.

Gap Inc.

(Internet Retailer Rank 25 for 2009)

Athleta Chi

Th blog of the Athleta brand brings together inspiring stories of female athletes and informative sports articles.

Platform: WordPress
Domain: Separate Domain
Columns: 2
Layout: Article content in the middle, blog information on the right.
Layout: On the right, the Chi blog includes options to subscribe via email and RSS, new articles, featured articles, recent comments, events, a blog search, and a link to article archives.

HSN Inc.

(Internet Retailer Rank 26 for 2009)

HSN Blogs

Industry experts offer advice to the HSN community.

Platform: Custom
Domain: On Main Site
Columns: 2
Layout: Main blog information in the middle.
Layout: Actual blog pages are mainly comprised of article content with links to other blog articles by the same author on the left.  The main blog page includes a blog roll on the left and an aggregate of recent posts in the center of the page.

Zappos.com Inc.

(Internet Retailer Rank 27 for 2009)

Zappos Blogs

The Zappos blog is actually a collection of frequently cited blogs focusing on various aspects of Zappos culture.

Platform: Custom
Domain: Subdomain
Columns: 2/3
Layout: Blog content in the middle, information on the right.
Layout: The main article content is in the middle, links to other Zappos blogs fill the top nav, and the right column is divided into two columns in places.  The right space houses an RSS link, popular posts, active blogs, and blog tags.

Blog Design Tips to Remember

If you’re setting up your own blog or re-evaluating your existing blogging efforts, you may want to take note of these recommendations: Include a link to your blog’s RSS subscription and/or email subscription in the upper right portion of the page.  You should also include a search for your blog, but don’t default to using your product catalog search field from the ecommerce portion of your site.  The search should pull up articles from the blog itself. If you have an email signup and a search bar at the top of your page, make sure to clearly indicate which is which.  Customers won’t be amused if they enter their search terms into your email box because they couldn’t determine the function of the text field.

If you’ve gathered more than a handful of posts, include an easy way for visitors to browse through your blog’s history, whether it’s a calendar, an archive, or a list by month.  Few will spend the time hitting your posts’ “more” links looking for that article they saw two months ago.

Use some of the right column space to highlight featured posts that may interest new readers.  This could be a section of links to the most popular posts, the most commented on posts, or just the stories that you believe were special.

For a look at more on blogs from ecommerce companies, check out a list of blogs from the top 100 online retailers, a slightly older post from Get Elastic on the same subject, and some recommendations on doing blogging right.

What is Whitespace?

Whitespace, also known as negative space, is a term often heard in the art and design world. In web design, whitespace is the empty space (whether it is white or colored) that surrounds the components on a webpage. It is the empty space in between the text, titles, graphics, and logos on your site.

Within the various elements of a webpage, macro whitespace is the negative space surrounding the larger elements of the site, the space between the header menu and main body text, for example. Micro whitespace refers to the more easily overlooked miniscule space between lines, images and descriptions, and other small page details.

Whitespace is an important element in web design, as it can be used to separate and highlight items, provide visual relief, and alleviate perceptions of clutter or constraint. However, it’s not uncommon for web designers to try to utilize all the space provided by filling it with many elements.

More Stuff, Less Space

More product, more content, more callouts – all these can lead to more purchases and more traffic, so it’s easy to see why “more” could be understood as “better.” Many times whitespace might seem like wasted real estate. What’s often forgotten is that whitespace can be artfully used to direct the viewer’s attention to more important elements. It can also lend to a sense of balance and elegance through simplicity in the page design.

Whitespace offsets the visual weight of content and is essential for a website to appear simple, comfortable, and concise. Too much content and too little negative space may leave a page looking messy, crammed, or unprofessional. With no visual breathing room for the viewer’s eye, the visitor might experience feelings of constriction or confinement. You wouldn’t find it easy to read a book if all the lines and paragraphs ran together, so why hint at that in your web content?

Will Whitespace Make Your Content Better?

While leaving a page crammed with text and content may frustrate readers as they try to scan a site for essential information, leaving gross amounts of whitespace in between all elements may lead to needless scrolling as users have to navigate down the page while the take in the information. Is there a perfect balance between whitespace and content? Several studies performed by the software usability research lab at Wichita State University sought to answer questions surrounding whitespace and reading online content.

Finding Content on a Page

In one experiment, three versions of an online travel website were created. The content was identical on all three, but the information was spaced differently across the pages. In the low whitespace condition, much of the content on travel information was crammed together in three columns with little room to separate categories or paragraphs. In a medium whitespace condition, the columns and content categories were spaced enough to provide clear distinctions between groups. In the high whitespace condition, a large amount of whitespace was provided around each section of content, giving it an empty look.

During the study, participants were asked questions that required that they locate information throughout the pages. In the end, the amount of time it took the users to find links within the page content didn’t differ based on the design. However, participants rated a higher level of satisfaction with the medium whitespace design, and rated this layout as preferred.

Readability and Margins

In another study, reading speed and comprehension were examined with regards to whitespace and content layout. Four content layouts were created for mock webpages. In the designs, the line height between the paragraphs was varied between standard (5mm of space between lines) and sub-optimal (4mm of space between lines). Margins were also varied between 10mm of whitespace surrounding the text or 2mm of whitespace surrounding the text. Altogether, four conditions were created with these variables.

Text with Margins and Standard Line Spacing	Text with No Margins and Standard Line Spacing
Text with Margins and Sub-Optimal Line Height	Text with No Margins and Sub-Optimal Line Heigh

Participants were asked to read the text at their own speed and answer comprehension questions about the paragraphs. In the end, words per minute reading speed was higher for the conditions where there were no margins, but reading comprehension suffered. The higher reading comprehension scores were for those conditions with larger margins. Participants also reported lower levels of fatigue and eyestrain when margins were involved, and an analysis showed that the element design that include 10mm margins and standard line spacing of 5mm was the preferred format.

Best Practices for Using Whitespace

If content and reading comprehension are important to your site, take the middle road with whitespace – not too much, not too little. The amount of whitespace between lines, paragraphs, and content sections does influence your user’s ability to read, scan, and understand the information. News, media, and elearning sites should all note that pushing information too closely together makes it more tasking to scan and extract information from. Likewise, if exaggerated spacing is used, the words will seem isolated and the relevance of the information may be disconnected.

When used properly, whitespace focuses attention on specific elements, can increase findability, and will draw the eye to certain places on the page. Effective whitespace also offers the illusion of simplicity and professionalism.

Buy buttons may be the one thing no ecommerce website should be without.  A lot of people have expressed thoughts on what makes a buy button better – be it brighter colors, bolder graphics, or a bigger size.  It makes sense to want to optimize your add to cart button, as the ultimate goal of any product page is to get that product into the shopping cart.  It’s common to hear that vibrantly colored flashy buttons attract our attention, subliminally compelling the shopper to click.  But if a big red button offered guaranteed clickability, surely every online store’s product pages would sport the same.  So how do the nation’s largest etailers treat the essential add-to-cart?  I grabbed a list of buy buttons from the top 50 ecommerce companies in 2008 to see how the buttons really did compare.

As you can see, they are not all big, bad, and red.  In fact, this collection of buttons resembles a bag of mixed-colored candy more than anything.  So how did the attributes break down?

Buy Button Color

Green  13 (26%)
Red  10 (20%)
Orange  10 (20%)
Blue  6 (12%)
Grey  4 (8%)
Yellow  3 (6%)
Pink  2 (4%)
Purple  1 (2%)
Black  1 (2%)

Buy Button Color Tone

Warm  25 (50%)  – That’s red, yellow, orange, and pink.
Cool  20 (40%) – That’s green, blue, and purple.
Neutral  5 (10%) – That’s black and grey.

Apparently brown just isn’t a hot button color in anyone’s book.

Add to Cart Call to Action

“Add to Cart” – 28 (56%)
“Add to Bag” – 10 (20%)
“Add to Shopping Cart” – 2 (4%)
“Add Items to Bag” – 1 (2%)
“Add” – 1 (2%)
“Add to Basket” – 1 (2%)
“Select Delivery Date” – 1 (2%)
“Add to Shopping Bag” – 1 (2%)
“Next” – 1 (2%)
“Order Now” – 1 (2%)

I guess the needy plea, “Buy Me Now, Please!” didn’t make the cut.  In terms of the use of “bag” versus “cart,” in general the retailers employing the “bag” are more likely to be associated with bags in their physical counterparts, like apparel retailers.  (When was the last time you pushed a shopping cart through Nordstrom?)

Extra Add to Cart Button Graphics

None  28 (56%)
Arrow  8 (16%)
Cart  6 (12%)
Plus Sign  3 (6%)
Bag  2 (4%)

Button Size

Does size matter?  Circuit City and the Systemax family of sites seem to think so.  Each of their sites uses a strikingly large green bar as their add-to-cart.  Never mind if green isn’t associated with the brand.  On the smaller side, Gap has chosen a barely-there concept.  The petite pale grey design certainly doesn’t stand out on their many-shades-of-grey site. Gap’s sister brands Banana Republic, Old Navy, Athleta, and Piperlime also appear to be taking the less-is-more approach.  I didn’t measure each button, but most fall within the realm of 1 to 1.5 inches.

Findability Still Matters

In the end, it doesn’t matter how fantastic your button looks, if it’s hard to find on the page.  (This is one argument for vibrant contrasting colors; the more attention it attracts, the easier it will be to quickly spot.)  Online shoppers are accustomed to quickly scanning pages to pull out relevant information.  A button that jumps off the page eases this process.  Most retailers stuck with common usability conventions and set their buttons in a sans serif font – although L.L. Bean seems to have missed the memo on this one.  Twenty-five of the buttons capitalized the first letter of each word, 20 put the whole call to action in caps, and 5 chose all lower-case.

The Gap and Target’s use of white on light grey is probably better avoided; some old printing conventions still hold true online, and high contrast between text and background is one of them.  As comparison, Musician’s Friend black text on lighter yellow background quickly jumps out and is easy to read.  All in all, many of the buttons are not readily identifiable out of context.  For me, Amazon, Victoria’s Secret, and Toys R Us maintain the company branding and are familiar enough to be identified, even without the corresponding site.  There doesn’t seem to be a clear set of guidelines that even the best-performingetailers use when crafting their buttons.  The best recommendations may still be to ensure that the button is clearly visible and stands out on the page, regardless of color or size.  For an older look at shopping cart buttons, Get Elastic rounded up a list of over 100 buttons in 2007.
Update:
After talking with some usability consultants at Internet Retailer Web Design & Usability 2010, it seems that green is indeed the preferred choice over red for usability studies examining effective buy button color.

The Websites:

1. Amazon.com
2. Staples.com
3. Dell.com
4. OfficeDepot.com
5. Apple.com
6. OfficeMax.com
7. Sears.com
8. CDW.com
9. Newegg.com
10. BestBuy.com
11. QVC.com
12. SonyStyle.com
13. Walmart.com
14. Costco.com
15. JCPenney.com
16. shopping.HP.com
17. CircuitCity.com (CircuitCity is now owned by Systemex Inc, which fell at #21 on the Internet Retailer list for 2008. Systemex also owns TigerDirect and CompUSA.  They all have the save Buy Button).
18. Netflix.com
19. VictoriasSecret.com
20. Target.com
21. LLBean.com
22. Macys.com
23. Williams-Sonoma.com
24. Gap.com
25. HSN.com
26. Zappos.com
27. Amway.com
28. Overstock.com
29. Avon.com
30. 1800Flowers.com
31. Nordstrom.com
32. Buy.com
33. SportsmansGuide.com (As owned by Redcats Group, who also have a lot of other websites I could have chosen from, but I didn’t).
34. NeimanMarcus.com
35. MusiciansFriend.com
36. Blockbuster.com
37. PCConnection.com
38. ToysRUs.com
39. Cabelas.com
40. BarnesandNoble.com
41. Scholastic.com
42. HomeDepot.com
43. VistaPrint.com
44. SaksFifthAvenue.com
45. Nutrisystem.com
46. Drugstore.com
47. Nike.com
48. Kohls.com
49. JCrew.com
50. OrientalTrading.com

This list of sites was compiled from Internet Retailer’s list of top 500 ecommerce businesses for 2008.  Omitted from the list is Peapod Inc, which is a login for current customers only site.