Dave Woods - Freelance Web Design Warwickshire

Queen’s website HTML/CSS Review

The Telegraphs Julian Sambles has done an interesting SEO review of the Queen’s new website, so what better way to compliment that review than to carry out an HTML/CSS review of the site.

Firstly I’d just like to say that this isn’t any kind of personal attack on the Queen or the British monarchy, in fact I commend them for modernising their image and presenting this information to the public using media that is likely to be read and used by a whole different generation of people.

However, looking at the site from a technology, usability and scalability point of view there’s a number of things wrong with the website that could have been done differently and would have solved a number of problems that I’m sure they’ll encounter in the future.

Inline Styles

Some content management systems present problems when it comes to styling elements consistently especially when they’re template based and there are occasions when inline styles are the best solution.

However, the Queen’s new website seems to use a large amount of CSS written inline for no apparent reason. Width’s, Height’s, Margin’s, Visibility, Cursor’s all make an appearance in the HTML code and you can’t help but think that these were either added due to laziness or down to last minute fixes due to cross browser compatibility issues. Either way, I suspect that these could have been avoided.

Non semantic markup

The basic mistake that web developers make these days is to believe that HTML is easy. Creating an HTML page is easy, however creating one that uses semantic markup is a different ball game all together and the Queen’s website suffers badly from this issue. Using unordered lists for navigation and using sequential heading elements where there are headings is good practice not only for accessibility and usability but also, as Julian Sambles pointed out in his article, it’s good for SEO.

Divitis

This is an illness with a lot of websites and a great explanation of the problem can be found here. To summarize, it’s where semantic markup is replaced by div’s throughout a webpage. Throughtout the Queen’s webpage are a number of instances where things that should have been created as unordered lists have simply been surrounded by div’s. This is usually common when people are first switching from table based layouts to CSS and is a difficult habit to break but I would have expected something of the stature of the Queen’s website not to suffer from this problem.

Inline JavaScript

I’m no JavaScript expert but I do know about accessibility and writing inline JavaScript is bad practice. This should be placed in an external file and the page should degrade gracefully if JavaScript is not available to the user. Try turning JavaScript off and using the “Choose your Commonwealth region” dropdown box for example.

Hardcoded CSS Heights

This is a common problem that I see on a daily basis and is usually an issue where newbies fail to understand the method of clearing floats properly and to solve the problem simply hard code a height on containers. Just looking at the HTML of the homepage, there’s a number of instances where this has occured and could have so easily have been prevented if the developer had either used overflow: hidden; to cover the floated columns or used clear: both; to clear the footer.

The problem with just using a hardcoded height is that it simply hides the actual problem and creates a problem for future content editors. If at some stage in the future the content is expanded and exceeds that height then the height or the container will not expand correctly and the height will have to be altered.

It’s a really basic principle of CSS to understand clearing floated elements in CSS so again is a little bit surprising to see such basic flaws with the Queen’s website.

Summary

This isn’t an in depth analysis of the site but were a few quick things that I spotted on the site and thought were worthy of a mention. And once again, this isn’t to say that everything about the site is bad, in fact it’s a hundred times better than a lot of the government and council websites that are out there at the moment.

7 comments on “Queen’s website HTML/CSS Review

  1. Jonathan

    Great post dave, i agree with what you said. But i would like to add that your comment “this isnā€™t to say that everything about the site is bad, ” This is still a badly designed site with flash in places were javascript could have been used (some jquery maybe).

    I think allthough this is better in relation to a lot of current goverment website, gateways and portables currently on the web, that this development / refresh would have produced something i little newer or more challanging specially considering the royal famiyl like to make bold moves towards to trying new things šŸ™‚

  2. HieuUK

    Good review Dave, I couldn’t notice that when I first visit the website. That’s why I still have a lot to learn from you :D. BTW, are you using Click map on your website. Everytime I click on your website, it run some javascript send to socialpark.com.

  3. Dave Post author

    Hi Hieu, I think that might be something to do with the social bookmarking icons that I’ve got as a plugin for wordpress. I’ll have a look at that as that shouldn’t be happening.