Archived

This blog has been archived and will not be updated further. For more IT Services blogs, see the front page.

Posted in Uncategorized | Comments Off on Archived

A short guide to SEO

Search engine optimisation (SEO) is the process making your site as visible as possible in search engines. SEO is by no means an exact science, as search engines such as Google do not reveal the details of the algorithms they use to calculate the ranking of search results.

There are various things you can do to improve your site’s search engine ranking. These break down into two distinct categories: things you can do to your site and promoting your site in the wider web. First though, you need to decide what search terms you wish to be highly ranked for.

Highly visible for what?

Every search engine result is based on someone searching for a particular term. Any effort to promote your site in search engine results need to target a particular set of key terms for which you wish to be highly ranked. How well you will be ranked will depend on how common that term is. For example, if your name is John smith, you probably don’t stand much chance of being on the first page of results for ‘John Smith’. However, if you are John Smith working in Immunology at University of Oxford, then you would hope that a search for ‘John Smith Immunology Oxford’ would return your site fairly highly.

You need to select a set of terms which are relevant to your site which you would like to find your site when doing searches for these terms. If your site is about you and your academic work, then these terms would include your name (in all common combinations, eg. Joe Bloggs, Joseph Bloggs, etc.).

What you can do to your site

The most important thing to do to your site in terms of SEO is to put the terms you have selected in places where search engines can find them and where they will be given most weight. Here are a few tips for doing this:

  • Search engines can only read text, they don’t see images. Search engines judge images based on text attached to the image (e.g. an alt attribute or title attribute) and text near the image (such as a caption). It is therefore very important that any text within images is also provided in text form (most commonly in the alt attribute). If your site consists mostly of images which don’t have any text associated with them, your site will be almost invisible to search engines.
  • In terms of judging what a web page is about, search engines generally place highly value in the title tag for the page, headings within the page and content towards the top of the page. Therefore you should make sure that these elements contain key words (note: the contents of the title tag is not visible on the page, but is often displayed at the top of a browser window or tab, when the page is minimised, etc).
  • Web pages contain various ‘meta’ tags which tell search engines information about the page. There are various meta tags, the most relevant to SEO being the keyword and description tags. The keywords tag allows you to list keywords you consider relevant to your site. The description tag allows you to provide a short description of your site. This is usually just one or two sentences. Like the title tag, these are not rendered to the page, though the content of the description tag often shows up in search result listing. These metatags are your chance to tell search engines what your site is about.
  • Make sure key content is not dependent on JavaScript. Some search engines may not index content rendered by Javascript. One good way to test this is to turn off JavaScript on your browser then view your site. Any content that is missing in this state may not be visible to some search engines.

Consider video content

There is significant anecdotal evidence to suggest that having video content on your site significantly improves your search engine ranking. One reason for this is that some search engines consider length of stay on a page as a significant when ranking pages. Video content tends to encourage users to spend longer on the page by providing content to watch. Another factor is that users are more likely to link to video content. To a large extent this comes back to providing quality content that will engage users. The people have spoken: they want video content. Search engines are also aware that users like video content, therefore the presence of video content on a page boosts ranking in many search engines.

Promoting your site

Although there certainly things you can do to your site technically to improve your search engine ranking, one of the main factors in search engine ranking is out of your control: other sites that link to your site using relevant key words. One of the main ways in which search engines decide what your site is about is what the Web at large thinks of it. In other words, the site that is linked to by the most other sites using the word ‘badger’ in the link text is most likely to be the first result when you search for ‘badger’.

Just because this is out of control doesn’t mean there’s nothing you can do. There are many ways in which you can encourage other people to link to you. The main way is to have good quality content. People won’t generally link to a site unless they value it in some way. This could be because they like you as a person, but it is more likely that they have found the site useful, either because of it’s functionality or it’s content. It is also good to update your site regularly. if your site has been linked to for the purposes of bookmarking, if your site is not updated then this linked may later be removed.

SEO is really only a piece in the larger jigsaw of discoverability. In the past, Search engines were the main way that most people came to most sites. The growth of social networks has changed that. Links from social networks can be a major source of traffic, even to the point where small sites can be brought down by too much traffic having been mentioned by a high profile Tweeter (for example, Stephen Fry frequently crashes sites that he tweets: http://www.techradar.com/news/internet/how-stephen-fry-takes-down-entire-websites-with-a-single-tweet-674170 ). This is unlikely to be a concern most of the time, but certainly you can get a significant traffic to your site by promoting it through networks such as Facebook and Twitter. This is also likely to have a knock-on effect on SEO, as a small percentage of those who visit your site may then link to it.

It is also worth making some effort to link your offline contacts and profile to your online profile: mention your site to people, put a link in your email footer, on powerpoint slides and biographies for conferences etc. Also, encourage your offline contacts to link up with you online.

‘Blackhat’ SEO

Techniques have been developed in order to ‘fool’ search engines into ranking sites higher than they otherwise would. These techniques include things like ‘link loading’ – the practice of putting up pages with multiple links to the same sites using desirable search terms. Search engines take a dim view of any attempt to try and distort their results (as the job of a search engine is to provide an accurate picture of actual content on the Web). Usually search engines take action to minimise or eradicate the effect of such techniques. In some cases search engines will go so far as to block sites from their search results. Using ‘cheat’ techniques that search engines are likely to disapprove of is not recommended, as most techniques of this nature will quickly stop working once search engines get wind of it. At worst, your site may get blocked. If your site gets blocked by major search engines, then the site will become virtually invisible (and you don’t want that…)

Summary

To summarise, here are some top tips for SEO:

  • Provide high quality, useful content that is worth revisiting and linking to.
  • Decide on the keywords by which you wish your site to be found.
  • Use your keywords prominently in the site (headers, title tag, meta tags, etc.)
  • Consider providing video content as this is highly valued by users and search engines.
  • Promote your site through your networks and communities, be responsive to questions and comments.
  • Don’t try and beat the system, like Vegas, if you try and cheat the house, you’ll be out on your ear.

Further information

Posted in Uncategorized | 3 Comments

Selecting css references based on device capabilities

I’ve been tinkering around recently with a set of stylesheet references which aim to point devices to an appropriate set of stylesheets, based on the capabilities of that device.

The best way to do this is usually device detection before serving the page, however this is often not an option for small-scale sites, so I’ve tried to come up with a workable set of stylesheet references which will do a similar job.

The example I’ve included here only deals with the selection aspect, deciding what level of styling to include in each stylesheet file is whole other can of worms, and will vary from site to site.

Here’s what I’ve come up with so far:
<link media="all" href="styles/basic.css" rel="stylesheet" type="text/css"/>

<link media="print" href="styles/print.css" rel="stylesheet" type="text/css"/>

<link rel="stylesheet" type="text/css" href="styles/smartphone.css"
media="(min-device-width: 320px) and (max-device-width: 764px)"/>

<link  rel="stylesheet" type="text/css" href="styles/full.css"
media="screen and (min-device-width: 765px)"/>

<!--[if gt IE 4]>

<link media="screen" href="styles/ie.css" rel="stylesheet" type="text/css"/>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1" />

Here’s a  test page indicating which css files  are currently being used by your browser. All the stylesheet files are listed in the html, those files being referenced will appear in red, those not referenced are ‘hidden’ white-on-white.

This arrangement is based on a principle of progressive enhancement, starting off with basic styling for all devices, and progressively introducing further styling approporiate to the device.

Let’s talk through the stylesheet links one by one:

The most basic stylesheet basic.css is applied by all devices:

<link media="all" href="styles/basic.css" rel="stylesheet" type="text/css"/>

The next step is to include a reference to smartphone.css which would provide some advanced styling for small screens:

<link rel="stylesheet" type="text/css" href="styles/smartphone.css"
media="(min-device-width: 320px) and (max-device-width: 764px)"/>

I’ve used the min-device-width and max-device-width media queries to specify that the smartphone.css should only be referenced by devices whose screen is wider than 320px and not wider than 764px. There’s a bit of guesswork and generalisation going on here, but I think that’s a reasonable rough definition of a small, smart device.

Next I include a reference to full.css which provides the full styling for the site for devices with larger screens (desktops, laptops, etc.):

<link  rel="stylesheet" type="text/css" href="styles/full.css"
media="screen and (min-device-width: 765px)"/>

I’ve used the max-device-width media query to  specify that full.css should only be used by devices with screens wider than 765px.

Here’s where the trouble starts though.  Firstly, Internet Explorer <= 8 doesn’t understand media queries, therefore at this point IE users are only going to get basic.css (IE, don’t you love it *sigh*…)  To get around this I make use of the IE-specific if clauses to point IE>4 to ie.css:

<!--[if gt IE 4]>

<link media="screen" href="styles/ie.css" rel="stylesheet" type="text/css"/>
<![endif]-->

This is a reference to ie.css which will only be used by Internet Explorer 4 and greater. ie.css then imports the full.css stylesheet (you could also include any IE-specific css here).

The problem with this method is that IE mobile may now be referencing full.css, which we don’t want.  Someone mentioned to me that some versions of IE mobile identify themselves as IE4 (hence my specification of >IE4), but I haven’t confirmed this as yet.  If anyone knows how to avoid IE mobile from referencing a stylesheet, I’d love to hear about it in the comments please…

A further problem is that some desktop browsers seem to reference both the smartphone.css and full.css files.  This is troubling as if the browser does understand the media queries, the two are mutually exclusive (the device-width is either less than or greater than 765px). If the browser doesn’t understand the media queries, then I would expect the browser not to reference either stylesheet (as is the case with IE).

This requires further investigation but as it stands, though worryingly inexplicable, the behaviour is not too distressing as in practice any styles from smartphone.css which are inappropriate for larger screens can easily be overridden in full.css.

The final line in the example  is concerned with setting the initial zoom correctly on zoomable devices  such as iPhones:

<meta name="viewport" content="width=device-width, initial-scale=1" />

This line ensures that  the page is initially loaded at a scale of 1:1.

As you can see, this example is neither a fail-safe or complete solution, but it may be a useful starting point for some, and I’m also hoping that by posting it, I may get some help with filling in the gaps..

Posted in Uncategorized | 2 Comments

Hiding a Legend (tag)

There’s a common practice in web design of hiding certain pieces of information on the page that are useful in a non-visual context (for instance in screen readers used by blind users), but is somewhat redundant in a visual context (i.e. having a heading saying main navigation above a nav bar).

The standard(ish) technique for hiding these items is to position such items off-screen using CSS styles like this:

.hideMe{

position: absolute;
left: -9000px;
top -9000px;

}

This the places the element way off screen and out of the main flow of the layout (because it’s absolutely positioned).

I’ve recently been trying to do this to a legend tag, but have had difficulty getting it to work in Firefox (and usually it’s such a well behaved browser…)

The problem seems to be that Firefox writes some very strict style rules for the legend tag in it’s inbuilt styles, using many !important declarations. In theory you should still be able to override !important default browser styles with an !important declaration of your own, i.e.:

.hideMe{

position: absolute !important;
left: -9000px !important;
top -9000px !important;

}

In practice however, this doesn’t seem to work.

Apparently this is down to a special treatment that Firefox gives the legend tag. Bug or feature? You decide…

So what’s the work around?

One solution is to use the display: none style, but since many screenreaders correctly interpret the rule, that seems a bit pointless, as you’re hiding it from the people you wanted to provide it for; may as well not have the tag at all…

The work around I’ve come up with relies on the fact that the ‘special treatment’ of the legend tag doesn’t extend to margins:

.hideMe
{

/* hide the element off screen (nb: this won't work for legends in firefox) */

position: absolute !important;
left: -999px !important;
top: -990px !important;

/*  hide off-screen using margin (works in firefox for legend tags)*/

height: 0px;
padding:0px;
margin-left: -90000px;
margin-top: -900000px;
}

It seems to work, though I haven’t tested it extensively, so may present problems in some contexts…

It’s not an ideal solution, I’d prefer to affect a genuine ovveride to the default styles. It looks like there’s no way of genuinely overriding the position style on the legend tag in Firefox, but if anyone know different please let me know…

Posted in Accessibility, CSS | 2 Comments

Accessibility 2.0 Conference

I attended the Accessibility 2.0 – A million flowers bloom Web accessibility conference yesterday. I was under the impression that it was about accessibility in Web 2.0, though it seemed a little more general than Web 2.0 to me, but useful nonetheless…

The speakers were all very interesting, there were no duff presentations (which is unusual, there’s usually one…). I’ve picked out a few key points from the day that stuck out for me:

This ‘disabled minority’ lot aren’t that minor

1 in 7 people in the UK have a hearing impairment. I’m not sure of the comparable statistics for other disabilities such as vision impairment, motor difficulties and cognitive difficulties (I did have a quick Google, but couldn’t find anything) . However, it seems likely that a large section (if not a majority) of the population has or will have an issues which could inhibit their ability to use the Web. which leads me to:

Accessibility is just another design consideration

This is not a new concept, but was very well presented by Mark Boulton, who emphasised the importance of considering accessibility from the start of a design process. This really emphasised that accessibility is not an additional or optional feature, neither can it be addressed at the end of the project. Accessibility should always be considered because it is simply a part of getting a Web project to work properly, and it must be considered from the start because it’s often impossible to achieve retrospectively.

There’s some cool stuff in HTML 5 and WAI ARIA

HTML 5 and WAI ARIA are both draft specification from the W3c; HTML is a new generation of HTML for today’s interaction-rich Web and WAI ARIA will provide a way to make Web content and Web applications more accessible to people with disabilities. Both of these will much easier to create interactive, media rich Web applications which are accessible. My main concern was ‘when are we going to be able to use this stuff?’ Obviously both specifications are still being drafted, but my greater concern was when we can expect these specifications to widely implemented by the major browsers. I was fairly encouraged with what I heard; it seems that there is already quite a bit of support for sections of both specifications in the latest versions of most browsers. There is still the issues of legacy systems – Internet Explorer 6 is still stubbornly hanging around like and unwanted house guest who will not leave. Perhaps once these emerging standards in place that reflect the 21st Century web, it may be time to scale back design support for browsers that do not support these standards? I would certainly support that in principle, but in practice this may prove difficult in some circumstances…

There’s deaf and there’s Deaf…

Lisa Herrod made an interesting distinction in her talk between those who are big D Deaf and those who are little d deaf. Big D Deaf are those who are deaf from an early age, identify with the deaf community and who’s first language is sign language. Little d deaf are those who lose their hearing later in life, do not identify with the deaf community and who’s first language is English (or any other spoken language, for that matter…) The key distinction in terms of providing accessible Web content is that text transcription and descriptions of audio content may be appropriate for the little d deaf, but is of little use for the big d deaf, for whom English is often a second language (after signing) and who’s mode of communication is primarily visual.

Mobile is where it’s at

There was much discussion about how to make Web content usable and accessible on mobile devices, and how to make mobile devices themselves accessible. there is currently a trend towards of convergence of devices such as phones, pda’s, mp3 players, etc. The resultant explosion in mobile browsing makes the old assumption that everyone is going to be accessing your website on a desktop computer on a fast connection and interacting with it using a mouse in a point-and-click fashion rather quaint. Given that fewer and fewer assumptions can be made about how your Web content is going to be accessed, the principles of accessible design become more relevant by the day.

Posted in Accessibility | Tagged , | Comments Off on Accessibility 2.0 Conference