I don’t often watch the news these days, I’m fed up with being told we’re all doomed, but today I was glad I did as they covered the story of the launch of the Queen’s new official website.

http://www.royal.gov.uk/

I decided to have a look at it, just out of interest, and I was surprised just how bad it is.

You probably couldn’t find a more prestigious client on earth than the Queen of England, yet whoever was enlisted to build this site should probably be hung drawn and quartered.

So I’ve decided to review it. I have analysed the home page only but most issues would be relevant across the whole website. Most things are critical mistakes with no grey area whatsoever; a few things are my personal opinion. Hopefully I won’t end up in the Tower myself for voicing them……

Visual Issues

The overall look of this website is pretty bad in my opinion. It looks like it has tried to follow the trend of minimal web 2.0 style layouts, with plenty of white-space and clear content, but has failed miserably. It is bland and emotionless, and lacks any kind of depth.
Very little care has been taken in the quality of the images used, and all these little things make all the difference to the visitor in them forming an overall opinion about a website.

For example:
Top blue bar that runs horizontally – This should obviously be a smooth gradient from dark blue to light blue, but since they have incorrectly used a GIF image (which can’t display the amount of colours needed for a smooth gradient) it looks blocky, you can clearly see strips of different blues as it struggles to reproduce a gradient.

The search button on the far right is saved as a GIF, which is correct as it should only need a few colours to display clearly, but this seems to have JPEG compression applied for some reason making it very fluffy; see how this looks when zoomed in:

The small vertical line separators between Contact Us | Links | FAQs etc are also blurry, they should simply be a pixel or two wide, but instead are 4 pixels wide, half of which is blurring.

The 3 latest videos on the right – the mouse cursor doesn’t change when you roll over these images so it may not be clear that they are clickable like normal links are. When you do click them it spawns a popup window, which if you have a strict popup blocker installed, won’t allow these to open. The navigation bar below this also looks awful; there is no need for this graphic to be so fluffy.

Quality of photos - the 3 family sections under these latest videos showing Charles, William and Harry are terrible quality. They have been so overly compressed that they are completely ruined. This is totally unnecessary.

In Microsoft’s Internet Explorer you get horizontal scrollbars even when they shouldn’t be required, which to me always makes a website feel a lot less solid.

The Flash Banner

(Showing the 5 photos across which when rolled over kind of jump out at you)
To me the movement just isn’t slick enough. It wouldn’t have taken much effort to produce something stunning here. You have to be careful when making photos change size in a Flash animation to ensure they stay sharp, and these don’t.
There is actually a glitch with this Flash menu, if you roll your mouse very very slowly up towards the bottom of one of the photos, it will go crazy. Again, simple to fix but ignored.

Technical Issues

The coding of the site

For a start, the XHTML code does not validate. The developers of this site have declared that they have coded to XHTML strict standard, but haven’t bothered to check the code. This task takes 30 seconds.
The Stylesheets do not validate either.

There is no print stylesheet specified. This should be used to control the way a web page is printed. It allows the developer to prevent certain parts of the page coming out on the print, such as menus and any animated areas, and it also allows text size, line spacing and paragraph width to be controlled amongst other things.

Several images on this page have no ALT attributes including the main logo which appears at the top of every page, which is very bad practice. The ALT text is a small piece of text that can be specified to describe what an image is about, only visible to users if the image is missing for some reason.

It is important that all images on a website have a text alternative for several reasons;

1) Some users, possibly because of slow Internet connections, opt to switch off the display of images in their web browsers. Without ALT text the page will not make sense.
2) Accessibility – For those that use screen readers and other assistive technology, images without alt text will be completely ignored, whereas those with alt text will add value to the users experience.
3) Search engines use alt text on images to help assess the pages subject and therefore rate the page more highly if relevant text is used.

Semantic Markup

What it means

Behind every web page are many lines of code which make it display correctly to site visitors. Semantic markup describes the practice of correctly identifying different elements on the screen. A basic example of this is the use of a heading tag. A web developer has two ways of making a headline stand out on a news story on a website for example. One way would be to increase the text size, make it bold and perhaps a different colour on the page (a bit like you might do it in Microsoft Word). The correct way would be to mark the text with a heading tag in the code and then apply a global style telling the web browser how to display headings (i.e. font size, bold, colour etc)

Building a site in this way gives search engines a much better idea about the structure of your page, what content is important and makes it much easier for them to index a site. A search engine will ignore all style information on a page, but it will know that something marked up as a heading is likely to be important.

Where this site fails

The main headline “Welcome to the official website of the British Monarchy”, is displayed as an image where text should be used, or at least CSS should have been used to replace real text on the page with the image. This image also does not have an ALT tag.

No H1 or H2 heading tags are used. These are one of the most important tags in helping Google decide what a web page is about. It is good practice to code using these tags in relevant areas whether you care about Google or not. Another very basic error.

Quick links and other “lists” of links should really be marked up as a list using the unordered list tag.

The main navigation links down the left should really have an underline on mouse over to match all the other links on the page and maintain consistency. Are these small grey links that form the main entry points to the site clear enough for all users? This is perhaps an accessibility concern as they might be hard to read for some users.

Page names

This is a personal preference of mine but I think it is much cleaner to not show the file extension on page names (i.e. the .aspx extension on the example below)

http://www.royal.gov.uk…Government.aspx

For search engines to understand links and value the words used in them they should be separated by hyphens. This also makes it clearer for us humans who check the bottom of their browsers to see where links will be taking us.

No 404 error page

They have just done a complete redesign and restructure of this site so have many links indexed in Google already that have now become dead. These dead links currently show a “page cannot be found” error in your browser, but should use a friendly 404 error page to explain what has happened and to help people find the content they want.

e.g. http://www.royal.gov.uk/output/Page555.asp

There are also links on 3rd party websites (e.g http://www.londinium.com/london/64409.html) that are linking to these dead pages, so users should really be redirected to the new content automatically if they click on these links instead of getting an error page.

Summary

So those are just a few initial thoughts about issues which really should not have crept in to the Queen’s website, a site which should have pulled out all the stops, or at the very least followed the rules of web design which we all strive to achieve as web designers.