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.
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.
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.
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.
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.