Website Review: Web Design for Idiots

Let’s start at the top of the page – the title. In this particular example, the very first word has a typo (spelling mistake) in it. When any individual page needs to focus on hitting keywords to maximise it’s Search Engine Optimisation (SEO), then mis-spelling one of them in the title, unquestionably the most important part of the page in this respect, is unfortunate. Sure, the word “contest” is mentioned elsewhere in the page, but the page would have ranked higher for that particular keyword had it been mention in the title too.

Design is all about subtlety – the varying font styles on this page are anything but subtle. Including the font styles (the font face, size, weight, etc) held in images as well as textual content, I can count about 11 differing versions. Some have different font face, some different colour, some in block capitals (more on that in shortly), some underlined which aren’t links, and lots with different sizes of text. Here’s a screen shot (click to enlarge):

Screen shot of the "Web Design for Idiots" website

Let’s walk through that cacophony of styles and see what else we find.

1. This is marked up as a level 1 heading, perhaps indicating the title of the site, which is good if this was an index page. However, number 7 later on, is also marked up using a h1 and as this is the main focus of this specific page, then the top website title should be demoted to a level 2 heading.
   You can also just see that the height of the element is a touch too small, as the bottom of the “g” is missing. It’s questionable as to whether this last word really needs to be wrapped onto a new line. If the author was unaware it had, then this may explain the incorrect element height. Arial, 20px.
2. Part of the banner image that spans the whole width. Couldn’t find out what font this is, but the glyphs (letters) themselves are varied in that they appear is small-caps for some letters (the “g” and “n” just out of the screen shot), and standard lowercase for others.
3. Still part of the image, this stylised text looks tattered and torn doesn’t help with subtlety. The author may have wanted to emphasis the word “Idiots” over “Web Design” with the increased font size, but that would seem illogical to me. Why call your readers idiots? They have arrived at your site to look for tips and advice on designing a website, not to be insulted or put down.

4. “Using appropriate language for your target audience is crucial”

   Uses the same font-family as number 2, but in a smaller size. This seems like a tag-line for the site, yet the wording is half different, half repetitive of the tag line we saw in number 1.
   Using appropriate language for your target audience is crucial; a website which is there to help others needs predominantly to appear to be hand-holding and caring. Out of screen shot, it also uses the word “Newbie”. Those who are looking for web design advice may not immediately understand what the word “newbie” means – so they arrive at your site, get insulted, and then they aren’t sure if this is the exact site for them anyway.

5. The navigation menu. Lack of a capital “I” in the third link. Inconsistent use of capitals in the 4^th and 6^th links. The links have tool tips via the title attribute when you hover over them, but they say exactly the same as the anchor text. If you’re going to provide additional information, make it different; make it actually give more information about where that link will take you. Bold, white, 11px Verdana on a black background.
6. 12px Verdana. Verdana is a bad choice of font to use for main body text, as the size of the individual glyphs is generally bigger than their counterparts in other fonts. This makes achieving correct line heights, padding and margins tricky, as what you set for Verdana users will look odd for those without the Verdana font installed.
   The “Home”, “Contests” and “Site News” are links, but you knew that, didn’t you? You didn’t? Well, I can understand why – there’s no visual clue that these could be clicked on to take you to other parts of the site, not all breadcrumb navigation allows it. When hovered over, the text turns a light grey, which some users with visual problems may be unable to discern from the white background. It’s good that the breadcrumbs do link elsewhere, it just needs to be styled so it doesn’t look like the plain text used later on in the page.

7. “This is like trying to get someone’s attention by going up to them and shouting at full volume right in their ear – it’s not subtle and it’s rarely appreciated.”

   This is apparently the page title – correctly marked up with a level 1 heading and ripe for putting in keywords. Let’s see. “Contest”. Yes, that’s an important word for this page, but as it’s surrounded by asterisks, it’s unlikely that anyone would go to their favourite search engine and type in “**Contest**”, so we’ve potentially lost the benefit. It’s also in upper-case for some reason, maybe to attract more attention? As this is part of a level 1 heading, then styling it via CSS to attract visual attention would be better than putting it in capitals and having it read out letter by letter in some text-to-speech user agents.
   What else is there? “It’s your turn!!!” This has two issues – firstly, there’s no keywords in there; the phrase is unlikely to be something that someone searches for hoping to find a page like this. Secondly, the use of multiple exclamation marks is considered a poor style of writing except in some very informal works, of which this site is not one of them. It wouldn’t, for instance, be surprising to have a flashback to the mid-90’s and expect to see this line start blinking or scrolling off the side of the screen, such as the amateurish look of it.
   Rarely do multiple punctuations need to be used – even in the common occurrence of “?!”, then a single character known as an interrobang should be used to be typographically correct. Arial, 22.8px, some capitals, some not.
   An example title might be something like “Contest to win 500 business cards and fine art prints”. This loads keywords into it, tells the user exactly what the page is for, and is kinder on the eye.

8. Back to main body text (12px Verdana), but this time it’s bold. If you want to attract subtle attention, then styling the paragraph to have a grey background, slightly darker grey single pixel border, and margins on the paragraph would be better.
   

   This is an example of drawing attention to something important, not critical, whilst not needing to use block capitals or any other textual emphasis.

   This text also still using words in CAPITAL letters in the middle of sentences, which is poor grammar.

9. The Princetown font is used here as part of the image, yet it’s not seen anywhere else on the site. Despite the use of colours to match the banner image at the top (although this seems to use stars instead of the circular drips) this means it just doesn’t fit in; it’s visual noise. We know this page is a contest, there’s no call for action with this image, so why have it?

10. “Don’t just talk about farming, talk about farming, agriculture and agrarian produce.”

    It’s worth noting that although this is a level 3 subheading, the actual start of the sentence is in the preceding paragraph. We’ve got black capitals and multiple punctuation marks to attract attention. This is like trying to get someone’s attention by going up to them and shouting at full volume right in their ear – it’s not subtle and it’s rarely appreciated.
    The name of the site could also be emphasised, probably best through italics: “First Web Design For Idiots Competition” – we’re also putting in a synonym for our keyword “contest”, in case some people search for the word “competition” instead. Don’t just talk about farming, talk about farming, agriculture and agrarian produce (adapted from a quote by Craig). Arial, 16.8px, capitals, bold.

11. Number 11 is highlighting the use of underlined text, when it’s not a link. As so many anchor texts around the web use the word “this” as poorly as they do for “click here”, then emphasising that word via underlining is a poor choice which will leave users wondering why clicking doesn’t send them to the homepage of the blog. The underlining is also done via an inline style attribute, rather than using a class attribute to keep styles separated from HTML markup.
    This level 2 heading seems to have been used purely to have a larger font-size, rather than be used to semantically structure the document. Arial, 22.8px, some capitals, some not, some underlining.
12. This time colour has been used for emphasis. It’s at this point we realise that it’s due to everything trying to vie for attention that some many varied attempts at emphasis have had to be used. If everyone stopped shouting, then the discussion would flow a lot smoother.
    The “Website Reviews” text underneath is actually another link – so we appear to be styling what should be plain text, and making hyperlinks as plain as possible! There’s really no reason why the link couldn’t have gone into the preceding sentence rather than putting it on a line on its own. The “Email” underlined word below that is, as you might now have guessed, not a link. Verdana, 12px, red, bold.
13. Finally from our screen shot, we come to something that in most cases would be perfect – it’s simple clear, Arial size 12, and emboldened as being part of level 3 sub-header in the sidebar. However, there’s so much else odd about the styles on this page, that this actually looks wrong, indicating that’s it’s been missed out.
    The incidental lack of sponsors to fill this box (only 3 of the six spaces, most outside the screen shot, are filled) is not a good indicator of it being a website that I want to spend my time on looking to improve my web design skills.
    

Summary

In closing then, it’s worth making a disclaimer or two. Firstly, the above comments are a combination of my personal preferences and commonly understood best practises. The site does have some good points, but many of those points, I feel, would have been provided by the core WordPress installation that this site runs from, than anything the author might have done.
Secondly, I don’t claim to have the best looking sites myself, and I know how hard it is to come up with a style that works. Here though, the author has seemingly added more barriers through the use of inline emphasis – capitals, colours, font choices, all of which shouldn’t be introduced at the post or page level. Markup the content semantically, then use CSS alone to suggest how it might look. If all posts and pages are like this, then by making those small changes, your readers will be thankful for it.