4 Tips For Search (And User) Friendly Design

Great design, happy users and optimal search visibility can coexist. But it takes a some subtle balancing on the part of the site design team. I’ve got no great ‘ah-ha’ suggestions here, but 10 small things you can do to reach that goal, without violence between team members.

Put The SEO On The Design Team

A few months ago, a client showed me a home page HTML mockup completed by their ad agency and asked me for an SEO review. They were, they said, already building the site. Here’s the conversation:

CLIENT: Just sent you the link to the page. What do you think?
ME: I can’t review it.

CLIENT: Huh? We can call back later if that’s better…
ME: No, I mean, there’s nothing to review.

CLIENT: (rolls eyes – I couldn’t see them but I could practically hear it)
ME: See, the home page is 100% graphics. The body copy, headlines, even whitespace is a graphic. There’s nothing for a search engine to see.

CLIENT: So? How do we fix it?
ME: Change all of the body text and headlines to real text.

CLIENT: We can’t.
ME: OK, so I can’t review it.

CLIENT: Oh…

What happened? I wasn’t being grumpy (and lord knows, I can be. There’s just no point in including me that late in the process, because the site was basically built to be search-repellent.

Include the SEO in the design team, from day 1. Make it clear to everyone that they’re all the design team, and they’re all responsible for timely launch of a quality site. That way, the SEO can’t be a prima donna, constantly vetoing all design options. And the designers can’t insist on pages that are invisible to search. They’re all in the same boat.

I’m not suggesting this will be a perfect relationship. But I’ve never seen a balanced design team with an SEO fail to produce a fantastic site.

Know The Fold

“Too many words” is a complaint I hear from a lot of designers. They want clean, image-rich pages that are stingy with text.

“Too few words” is the complaint I hear from SEOs. They want lots of great writing on every page.

And users sit somewhere in between. They want beautiful imagery, especially when shopping. But they also want more detail a quick page scroll away. They don’t want to have to forage for that detail.

The solution? Learn to know the ‘fold’: the dividing line between the immediately visible part of a page, and the part of a page that’s visible only after a scroll. Put the most visually compelling content above the fold, and the increasingly detailed copy below.

The fold isn’t a hard line, of course. Different visitors will have their browser window sized differently, and their computers will be set to different screen resolutions. But you can figure out where most visitors start, and how far down the page they scroll. And you don’t have to guess. A tool like ClickTale can provide you a ‘scroll map’ based on your current site:

And, you can use the data provided by analytics toolsets like Google Analytics to tell you the most popular screen resolutions of your visitors:

This isn’t about gaming your page for SEO. Design the page to match the natural browsing behavior of your visitors. Put critical, quickly-digested, visual information at the top, more detailed, content-rich information at the bottom.

Use Faceted, Click-Driven Navigation

I’ll get a lot of nasty comments in response to this one, I’m sure. But drop-down menus are often a curse: Keep them very simple, if you use them at all.

First, they dilute link authority by placing many additional links on every page. Every link on a page funnels away a bit of that page’s authority. More links mean less authority on the page, and less authority sent per link. That hurts each page’s ability to improve your site’s overall authority and, more important, it makes it harder to naturally concentrate authority on category and ‘hub’ pages. For SEO, that’s all bad.

But drop-downs are bad for users, too. They force visitors to dig for information that’s not immediately visible. Mr. usability himself, Jakob Nielsen, wrote about this as early as 2000. Long, detailed drop downs or fly-out menus can drive your visitors nuts.

Instead, use faceted navigation, where each a click on each category reveals a page that has sub-categories. That creates an ideal structure for visitors as they only see sub-categories once they show interest in the major category (by clicking.) It reduces distractions, by ensuring the user won’t be confronted with an explosion of drop downs when they move their mouse across the main site navigation. CNN makes great use of faceted navigation – when I click on ‘living’ I get a page that lets me drill deeper. It’s easy to explore, but requires no drop downs at all:

And, faceted navigation creates an ideal search engine structure, with pages nicely compartmentalized around relevant hubs.

(I know there are various definitions of ‘faceted navigation’ out there. I’m focusing on navigation where you jump from facet to facet with a click. That’s the best balance of SEO and usability.)

Learn CSS Typography

Many times I run into sites where designers converted text to graphical text, but didn’t have to. You can control leading, kerning and type size with a lot of precision right from your style sheet. With CSS3, you can control color, shadow and even column layout right from the style sheet, too. There’s very little limitation on what you create.

The only time you need to use graphical text? If you’re using a font so unique that you can’t rely on visitor’s computers to have the same font, or a font close enough to preserve the overall layout. And even then, you can look at solutions like TypeKit to embed non-web-safe fonts.

I can’t go into the finer details of web typography here – this is a search column. Just don’t use graphical text unless you’ve already explored your CSS typography options.

More Work Means Better Results

All of this is more work for the designer and SEO alike. If the SEO is part of the design team, then it’s her job to help find SEO-friendly solutions to tough design challenges. That’s more work for her. If the designer is thinking about SEO, then he has to sometimes compromise, or use more technically challenging solutions to get the look he wants.

But it’s worth it: the final site will perform better in search and be a better user experience. too.