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:

Scroll map via ClickTale

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

screen resolutions in Google Analytics

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:

Faceted navigation on CNN

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.

Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.

Related Topics: All Things SEO Column | Channel: SEO

Sponsored


About The Author: is Chief Marketing Curmudgeon and President at Portent, Inc, a firm he started in 1995. Portent is a full-service internet marketing company whose services include SEO, SEM and strategic consulting.

Connect with the author via: Email | Twitter | Google+ | LinkedIn



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • http://www.essentee.co.nz Essentee

    I had to laugh out loud at the Know The Fold paragraph. I’ve had exactly this debate with designers who say our sites have ‘A lot of text’ on them. As you say it’s a balance, but I like your solution – it’s completely workable and clients, designers, seo-ers and user advocates can be comfortable with it.

  • http://www.search-usability.com/ Shari Thurow

    Hi Ian-

    Thumbs way up from the search-engine friendly design pioneer.

    Personally, I like “…don’t use graphical text unless you’ve already explored your CSS typography options.”

    There are times when, from a design and usability standpoint, it is best to use graphic images. I use them a lot for site navigation, despite all of the hooha about making everything a text link. The design and usability can break if navigation text is resized. And the workarounds are a pain in the behind for that if you want to force the size issue using CSS.

    There are the right times and places to use graphic images. SEOs need to see that. Graphic/Web designers need to see that. And they don’t. This is a great, linkable article.

    Kudos!

    Shari

  • Ian Lurie

    Thanks Shari! Yup, all I want is compromise. If the graphical text is blurry as hell anyway, why not make it regular text?

    And, SEOs, do you really need that one-word headline to be true text?

 

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide