Search Engine Optimisation

Now there are many many SEO and general Internet Marketing myths that are floating around, and have been since the dawn of time. (Ok, dawn of the internet). Today I want to take a look at 15 of the most annoying myths, these are all a complete pile of poop.

Generally you will be told these via huge adverts on a website or over the phone when someone is cold-calling you to try and sell you a service – beware of these commission monkies.

So the 15 Myths which are a load of <insert naughty word> are:

1. We’re endorsed (or work with) Google / Bing / Yahoo.
2. Google Analytics spies on you, don’t use it.
3. Your PageRank (PR) is your search rank (or is highly related too).
4. You should have as many meta tags as possible.
5. Having country specific site’s (in different languages) creates duplicate content.
6. URL’s rank higher if you end them in .html
7. Trading (buying/selling) links increases search rank.
8. Linking to google.com will help your search rankings (or PR).
9. SEO is a one-time activity (or once per year).
10. SiteMaps aren’t for users.
11. There is no need to link all pages, spiders will find them via your XML sitemap.
12. Placing links in tiny (almost invisible) text at the bottom of  a page is effective for ranking.
13. Using an submission site to X thousand “search engines” is good for site ranking.
14. Hyphenated domain names are amazing for SEO.
15. Keyword Density = High Rankings

_{This post is sponsored by UKHost4U the UK’s premier hosting solution.}

So you’ve designed a website, or had one designed for you … you’ve tested it and it functions correctly … but something is missing – your website isn’t CRAP!

That’s right, your website should be as CRAP as possible!

What is CRAP?

All design, no matter whether it is print or online really should be CRAP. The word CRAP refers to the 4 major principles of design; Contrast, Repetition, Alignment and Position (or proximity).

Each of these principles has an effect on your design, at least to some extent (and never the same extent on two projects). CRAP is an easy to remember word and if you can remember the main points of each principle then CRAP will help guide you into a more attractive design (than if you don’t make it CRAP). Now, as with most things on the web CRAP-ness began as offline design principles – however, I believe they are just as valuable online as offline.

Creating Contrast in Design

In design you should always avoid 2 or more things being “similar” – this is to say that (for example) if you have headings and text you should always make the difference clear. This means not making them a similar font size, and as with in the case on this website the same colour. The main point here is that If it isn’t the same make it look different a fairly simple idea

So how do you create differences?

• Different Font Styles & Font Sizes
• Different Font or Background Colours
• Underline or Border an Object
• Re-Align an Object
• Space Your Objects

So you’ve got some ideas on how to create contrast on your website, but that isn’t enough because I bet your thinking of some real world examples on your own website(s) and need some help with this. So let’s take a look at some real world examples of contrast on the web.

Emphasis of Interaction

Now there are many ways to signify emphasis of user primary interaction, or “calls to action” as they are more widely known. However, I want to look at the worlds number 1 online user interaction (at least in my view) …. Google

As always Google have kept design to a minimum and user interaction to a maximum. It is clear here what the call to action is… to search! so the buttons stand out clearly and show the user where to click. When you look at a wider view you can see navigation at the top of the screen on both the left and right but this isn’t the main interaction and so is all but ignored by most users.

Highlight Your Notices

Contrasting and highlighting can be very important when things go wrong. We’ve all seen the windows pop-up errors that appear all over the place (even on the high street) but online error messages are vital. If you are filling in a form online, it gets rejected and you can’t find out why easily then you will probably stop filling in the form, for website owners this mean’s you’ve lost a conversion!

Below is an example of a simple error message standing out from it’s form.

Notice how the red border of the box makes the error stand out, this is emphasised even more so by a light red background differentiated from the page background this also makes the text and therefore error stand out.

Repetition of Elements

Repetition of design elements throughout your website(s) creates not just continuity but also an air of professionalism – chopping and changing makes for a second rate interface. Put simply by repetition in this case I am simply talking about “being consistent” in how a site looks, feels and how elements function.

Now generally you will have noticed repetition subconsciously relating to brands, with brands the repetition is dictated in style by brand guidelines. Online this can be a little harder to control for any business, however it is not impossible. The best way to ensure consistency is simply to employ someone as the “controller” or “manager” of your website (or group of) – this will ensure a continued style of user interface.

One of the most consistent of online brands is … once again … Google. Can you see how the below or consistent in design?

Aligning your Content

This is one of the more simply explained CRAP attributes of any design. We all know of the 3 major alignments (mainly because we’ve all used them on Microsoft Office); Left, Centre & Right. The rule of thumb is simple; Always think about alignment, never randomly align. This is to say as with the above continuity you should always follow your own rules for alignment of elements (and this includes text obviously).

Correctly aligned elements can be used to guide the user through a document or web page, just as incorrectly aligned elements can harm the user experience (and make people turn away in many cases). Users naturally will follow a hard line of an element, so if you are left aligned this is where the user will focus (on the left), and the same with the right. The next natural occurrence is that humans will also follow pages from top to bottom in the search for what they are after (generally skimming content), a more natural flow is from top left to bottom right (as with print on an A4 Page).

Now, do a Google Search … you will see all text is left-aligned, very little content (if any) is otherwise aligned.

Positioning is Key

Proximity of elements, sounds a little like rocket science… but it isn’t. Quite simply I am talking about placing related elements close to each other (primarily navigation/controls). Mentally, things that are positioned closer to each other are subconsciously seen as having a stronger relationship that those far apart.  However, being close doesn’t always mean related, this can difference is easily shown by a breakdown header or some other break point.

A clear example of this (once again) can be seen on the latest Google SERP update.

As you can see Google have added a secondary navigation tool bar to the left of the results (primary tool being the search bar). The proximity of this navigation to the results shows these are related items. Also you can see a clear horizontal rule between the top links and bottom, this shows a split in relation. The lower links are secondary tools for a user to use (my guess is they may look nice but aren’t often used).

Following the rules of being CRAP will make for a better website & better user experience all around.

So is your website CRAP? Let SEOAndy know via twitter (@andykinsey)

Your navigation looks just like the one on your competitors website… only yours is more “user friendly”?

Well I’m sorry but the chances are you are speaking from your bum… for a few reasons

I want to make clear that some navigation’s are simply amazing I highlight some examples during this post.

1 – Going Over The Top

Now as all designers will know, especially if you’ve worked in an agency format… clients will always ask for you to “photocopy” something from a competitors websites. Now right away this has always sent me running for the hills, if only because each website has a unique audience and so called “photocopying” of in this case a navigation can lead to scary results. In this case I also suspect the client stakeholders have said “make it user friendly for our OLDER audience” … the designer has gone over the top with this idea and it is now not user friendly. So let’s take a look at 2 examples, one has a superb navigation and the other … well that is just scary.

Waitrose vs Wiltshire Farm Foods

Now, both of these two websites are aimed (in my view) at similar audiences, the elderly. Now with this in mind I guess Waitrose  have decided to go all out and make it so user-friendly… but wait wait, the over size text looks hideous, the almost zero contrast of grey and black is just stupid (what if someone has blurred vision?) – oh and lets not forget the scruffy coding! Now compare Waitrose to Wiltshire, WFF has the large text, the text contrasts well with the green background … oh and lets add to this the navigation is so much clearer WFF doesn’t use a drop down system … that is how intuitive the WFF navigation is. Oh and although I know I didn’t have too look at the code, it is nice on WWF – well done Headscape (as always – follow @boagworld )

Visit The Websites: Waitrose (www.waitrose.com) and
Wiltshire Farm Foods (www.wiltshirefarmfoods.com)

2 – Death to Flash

Ok my heading sounds a little like I’m itching for a fight from the “flash camp” … truth is I’m not. I have nothing against flash, unless you count I hate it, Search Engines hate it …oh and did I mention it isn’t user friendly. Ok, *deep breath* I don’t hate it as much as some people… I just hate it’s use as a navigation means, as a whole website or to hold anything but multimedia content … using it for special features such as video (see YouTube) is ok though.

I don’t think I need to say much more on flash navigation and how it really doesn’t work … but you will want an alternative… We call this CSS with a lovely mix of JavaScript tools (like JQuery & MooTools). If you want to see some great examples of lovely javascript css navigation scroll to point 2 on this (top) 50 beautiful navigations from Smashing Magazine.

You get the message don’t you? Don’t use FLASH for your navigation!

3 – That is a SITEMAP not a navigation

This point is something an annoyance and can cause all sorts of issues. In the world of design we know that simple navigation is king, so we say have 5 main navigation links – brilliant. We then add another layer to one or 2 links … still good stuff. But arghhh someone has gone over the top and bulked it all out to confuse everyone! … In essence you have made your main navigation into a sitemap – big no no and so anti-user it scares me.

Simple Navigation or Complex Sitemap

Argos, some people will think this is a nice “user friendly website” well ok, it is in some respects. But take a look at this navigation… talk about over the top. Almost 50 sublinks of the primary navigation! Who ever thought this was a “user friendly” idea needs a shot in the head – bit extreme I know.

Let me twist my point to illustrate what I really mean here. From the above you can see it’s over filled, utterly useless on the surface and surely there is a better way of doing this. So let’s take a look at a site where the multi-level navigation works very well and has a real purpose unlike this Argos website. Porsche have taken a multi-level navigation and made it work. Primary (car type) Secondary (model) final layer (car info) … it works, it’s interactive and it is simple.

Porsche Navigation is User-Friendly

Visit The Websites: Argos (www.argos.co.uk) and
Porsche (www.porsche.com)

Now I know there are many more reasons a navigation may not be user-friendly, such as not being intuitive to use. However, I’d like to know why you think site navigation’s don’t work, let SEOAndy (@andykinsey) know your navigation nightmares & also let us see some amazing examples of useful navigation’s.