RSS Feed

Perfect Websites 1

Phew. There seems to be so many things that can go wrong with a website, it’s starting to stress me out. As a beginner, I had to just tinker with my company website and see what worked, what didn’t, and why. This in-at-the-deep-end approach certainly has something to be said for it – at least we got things done, without months of training for me first – but I am coming round to the realisation that I had, and still have, little idea what I am doing. And that I may have damaged my website irreparably… whoops.

Today I ran the website through (a free trial of) SILKTIDE. This is truly excellent, I must say. It gives a full report on “how good” your website is – not just search engine ranking chat, or usability, but everything. It was certainly an eye-opener. So I thought I would blog about some of the things you really must consider, and how to find out more about them, in a do-as-I-say,-not-as-I-do style ūüôā

A LOT of these things are covered in Silktide’s report, so definitely definitely try that first and work from there. They have help pages as well. But I am trying to condense some of it into a user-friendly Blog.. hope the nice people at Silktide don’t mind!

Let’s start with…
Usability. aka Will Web Users Love You?
It is crucial that people can USE (and want to use) your website for whatever it is intended for. So think to yourself – what is it intended for? Do I want to give people information? Make them contact me? Etc. If a customer cannot do what they want to do on your website, or access the information they require, they will go to a competitor. A lot of these points actually overlap with my second area, SEARCHABILITY, because search engines love websites that customers love to use. Simple.

Content: An easy starting point. Make sure your website is up-to-date and relevant, with appropriate information, and ensure there are no errors or omissions. It is possible to take a page offline while you work on it, so that users will not be confronted with a half-page of content. Silktide will score on “content” – quite simply, the number of pages with a substantial amount of text.

Headings and Alt Tags: If you are posting images – and you probably should be – remember to include ALT tags (this stands for “alternative text” and is the text that will be displayed if something is wrong and the image cannot be displayed – it is essential for images) and TITLE tags (this is the “title” of the image which will display usually when the mouse hovers over the image. Title tags can also be used on pretty much any element on your webpage, and can be used to squeeze more all-important keywords in – when relevant.) These are designed to aid people with difficulties, so do try to use them for what they are intended to be used for. The ALT tag should describe the image and the TITLE tag should be a suitable title and maybe short description.
Example:

<img src="http://www.website.com/folder/train.jpg" title="The F500 Train - Click for more details" alt="picture of the f500 Train, 2010" />

Links should also have TITLES so that people can see where the link will take them if they were to click on it.
Remember, using these attributes properly and effectively will increase your website’s usability for humans, and also its searchability for web spiders.¬†Some more useful information on these attributes.

External and Internal Links Websites with broken links (both to external sites and to pages within your own web domain, such as the Menu) are useless to your visitors and to the search engines trying to rank your page. There are sites which will run your site through a wee checker, looking for links which go nowhere. Remember, this won’t point out links that you no longer *want* to direct people too, so don’t neglect a manual once-over. Google won’t love you if you link to rubbish websites, frankly.
Previously I have used Xenu to check for broken links, but for some reason this no longer works. Google “broken link checker” to find various options – I recently tried this one which was fine, and the free trial of Silktide should show you as well. Once you find them, do remember to actually fix them ūüôā
As for internal links, Silktide says: “Pages which are linked to frequently and prominently are given higher weight in search engines, and are more likely to be visited by users. You should ensure that your most important marketing pages rank highly here, or reconsider your internal linking strategy.” Good point.

Contact Details: Sounds pretty obvious, but it’s amazing how many sites make it difficult to contact someone. Make sure your contact details are on every page, are easy to spot, and do work. Enquiry forms are good if you don’t want your email address publicised all over the place, but I personally hate them. Don’t ask for more information than you really really need if you do use a contact/enquiry form. Also, ensure you provide more than one way for people to contact you.

Speed: As most users will make up their mind about your website (i.e. whether they like it or not) within ten seconds, you would hope that they will actually *see* your site within that time. If the load speed is too lengthy, people will give up, and you would rather they didn’t do that. Find your website’s (or any website’s) load speed at this cute wee site. And it also gives you an idea of what a reasonable speed would be.¬†So how do you get your pages to load more quickly? Image size is probably the greatest factor, as these take a while to download – especially if they haven’t been appropriately saved for web use.

Readability: Silktide analyses the content of your website and delivers a “reading age” – the rough age at which people would be able to read all of the words on the page! The ideal (because, presumably, this is the average reading age) is apparently 14, so if it returns an age higher than that, you should think about simplifying the language and reducing sentence length. People do find it harder to read on a computer… and it can be accessed by anyone. So don’t alienate potential customers by making your content super long and wordy (like this Blog, hmm.) Interesting wee article here.

Content Keywords: Silktide asks for a list of keywords from you when it checks your site, and reports a score based on how well “emphasised” those keywords are. It also guesses, from your page titles and other content, what other keywords you might have wished to emphasise, and then tells you whether you do or not. Very clever!
This is one of the key elements of Search Engine Optimisation – making sure that the search terms your customers use to access your sorts of products and services (what ARE the words and phrases they use? Are they the same as what you would use?) are mentioned in your website enough times to rank it highly in the search results. Basically. Without detracting from the readability of your content. Sounds straightforward, but it is harder than it seems. Tips include: using Google Keywords to find out what people are searching for, trying out terms on Google (and other search engines – but Google is used most by far), including relevant search terms within alt and title tags, as well as within your metadata (see below.)

Link States: Your stylesheet should include formatting for various link states – it should be clear, for example, that a link is indeed a clickable link (different colour, underline, perhaps even bold), then a different format for when it *has* been clicked. Silktide also suggests a different format for hovered-over links and also focused links – this applies particularly to users with access problems, who may only have a keyboard to “focus” on the link.
These can be coded in the following way:

a:hover { text-decoration: none; }

a:visited { color: #808; }

a:focus, a:active { color: #B00; }

Spelling: Again, fairly obvious, but do check your content is all spelt correctly. Sadly my Silktide score for spelling was poor, but they had included every industry term and proper noun in the test, so I do know deep down that my spelling is fine. Shouldn’t make too much difference in terms of ranking, unless you are misspelling your keywords!

Image Usage: As discussed, do make use of images but make sure you are using them wisely and they are not taking up unnecessary space and download time. Make sure they are good quality but web-friendly, accessible (with alt tags) and Silktide recommends defining sizes for all images. Sizing is a whole Blog post in itself, once I work out what the best practice is for making websites work on all browsers, screens, devices, resolutions etc but still stay in the correct location!

Social interest: Silktide gives a score for “social interest”, that is, how frequently pages on your website have been shared on Facebook and Twitter (since these are the most popular social networking sites.) This is a measure of how much people – literally! – “LIKE” your website/pages within it. Don’t worry about this too much, as not every business or project requires social media attention; it might not be appropriate.
You can make it easy for people to Tweet a link to your page or to Like you on Facebook by having these features installed directly on to your page. The code (get it here) will look something like this for a Facebook LIKE button (the href doesn’t have to be a Facebook page…):

<div id="fb-root">
</div>
<span style="font-size: 14px; line-height: 20px">Like us on Facebook<br />
</span>
<script src="http://connect.facebook.net/en_US/blahblahblahblah">
</script>
<fb:like href="http://www.facebook.com/yourfacebookpage" send="false" layout="button_count" width="150" show_faces="false" colorscheme="dark"font="arial"></fb:like><br />

And this (more straightforward) for Twitter:

<p>Tweet This Site<br /><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="Username">Tweet This</a></p>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

 


Visual interest: Users need to be attracted by your homepage, and also by the other pages on your site. Silktide gives a score on “visual interest” based on how different each of the pages on your website are. This is a subjective element, it can’t really be measured by a site like Silktide, and a consistent look and feel is usually advocated by web design types. So just make sure it is pretty and set out well, with matching colours, readable font, and so on, but retaining useability and an obvious layout.

Printability: If there is information on your website that your users may want to print – this may not apply to every page – then consider the printability. Things like graphics and colours are great if a page is just being viewed online, but if printing is desired then an alternative stylesheet should be used.
Silktide shows how this might be done in a webpage:

“You can implement print styles in many ways, including attaching a specific stylesheet:
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
Or use the @import at-rule inside a stylesheet:
@import url("print.css") print;
Or use the @media at-rule inside your stylesheet:
@media print {

… styles go here …

}
It isn’t enough to just define styles however. SiteBeam must detect that the styles which have been defined for print are actually being used. An empty stylesheet, or one that doesn’t affect the page will not affect this score.”

So what WOULD the stylesheet for a printable page require? Check out this handy guide!

Sitemap/Site Navigation:¬†Make sure people can navigate your website: ask someone who hasn’t seen the website before to click around and let you know how user-friendly the menu bars etc. were. Analytics also has a feature allowing you to see where people click to the most. A website should have a sitemap on it somewhere as a fail-safe: if users find themselves in a confuddling mess of links and menus, they need to be able to see a very clear map of where on earth they can go or have been. It will look like this when they click on it (all of these would be links to the relevant page):

  • Home
  • About Us
  • Products
    • Product 1
    • Product 2
    • Product 3
  • Services¬†
    • Service A
    • Service B
    • Service C
  • Testimonials
  • Contact Us
    • How to get here

Test all browsers/devices: Your website and pages in it will look different depending on which browsers you view it in, which devices you use and the screen resolution. It is worth testing your website to make sure it looks how you want it to look on each of these – and your users can see what they need to see. If you have Google analytics installed then it should provide data on the most common ways your users are accessing and viewing your site.

Above the Fold: Quick tip – have all the reallllly important stuff at the top of your webpage, because users rarely scroll past the “fold” (bottom of the screen.) Again, bear in mind different screens/browsers/devices will cut off the page at different points.

In the NEXT BLOG: We move from user-friendly web design tips to Search-Engine-Friendly web development tips!

Advertisements

About fruitfulcommunications

Work in marketing and customer service. Enjoy yoga, eating out, banter, wine and theatre. Live in Merchant City, Glasgow.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: