Drupal Association members fund grants that make connections all over the world.
Clarence House is the official London residence of The Prince of Wales, The Duchess of Cornwall, and until recently The Duke and Duchess of Cambridge and Prince Harry. They launched their previous website in 2006 and have made great headway in creating an online presence for these members of the Royal Family. Together with Reading Room they've reassessed the design and structure of the family of websites (www.princeofwales.gov.uk; www.dukeandduchessofcambridge.org and www.princehenryofwales.org), achieving a result that both immerses and informs an increasingly varied demographic.
The site was to be used as a platform for each of the principles and so required an easily scalable and user friendly solution. Flexibility was also essential as several custom modules were required to build the functionality required. An open source solution was required that could take advantage of a wide community contributing to a powerful project. Drupal’s large number of vastly customisable features and its scalable architecture without compromising the rest of the site made it a clear choice of CMS.
The previous website was created back in 2006 and needless to say, the web has come a long way since. A growing audience already used to new web technology meant that change was inevitable. Across mobile, tablet and desktop platforms people are using a vast array of new devices and browsing environments, which offered us an opportunity to tell the Family's story in a new and exciting way. From a design perspective, the look and feel of the sites felt outdated and needed to be refreshed to more accurately represent the role of each Member of the Royal Family, while also portraying the new structure of the Family.
The challenges and outcomes
How do you create a website fit for a prince? We soon found out there is a lot more to it than dipping it in gold and showering it with gloss. Real world challenges such as the intricacy of appealing to both a traditional audience versus a much younger and more international group of visitors became quickly apparent as we conducted user research within the existing user base of the old website.
This shone through in both design and technology; the chosen design direction had to exude elegance, authority and a sense of tradition, without feeling dated. We wanted to enable users to connect with the work and lives of each of these Members of the Royal Family, allowing them to explore their personal interests and work, while using web technology that connected with audiences across a multitude of platforms.
Research showed that different screen resolutions were being used to view the original website as well as a variety of mobile devices including smart phones and tablets, which lead to our decision to create an adaptive design using CSS3 media queries. This enabled us to deliver an optimised mobile design to small screen devices and utilize the extra space of high resolution desktop screens. We also created high resolution assets for mobile devices with a high pixel density such as the iPhone 5.
To deliver the different styles and formats to the different devices we used a custom Modernizr build for feature detection and to add HTML5 and CSS3 media queries support for older browsers. This allowed us to use CSS3 border-radius, background gradients, transitions etc. to create a beautiful, visually engaging site that downsizes gracefully and still looks good in legacy browsers.
A specific technical challenge was presented by the News and Diary section, which consists of a grid that takes all dynamic content from the current site, making a distinction between different types and ratios. The fact that all these content types could have any of a set of four sizes and needed to sit flush within a dynamically updated grid, required a custom solution.
To produce dynamic grids we've used Masonry in the past, which is an amazing plug-in with great utility. It however doesn't guarantee a perfect fit every time, something a site of this calibre required. In the end we wrote a custom setup that consists of utilising Drupal Views (http://drupal.org/project/views) and we were able to generate a list of content that concatenated all items from the site that we needed for this grid.
We decided the best way to generate this content was to first generate four grids of content, this enabled a seamless load of content on all devices (whether that be wide screen desktop, mobile or tablet). For any user that then wanted to view more content, we utilised AJAX to load content from Drupal's backend via JSON and feed this to the grid. A rather complex algorithm was then written which (in a very overly simplified way) grabs the data, looks at what types are available to fill one of six fixed grid sets and carries over any unused data nodes to fill the next grid. The algorithm also generates a level off cross pollination between the sites: it takes a sample of content from the other two principal sites and 'injects' it into the grid to promote a user journey to the other sites.
So what does all of this do? Compared to the same period the year before (2011), last November and December saw a 410% increase in visits and a staggering 868% rise in mobile usage. Interest peaked at 300,000 visits in a single day and we saw a 612% rise in referrals from social channels.
The new children’s section has had a 400% increase in visitors than the comparable section on the previous site which tells us we've succeeded in connecting with a new and younger audience. Even the really young ones.
The previous version of the site had a large archive of articles which was important to migrate into the new site. A custom module was created for the purpose of this migration; it was used to migrate the content, clean the content for the newly created node and flag any node which required additional attention.
Annotated Homepage (below):
1. Site Selector
Prominently featured in the header, the Site Selector enables users to quickly jump between www.princeofwales.gov.uk; www.dukeandduchessofcambridge.org and www.princehenryofwales.org). Having the portraits featured in the selector makes the functionality instantly clear, while at the same time reinforces the family link between these members of the Royal Family and their respective websites.
2. Touch Optimisation
For mobile and touch-enabled devices specifically, we enabled a lot of the controls on the website to be touch-optimised. The News and Diary and Life in Pictures sections specifically required extensive consideration when thinking about how interaction would scale; be they on a smaller phone screen or tablet based device.
3. Royal Crest
Traditionally on the top left of a layout, the Royal crest fulfils a similar function as a website logo featuring these Members of the Royal Family’s personal monogram(s). Together with the Site Selector it is used to both indicate the active website as well as ‘brand’ the website. A subtle but important design decision for a website that carries individual personalities, but needs to tie in together as a family.
4. News Slider
The News Slider on the home page is a miniature version of the larger news slider within the News and Diary section and is powered by the same content algorithm. It is featured around the website on static content pages as secondary or tertiary call to action to promote cross-pollination and serve up relevant and related news articles.
5. Mobile Optimised
Having developed the website ‘mobile first’, it comes as no surprise the mobile version is completely optimised for the smaller screen and touch-enabled. This means increased areas that require touch-interaction and swipeable content. At the same time, content is restructured to offer the user everything in a clear and legible format.
During development comments were made against bug reports for various community modules.
Adam Bushell (Lead Technical Developer)
David Burgess (Managing Director)
John Clement (Technical Manager)
David Steven-Jennings (Linux Administrator)
James Milward (Technical Developer)
Fiona Mous (Project Director)
Andromeda Saliba (Account Director)
Ferdi Wieling (UX Consultant)
Dualta Wilson (Senior Interface Developer)
Leonie Witten (Art Director)