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