SMX Boot Camp: SEO Friendly Web Design (#smx #14A)

Ah. This is a good one. In this session Shari Thurow (@sharithurow, Founder and SEO Director at Omni Marketing Interactive) will be showing us how to create search engine friendly sites that can be read and indexed by search spiders, but are also equally appealing to human visitors. A great resource for those dealing with, ahem, I mean… highly respecting the feedback of web designers who aren’t convinced you can have SEO friendly web design without compromising user experience.

SMX East 2013 SponsorYay for SEO and UX working together, and yay for educating entire teams on the value of both! Let’s go.

About Shari Thurow – She’s the (wo)man when it comes to SE friendly design. Been doing this since 1995. She is a designer and a developer; good technical resource.  Web usability and UX professional since 2002.

There’s “no other field where there is more swearing than website usability” says Shari. (CA: I love this and agree.)

All of the recommendations is this presentation are based on data!

Findability has three areas:

Browsing
Searching
Asking social network

When you are UX testing a website you’re not testing the person, you’re testing the website.

We’re playing a game now.  It’s called “Is this website SE friendly or not. “

Shari says our brains (male and female) are wired to think three things:
Can I eat it? Will it eat me? Can I have sex with it? (So if you are a restaurant, you better make sure your website shows food!)

The Mayo Clinic is a site that does extraordinarily well in regards to SE friendly web design.


Things you need to know:

1) Designing a website for people who use search engines

2) SE Friendly design is NOT designing just for obtaining SERP ranking. Don’t want to focus on technology-centered design.

3) Grant access to desirable content

4) Limit access to undesirable content (IE: Duplicate content)

5) How you place words and graphic images on your website – how you physically arrange things – tells SEs what you think is important. If it’s important SEs assume you’ll put it higher up on your page.

Google is not going to like you; Google is not going to subscribe to your newsletter; Google is not going to add a pair of ski Googles to cart. Google and Yahoo and Bing are trying to figure out what searchers want and give it to them; so YOU have to figure out what they (the humans) want and give it to them, too.

 

5 Rules of web design: Make It….

1)   Easy to read

(legible, scannable, understandable, makes sense in search listing. Can people read it?? Can people read it ON A SMARTPHONE?)

Content needs to be easy to read, and easier to scan.

 TEST! Is this easy to read?
WEB DESIGN IMAGE

No!

Be careful about using Grey. A lot of people don’t recognize grey as clickable.

Don’t format your clickable and nonclickable text to look alike. This is a bad user experience and for SEs this looks like spam.

 

2)  Easy to navigate

(People scan before they read;  can humans understand your content as well as technology?) All clickable text should look clickable, all not clickable text should look NOT clickable.

Easy to navigate answers the questions: Where am I? Where can I go? How Can I get there?

Make it easy for people to decide which link to click on. 

web design  - clear links

Be careful about putting navigation in the “Banner blindness” zone

Apple Germany and Apple UK = really good examples of navigations that rock.

TEST: Which site navigation is easier to read?

Web design - Navigation readable

 

Types of site navigation schemes (from most to least SE friendly)

Text links
Navigation buttons
Image maps
Menus (form and DHTML)
Flash

Expanding and collapsing navigations (The ones that show the + and – sign) are the WORST for Search Engines).

Flyout menus have the most errors; dropdown menus tend to have the least amount of errors.

MegaMenus tend to lose up to 20% revenue! If you NEED to do a MegaMenu, the FoodNetwork has a good example that is SE friendly and user friendly.

If you give people too FEW choices, it ticks off users. But if you give them too MANY choices, they are also ticked off because they don’t know where to begin. You want something in between; that “in between” you will feel out with testing.

[Having trouble condensing your MegaMenu? Hire an information architect; that’s what they do. It’s called a “card sort test” and there’s two types; open and closed. You need both of them.]

If a site navigation scheme is NOT search engine friendly should you not use it? NO! USER EXPERIENCE FIRST! If your users like to use the navigation, use it, but make sure to include text links as well.

Always try to have some form of text navigation on your website.  A fat footer can be really helpful WHEN DONE RIGHT.

Really big websites need to have a site index as opposed to a site map.

 

3)  Easy to find.

Before people can interact with your website they have to find your website.

If you don’t want people to notice something, put it in the lower right hand corner of the screen. People are less likely to look down there.

After arriving people don’t mind clicking through pages as long as they feel like they are making progress.

 

4)  Consistent in layout, design and labeling

This is how SEs are able to determine the “aboutness” of your website. Layout/design/labeling communicates trust…

5)   Quick to download

There’s actual download time and perceived download time. The latter is more important than the former. If people get their keywords validated they will regard the download time as good; if they don’t get what they want they will perceive the time as slow.

Perceived download time depends on context:

web design - download time context

 

How Search Engines Read Websites

  • Index text
  • Follow links
  • Measure popularity
  • Accommodate searcher goals and behaviors

Are people saying the same or similar things about your website as you are saying about your website? (This is where inbound link and “link building” is very important.)

Web design - seo

Searcher goals are HUGELY important! Does your searcher want navigational, information (63-80% of SE queries), or transactional  (24-24%) queries. Shari calls these “Go, Know or Do”  goals.

web design - intent

 

What kind of text should you use on your website?

Primary Text – ALL Search Engines read and use to determine relevancy

  • Title tags (spell out your abbreviations in your title tag if there is room!)
  • Body copy
  • Text at the top of the web page
  • Text In and around hyper links

Secondary text – SOME search engines read an duse to determine relevancy

  • Meta tag content (VERY important for video optimization)
  • Alt text
  • Domain and file names

Primary text items are more important than secondary text elements. Make sure to place keywords in your titles, visible body text, anchor text , meta tags and ALT text.

 

These are all no nos:

Web design - no nos

Mobile

Mobile users read! (shocker!)

WEb design - Mobile

Do not assume responsive design is necessarily Search Engine friendly! Websites designed for mobile have to follow the same 5 rules for web design (covered above) as desktop websites.

Responsive design works well for some types of websites (a resterautn for instance), but most sites need to have a mobile-specific website created (IE: The Mayo Clinic website)

Responsive design DOES increase the download time of a website. Count the numbers of images; the number of scripts – those both bog down mobile websites.

Popularity component

Social signals and popularity are both forms of validation. The idea is to get a quantity of quality links.  

When you are logged in, Search Engines remember click popularity and adjust your SERP results based on that.

WEB DESIGN - Social

 

Some other random mishmash

Read this book! Emotional Design by Donald Norman

“I don’t expect you to KNOW everything, I just expect you to have an AWARENESS.”

Search engines don’t read punctuation marks

Right column should be at least 200px wide (if it’s less than that people tend to ignore it because they think the column is ads)

People tend to look three or four inches from the top of the screen; this is why the H1 is incredibly important.

Generally 7-12 FAQs per page is ok; after 16 it gets really hard to scan (which is a bad user experience.

People are going to decide to scroll during the first initial few seconds based on what’s visible. Which is one reason why it’s important to get the most important information above the fold. (Beyond the fold, Shari doesn’t recommend the page being longer than 2.5 screens.)

A lot of people ignore “banner blindness” ads (in the first 200px of the page)

FreeDictionary.com = bad ad saturation and placement
Mayo Clinic and ABC News = great ad saturation and placement

 

Search Engine Visibility  = Shari’s book. Read it for more information on getting a PDF to rank.

 

Chelsea Adams Brooks is a long-distance cyclist, aspiring cob house builder, schema/analytics/algorithm obsessor, and a former senior content writer at Bruce Clay Inc.

See Chelsea's author page for links to connect on social media.

Comments (7)
Filed under: SEO — Tags: , , ,
Still on the hunt for actionable tips and insights? Each of these recent SEO posts is better than the last!

7 Replies to “SMX Boot Camp: SEO Friendly Web Design (#smx #14A)”

Good tips on SEO friendly web design. I have to add some points that are important to take care in designing seo friendly website – Try to avoid using flash and frames on the page and always use eye soothing colors for background and text.

Chelsea Adams

Good additions, Carol! Sometimes optimizers will specifically use frames if there is a portion of a website they don’t want/need crawled. but I agree — in general they should probably be avoided.

The most important part of SEO is perhaps having content relevant to your main page or site topic. The readable text on the page needs to be relevant to the targeted keywords and information in the meta tags and alt tags.The content needs to read well, in addition to being keyword dense, in order to be useful to a reader. Good read. Thanks

We’re designing a new website. Some of the points you’ve put in were great to learn! Any critiques guy’s? http://bit.ly/GzR1Qi

Excellent points. I hope many could follow this advice.

However, regarding the “Expanding and collapsing navigations” I guess you are referring to Javascript menus and Javascript is not so SE friendly, agreed. Unless you are referring to something completely different.

However, most of the modern techniques do use text links, so it should be ok. Best way to test it is to disable JS on the browser and see if the menu links appear. Or if it’s a website already indexed by Google, take a look at the cache version and check the “text only version”.

That way we can check whether our menu shows (SEO friendly) or not (definitely not SEO friendly).

Besides that, loved the advice.

Chelsea Adams

Good supplemental JS advice/clarification, Xanthi! Love your troubleshooting advice.

One example of navigation that Shari gave that was user-friendly but needed an SEO text supplement was an interactive map of the United States; user’s loved to choose their state by clicking the colored map but (obviously) the design is bad-news-bears for SEO, so she recommended also including text links that name all the states below.

(by the way, Shari — the presenter of this session — is really awesome when it comes to web design/UX/optimization. Make sure to connect with her on Twitter @sharithurow)

Chelsea, would be interesting to get your view on the hummingbird and how it will change content marketing.

LEAVE A REPLY

Your email address will not be published. Required fields are marked *

Serving North America based in the Los Angeles Metropolitan Area
Bruce Clay, Inc. | PO Box 1338 | Moorpark CA, 93020
Voice: 1-805-517-1900 | Toll Free: 1-866-517-1900 | Fax: 1-805-517-1919