Simon Langley 2.0

Is there anyone in the whole world that likes IE6? I doubt it! Why? Because it is the most annoying piece of software in the whole world, especially from a web design perspective.

Tables behave very oddly in IE6, especially if you use align=left/right within the <table> tag. If you do choose to do this then be advised that text will wrap around the table like it would do on an image. This can be especially troublesome if you have various tables on top of each-other as they all sit side to side, which will completely destroy page layouts.

Moral of the story, don’t bother with align=left/right/centre, it’s more trouble than it’s worth, use CSS instead.

Once upon a time the only way to get your site spidered by search engines was to manually submit it to the Yahoo directory (come on, in 1997 what other search engines were worth using). Nowadays, search engines are a lot more advanced and don’t require any manual work. This is great, but sometimes search engines can be a little too good at finding things, sometimes things you don’t want finding.

Take the following example… I run a website www.openmeetings.co.uk which I host on a subdomain of this website. I have changed the name servers of the subdomain so http://subdomain.simonlangley.co.uk/index.php  will be shown as http://www.openmeetings.co.uk/index.php as long you access through the site through the latter URL.

Now, whilst this is a cheap way of hosting multiple websites, the one drawback is that there are two versions of every page, but with different URLs. Anyone who knows anything about SEO will tell you that this bbbbaaaadddddd news. Search engines will penalise pages that appear to be duplicated, the reason for this is probably because the content is not original, will be of less use to users and/or is more likely to be spam related.

Up until now (for the above scenario anyhow), it was almost impossible to prevent search engines spidering the subdomain. One way to prevent spidering was to ensure that under no circumstances were links to the subdomain are used. This is fine for static HTML pages, but the second you start using PHP or other server-side scripting, the chances are subdomain links creep in (even for a short time) and as such are spidered.

At the start of 2009 a new method of overcoming this problem was developed and is (apparently) supported by all the major search engines. The method uses a ‘canonical tag’ which sits in the head of you document. The canonical tag tells search engines what the actual page should be, so if (as per the scenario above) a search engine stumbles across a page that differs from the URL in the canonical tag, it will be ignored.

Of course there are lots of other reasons why duplicate content can arise (campaign/tracking codes etc), which I won’t go into here, but this method will work for these too.

To implement a canonical tag place the following code in the head of the page:

<link rel="canonical" href="http://www.mysite.co.uk/index.htm"/>

So there you are!

I’ve heard a rumour that search engines use the canonical tag 95% of the time (who comes up with these stats is beyond me), so it’s not quite watertight, but certainly better than ye olde days.

I run the Newark Half Marathon website for Newark AC and I recently decided to re-vamp it. The old site was looking quite tired and with the 2009 event quickly approaching I thought a new lick of paint was required.

I decided to use WordPress instead of a proper CMS as it is quite a small site.

Here is the updated site for the Newark Half Marathon.

I am currently building a mobile optimised (optimized if you are from the US…) site and thought I would share a few tips and tricks I have learnt along the way. There are not a great deal of sites that deal with mobile optimised page building, so here are my tips:

• Never use tables for layouts!
• Try and keep you coding as simple as possible, avoid inline style, JavaScript and server side scripting where possible.
• Don’t use background images - nearly all mobile browsers will not display them.
• If you want to use rounded corners for boxes then I would strongly advise using Alessandro Fulciniti’s Nifty Corners technique (which is brilliant) - this is supported on the vast majority of mobile browsers I have tested.
• Don’t set a width on your page elements - especially the page wrapper. If you do then the mobile browsers make a real hash of the content. If your pages appear too wide in the browser (this often happens on the Blackberry browser) add the following meta data to the <head> tag:

  <meta name=“viewport” content=“width=320″ />
  
  <meta name=“viewport” content=“initial-scale=1.0″ />
  
  <meta name=“viewport” content=“user-scalable=false” />

• For some reason mobile browsers really don’t like divs that are floated left, try and avoid this if you can, however floating lists seems to work
• Try and wrap text around images, mobile browsers tend to interpret this quite well
• Bulleted lists often get the style stripped out, so if you use list-style-image to set your bullet image don’t be surprised if it does not work. One solution for this is to set the list style to none and insert the image before the text. This way even if the bulleted list is displayed (which on quite a few browsers it will be) at least the image is displayed as well
• Make sure you test your pages on various devices, browser combinations, not just on an iPhone!