Click here for more recent article >


The SEO specialist prepared the website’s architecture based on keyword research, accessibility and usability factors. The plan was to change the current theme and get rid of most of the (60!) plugins. We ended up creating a completely custom built with as little reliance on 3rd party software as possible.

An SEO specialist prepared the website’s architecture based on keyword research, accessibility and usability factors. Initially the plan was to just change the theme and get rid of most of the plugins. But we ended up creating almost completely custom built with as little reliance on 3rd party software as possible.

Building the website

A. Analysis

Target audience: identification of ‘groups of users’, their importance for the organisation and what are they primary needs from website; that led me to identification of the ‘website’s roles’ by user group importance and influenced approach to design and what sort of content should be emphasised.

Target devices: most commonly used screen sizes and resolutions – broader described in my blog post Browser window size statistics for webdesign.

B. Beautiful venue

The main design objective was to feature a large photo of the House on the homepage. After few failed mock-ups I realised that design should be build ‘around the photo’ rather than ‘contain it’. That let me to using it as a background image rather than a typical banner/slider. Read more about Photo-retouch of Hampton Court House.

The secondary design objective, that clearly came-up in analysis performed earlier, was the simplicity of the design that focuses on articles rather than features. WordPress seemed ideal for that purpose as its present form evolved from a platform designed strictly for blogging and that clear, simple structure strongly influences the final outcome.

C. Context navigation menus

As the website features a little over a 100 pages – we had to split it to 7 main sections and then cross-referenced some parts to further 4 Year Groups. It was simply impossible to have all the links on every page so I created 25 customised menus to show only most relevant links on every page. Website utilises a WordPress custom fields to set appropriate navigation menu to every page.

I’ve done some digging on the internet and found two amazing PHP functions for bread-crumb navigation. First from Dimox and the second from Snipplr, the latter  reads the navigation menu rather than structure of pages which was determined by the most related keywords rather than hierarchical logic and therefore useless for navigation. That quite complicated approach was necessary as the WordPress doesn’t natively allow URL customisation beyond the current slug.

D. Delivering right content in right place

Here a WP_query function comes handy. I discovered that creating a dedicated templates containing some smart WP_queries is much easier, effective and less processor-intense than relying on widgets and plugins. With a customised loop I was able to have multiple database queries on the page which was useful in showing various feeds and teacher’s profiles that I wrapped in user-friendly short-codes.

E. Enhancements

On the left – see through image and text interferes with the menu items; right – blur effect helps to focus on the right content.
On the left – see through image and text interferes with the menu items; right – blur effect helps to focus on the right content.

As the top navigation menu it is quite large and covers a significant part of the main picture when hovered. In order to give the layout more depth I set the opacity of navigation drop-down’s background to 95% and, to improve readability of the menu items, I blurred the underlaying layer. To do that I used two great JavaScript libraries: html2canvas – to take a screenshot and StackBlur to blur it.

As the rendering process is quite processor-intense and performed entirely on the front end I had to set a cap that enables it only on a fairly modern devices, powerful enough to render the whole page in less than 0.7 second, otherwise the client’s machine would get stuck executing the script for several seconds. There are still some minor issues with the html2canvas as unfortunately it is working synchronously, hopefully will be improved in the future.

***EDIT: Had to disable the blurred background feature completely as it was too resource-hungry. Might enable it in the future when html2canvas will hopefully become asynchronous.

F. Features

Screen Shot 2013-11-21 at 16.58.55Smart listing feeds showing few images from photo-gallery if such exists in the post.

→ Visit Hampton Court House Website

Edit 2019: Since 2013 the website underwent many changes and updates including two major theme upgrades and functionality extensions.