Get Free Quote

BACK TO BASICS: Web Design For Usability and SEO

by Paula Allen, December 16, 2009

Designing a great looking Web site with no thought to search engine optimization is like building a car and forgetting to put gas in it. It isn't going to go anywhere. However, search engine optimizers also need to know a thing or two about Web design, because unless you have a clean, well-maintained car to pump that gas into, you also won't get far. A truly successful Web design mixes good design principles with SEO savvy to create a site that's useful for people and search engine spiders, too.

SEO and Usability Can Peacefully Coexist

The primary focus when designing a Web site really should be on what's best for the user. However, usability usually goes hand in hand with search engine optimization, since what makes the site navigable, clear, organized and so forth for humans also makes it easier to index for search engine spiders. A designer can best maximize the potential of a Web site by balancing the needs of both.

Keeping search engine friendliness in mind enables Web designers to make choices that work for both human and spider visitors. The goals of SEO and usability are closely aligned. You know you have a user- and SEO-friendly Web site design when your site attracts the right target audience from searches and generates enough conversions to prove you're making them feel right at home.

Know Yourself

Your Web pages have a purpose, and it greatly impacts what search queries they can be relevant for. Web sites can be divided broadly into two types: research sites offering information and e-commerce sites offering products or services.

For most sites it's wise to offer a mix of pages that address both purposes. People typically research a subject before making a purchase decision. If an e-commerce site that sells power tools only has product pages and a shopping cart, the site won't appeal to people just beginning their hunt for the perfect cordless sander - and the search engines won't return it for research-type queries either. To rank for both types of terms, the site needs landing pages for research queries (filled with helpful "how to" articles, tool manufacturer information, product reviews, etc.) in addition to landing pages optimized for purchase queries. Then there will be something to attract people regardless of where they are on the information-seeker-to-decision-maker continuum.

A Web page's content and keywords will be different for research-oriented pages versus transactional pages. The search engines want to return results that satisfy a searcher's intent, so they look for these kinds of distinctions in order to understand a page's purpose.

Research pages:

  • Use words like "tips," "how to," "information," "reviews," "comparison," "tutorial," etc.
  • Include a lot of text per page.
  • Have text arranged in paragraph format.
  • Tend to have fewer images and other engagement objects compared to the amount of text.

E-commerce pages:

  • Use words like "sale," "shipping," "price," "buy," "add to cart," etc.
  • Use bulleted lists, phrases, captions and shorter text blurbs.
  • Incorporate more and larger images.
  • Have a higher concentration of engagement objects compared to the amount of text.

Know Your Audience

What sorts of people are the most likely to want what your Web site offers? Or does the site simply aim to get "lots" of traffic? When it comes to Web design, not targeting the right audience is a big mistake. A Web site's design cannot please everyone and still stand out from the rest of the pack.

Keyword Demographics
Keyword Demographics

A much better idea is to figure out who your target audience is and then make design decisions that will attract and appeal to them. Two ways to determine your target audience are to 1) examine your current and past customer lists looking for similarities and patterns; 2) research the demographics of people that search for your main keywords. An online keyword research tool can help with this second strategy (I used our free SEMToolBar). For instance, the power tools Web site may determine through this sort of research that its major demographic is males aged 35 to 65.

Armed with this information, the Web designer could use a more masculine design palette to make their target audience feel right at home. Once you know the type of visitor you want, you can style your Web site to attract and hold those people's interest.

Power tools photo

A Web design also makes visitors feel like they've come to the right place when it reflects the site's main subject theme. The power tools Web site should obviously include images and videos showing power tools. But defining their audience further would make the site even more effective. For instance, if they find that purchasers are usually men with families, they could include text references to families as well as images of happy children admiring their dad's finished work.

By creating connections with the visitor's own experience or ideal, the site content reinforces the feeling of satisfaction buying from a particular merchant. Having an audience in mind helps guide all sorts of design decisions:

  • Colors
  • Font style
  • Font size (and whether it needs to be scalable)
  • Style (such as flashy, fun, professional, artistic, etc.)
  • Writing tone
  • Vocabulary choices
  • Reading level
  • Length of sentences/paragraphs/pages
  • Complexity level of the information
  • Amount of interactivity
  • Technology used (such as audio formats, video formats, Flash or no Flash, etc.)

Code a Spider-Friendly Site

Your site's underlying code can be spider-friendly if it allows search engine spiders to easily crawl your pages and figure out what they're about. Keeping the code as clean as possible is key. Here are some best practices for SEO-recommended coding:

  • Externalize CSS: Use an external Cascading Style Sheet (CSS) to control the look of your Web site, including fonts, positioning, etc. Not only does this keep your pages trim and fit, but it saves time whenever you need to set up new site pages or make look-and-feel changes by defining styles in one central location.
  • Externalize JavaScript: Put JavaScript code in an external .js file and just call the JavaScript objects when they're needed, after the page loads. This one change can eliminate hundreds of unnecessary lines of code from a Web page.
  • Avoid inline markup: Use as little inline markup as possible within the text.

This point is a win-win for both you and your users. When you externalize bulky CSS and JavaScript code, the result is less HTML cluttering your pages. Less code means smaller file sizes, which means faster load times for site visitors and less junk to wade through for search engine spiders. With the code streamlined, your keyword-rich content rises closer to the top of the page.

Incorporate Multimedia, But Explain It With Words

Images, videos, audio clips, Flash widgets and other engagement objects add a lot of value to a Web site for users. They can also make a Web site more competitive in the SERPs, especially when you consider that embedding a video or image on your site lets your page appear in more search engines: as a regular Web listing or a blended result in Web search, or as an image or video result in those vertical engines.

For SEO purposes, you must describe these embedded objects using actual words. For images, a brief ALT attribute and text surrounding the picture are needed. For videos, use the Title tag as well as surrounding text to describe what the video is about. Don't isolate the object on its own page, but embed it within the page where the object and the on-page text can supplement each other. In addition to benefitting your SEO efforts, image ALT attributes and video titles enable people using screen readers (such as those with visual disabilities) to understand what your images and videos are about.

Don't make the mistake of using images alone on a landing page, no matter how awesome they look. Like the "splash page" of 1990s-era Web sites, some home pages are nothing but images with possibly a few menu links. A major brand may get away with this (e.g., Nike or Coca-Cola) and still maintain its rankings, but the average site must communicate its subject relevancy in words in order to rank for its keywords and be found relevant for searches. Granted, this requirement is primarily an SEO thing, since for your users you really might think the picture-only design is better. If that's your dilemma, the next section has your answer...

Position Text Appropriately for Users, Spiders

To make a Web page relevant for certain keywords, it needs to have a substantial amount of text about that subject, preferably near the top of the page. That's an SEO basic tenet -- but what to do when the design requires a dramatic, clean look, sans words? There is a way to satisfy both the usability/design goal and the spider's appetite for text content.

A technique called "content stacking" lets text appear near the top of the HTML page code, where search engine spiders looking for keyword-rich content can find it quickly. Then using div positioning you can reposition that text in the rendered page wherever appropriate for your usability and design goals. The text still must appear to users on the page, but this lets it be placed below the fold. To do this, define a <div> inline within the HTML code that has the following structure:

<div style="position:[]; top:[]px; left[]px; width:[]px; height[]px;">Content</div>

After you've decided on the right definition, move the style to your external CSS document, name it (such as ".styleA"), and reference it in your HTML document as follows:

<div class="styleA">content</div>

Getting Around is Crucial

Your site navigation requires special attention. Text links are the most readable to search engine spiders, compared to the other types (Flash, JavaScript, or image-based). Text links also have the greatest accessibility for users, since some may not have their browsers set up to see Flash or JavaScript properly, and people with visual or other impairments can most easily interface with plain text.

If you must have a Flash- or JavaScript-based navigation for aesthetic or other reasons, replicate it in the footer using text links to make sure the links can be seen and crawled. Your footer should also have links to your About Us page, Privacy Policy page, Legal Notices/Copyright page, etc. These types of links make you look more like a "real" company, boosting your site's trust factor with users as well as search engines.

Using keywords in your link anchor text also makes a huge difference, particularly in your global navigation links since they appear on every page. A common mistake is labeling the home page link "Home"; this is a missed opportunity! Give it a descriptive label instead that uses the main keyword for your home page. This might be the brand name (e.g., "Serious Power Tools") or the main service/product/theme (e.g., "Power Tools"). If you have image-based navigation links, you'll similarly put keywords in the ALT attributes. Using descriptive labels will reinforce each landing page's relevance to the particular keywords you want it to rank for.

Breadcrumb navigation can boost both usability and search engine optimization. Usually positioned near the top of every page just under the title, breadcrumbs are small text links that identify the current page's location (either the hierarchical directory structure or the path the user took to get there). Here's an example:

Breadcrumb navigation

The breadcrumb links help users easily find their way back through the site. For search engine spiders, breadcrumb navigation reinforces the site's silo structure, which helps them understand what subjects your site is relevant for.

Web Design in the Scheme of Things

Web design fits into the SEO Hierarchy of Needs this way: most important is keyword research, which supports your content, and determines your site architecture. The combination of all these things will guide your Web design. It's as if you've gathered all the ingredients together, and now you're ready to turn them into a dish that will best suit the people you plan to serve it to.

This is part 4 in our series on the SEO Hierarchy of Needs.

For permission to reprint or reuse any materials, please contact us. To learn more about our authors, please visit the Bruce Clay Authors page. Copyright © 2009 Bruce Clay, Inc.