Minasan, Watashiwa Wawan Desu...

Tuesday, February 8, 2011

I'm not crazy: 10 great, content-friendly web designs


A marketer walks into a meeting, ready to see the newest designs for their client’s site. The new design is beautiful. It makes everyone weep with joy. It’s also totally devoid of text.


The marketer (or SEO, or copywriter, or strategist) walks back out of the meeting, punches a wall until their hand flattens, and then goes back to work.


Stop me if you’ve heard this one.


A few months later, they’re called into an "all-hands" meeting. Turns out the CEO just read about SEO, or conversion rate optimization, or the need for great copywriting. Now she wants to know why the shiny new site doesn’t rank, converts like crap and seems to spur more questions than it answers.


I'd swear that this whole internet thing started as a way to pass around information. And text content remains the most foolproof way to communicate online. Text content = information.


Far too many designers seem to think text is the enemy of great design. To me, they’re inseparable: Web sites that best fulfill their business goals design for text content, instead of burying it. When I say that, though, everyone in the room looks at me like I just started gibbering madly about purple elephants and acid trips.


In the interest of either proving my sanity or showing there are other crazy people out there, here are 10 spectacular text-friendly web sites that also happen to brilliantly do their assigned jobs:


No page of the site resists text more than the home page. The home page is like text Gore-Tex. If I suggest as little as five words of real, readable copy on some home pages, the design team looks at me like I turned into a large, talking turd.


And no, a small paragraph of 5-point type that’s 2 shades away from the background color and 200 pixels below the footer is not a "compromise". I want home pages that are informative and easy to read. Can we do that? Turns out, yes:


37Signals remains the state of the art when it comes to simplicity. Check out their company home page:

37signals Home Page 122710

Lots of text, and very few images. The page loads and renders in 5 seconds. It looks great. And it’s unique in layout and concept, or at least was, before people started copying it.


A lot of brand managers tell me that 37Signals isn’t a "real company", though. That’s ridiculous, but I'll play along and show companies that sell or promote stuff we all know about, like web hosting.


Media Temple sells (oddly enough) web hosting. Their home page has a purty image with a slide show, but it also has a decent proportion of text, and full text navigation, all above the fold:

Media Temple Home Page 122710

It’s not exactly a content bonanza, but it’s clear, and it’s obvious the content wasn’t slapped up there as an afterthought.


Doesn’t get much more traditional than wine. Jax Vineyards created a slick layout that presents the product, front-and-center:

Jax Vineyards Home Page 122710

Look at how they use type to create a beautiful, easy-to-read page. Their font choices and line spacing make me sweaty. Yes, I’m a typography geek.


The point, though, is that this page practically reads itself to you. The reader can take it all in in a matter of seconds.


I’m not thrilled with the way they page between wines using javascript, but that’s the SEO in me complaining. This is still a great text-driven design.

Adobe makes Flash and Photoshop, among other things. But their home page is a study in creative, readable text placement in a bright, deep design:

Adobe Home Page 122710

Aside from the logo, every letter on this page is cut-and-paste-able text.


A great, content-friendly design doesn’t have to have tons of text on it. The Emptees site focuses on images, but also includes the "just arrived" and other listings at the bottom of the page, and the "What’s going on here?" section at the top right.

Emptees Home Page 127710

That adds up to a page where I can quickly figure out my next steps, and learn about the company at the same time.


Once the content team wins the Battle of the Home Page, they often lose the War of Internal Pages. Every page on a site is a potential landing page. So providing text-friendly internal pages can be every bit as important:


37Signals’ HighRise leaves nothing to the imagination, explaining their entire product on a single, easy-to-read page that makes you want the product:

Highrise Internal Page 122710

Not everyone can pull this off. You need fantastic copywriters, and a designer who can use whitespace, columns and type the way most of use air.


O2 Alternative, a web site design and development shop, works in bright colors while still emphasizing information:

02a Internal Page 122710

This is a design firm that made a conscious choice to build text into their layout. Note the line spacing, use of large fonts to make their site easy to read, and my favorite part, the red peppers.


Did you know that you can sell more products by actually telling people about them? It’s true:


A great, content-driven design doesn’t have to put text above the fold. Note how Apple leads your eye down the page, then shows key features of their top-end laptop:

Apple Macbook Pro Page 122710

Click any sub-navigation, such as "design", and you find even more text-intensive layouts:

Apple Macbook Design Page 122710

Apple has mastered the art of progressive content: As you dig deeper, they assume you want more information, so they provide increasingly dense content on deeper layers of the site. It makes sense: If you take the time to click further into the site, you’re looking for details. So Apple delivers them.


Postbox puts their call to action front-and-center. They also take advantage of text-shadow and other emerging CSS properties to get some great text effects, while ensuring the site will degrade gracefully for people with older browsers:

Postbox Home Page 122710

You learn all of the high-level benefits of their product on the home page, then click to internal pages when you are ready for details.


Even fashion companies get into the text-friendly act. Rapha features lots of products on their home page, as well as blog post summaries:

Rapha Home Page 122710

And their internal pages are ultra-informative. They have a short description and "buy now" block at the top right. Readers who want more information – including cycling nerds like me – can scroll down to dig deeper:

Rapha Home Page 122710

This site looks great because of text, not in spite of it.


Some brands do just fine with image-focused, text-repellent designs. Some demand it. I’m not suggesting that every web site has to be text-friendly. But if:

You’re already struggling for organic search traffic;You’re have PPC quality score problems;Your customer service line is ringing off the hook with the same questions, again and again;You need to explain your product and let visitors get more details when they want them;You want ultra fast-loading, attractive pages; orYou have a great copywriting team, and think your writing is an asset.

…then looking at the sites listed here should show you the way.

comments (5) | trackbacks (0) | permalink


View the original article here

No comments: