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

Design & Development

Ian Lurie Dec 27 2010

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.

Am I insane?

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:

Great, text-rich home pages

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

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

37signals Design

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

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 Homepage

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.

Jax Vineyards

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

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

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 homepage Design

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

Emptees

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 homepage design

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

Text-centric internal pages

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:

HighRise

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

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

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

02a Internal Page

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.

Fantastic, text-friendly e-commerce designs

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

Apple MacBook Pro

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

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

apple macbook pro page design

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

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 homepage design

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.

Rapha

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 homepage

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 internal page design

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

In all things, moderation

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; or
  • You have a great copywriting team, and think your writing is an asset.

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

tags : conversation marketing

related articles

6 Comments

  1. Tracy Beach

    Tracy

    37 Signals and Highrise should count as the same site. I feel like you owe us one more.

  2. Bruce

    Don’t listen to all those people. You are not insane.
    Many of these home pages would make excellent magazine advertisements. Goes to show that the principles of effective and persuasive messaging are applicable across media.

  3. I think Bruce is right here. Follow him.

  4. I’ve had the copy-versus-white space argument with whining, award-counting graphic artists for decades. I’m a whining, sales-counting consultant in case you didn’t notice.
    In a world full of beautiful web pages, ads and brochures that don’t accomplish anything the reality is we need BOTH great design AND a powerful, appropriate, clear message for success (as you demonstrate so well in this post).
    Message without design at least has a chance. Design without the message is a massive disservice to those who are paying for the work.

  5. Also, the cool thing about your examples is that these pages probably convert pretty well.

  6. Julie

    Awesome examples. I really like the Jax Vineyards design, the product is obvious but the accompanying text doesn’t look out of place at all.

Comments are closed.