Fota House website redesign case study. 16/03/2005

The Fota House and Gardens website was a great project to work on. Apart altogether from the technical and design challenges we enjoyed resolving, all meetings took place in the House itself - I can't think of a better place to meet clients! One morning as myself and Tom R drove through the grounds to the house we saw several red squirrels going about their business... it was the first time I had ever seen squirrels in Ireland and red squirrels are all the rarer. Anyway, back to the matter at hand...

Problems with Old Site

We met with Fota House and Gardens and discussed the development of a new site. The old site was no longer making the cut. We did an audit of the old site and the primary issues we saw with the old site were:

Not designed using web standards, and not search engine friendly or accessible - hard to find the site.
Confusing navigation structure - hard to find information you were looking for.
Design to a small fixed width and height, and as a result quite cramped and claustrophobic feeling.
Unnecessary use of frames making it more difficult to access content
Proprietary scrolling mechanism making it difficult to access content, even in standard browsers.
Not updatable by Fota House staff.

Overall the site was not very search engine friendly and was not very easy to use, which resulted in low traffic to the site and very little interest generated when people did visit the site. The site simply didn't portray Fota House in a desirable or credible fashion.

Brief for New Site

Initial meetings with Fota House shaped the focus of the project, and we developed a clear brief for the site.

Primary Brief:

Increase awareness of Fota House and Gardens
Increase awareness of facilities at Fota House and Gardens, particularly as venue for corporate functions
Allow for easy updating of site by Fota House and Garden staff for News & Events.
Have site reflect the House and Gardens more accurately
Ensure ease of access to information on site

Our aim was to develop a visually appealing site that would be found easily, even by those with no prior knowledge of Fota House. Once found, it should be easy to find the information you are looking for, thus promoting the House and Gardens and attracting visitors.

A wide range of information is made available on the site, so it was vital is be extremely user friendly. We analysed the content and developed a logical site structure which makes the site intuitive to use. This approach also meant we were able to push content that was of high priority such as facilities and an appeal for donations.

Web Standards

Our general philosophy is that designing to web standards is simply how sites are supposed to be designed and that is why they work better. In this instance, increasing awareness of Fota House was vital therefore search engine results a priority which made web standards a must. While web standards alone don't give you a more findable site, it is far easier to optimise a standard compliant site for better search engine results.

Accessibility, download speed and browser compatibility were also considerations and developing to web standards ensures massive improvements in each of those areas.

More info on web standards:
Why Adopt W3C Web Standards?
Web Standards Project

The result is a site which downloads fast, works in all browsers and generates traffic through search engines.

Design

We really wanted the site to reflect Fota House and Gardens and convey some of the same qualities. We went for a design which would open the site out and create a more expansive feel, while introducing an elegance to the design reminiscent of the house itself.

We took elements of a floral pattern, found in the House, and developed it as a recurring motif for the site. Each page of the site is decorated in the top left corner with the logo surrounded by a flourish of this motif. While this is quite extravagant with the space at the top of the site, we felt the site deserved it. And as a technical aside, it has been shown that people have no problem with vertical scrolling, and only balk when it comes to horizontal scrolling. Therefore we decided our extravagance would have no negative impact.

The result is a clear, uncluttered, design which is appealing, reflects Fota House & Gardens, and allows for ease of use.

Site Layout

There is an ongoing dilemma for all designers - Fixed, Fluid or Elastic.

Fixed means fixed width, where you decide your site will be x pixels wide and that's it. Fixed gives the designer most control, however if a user increases their text size it can cause problems and can result in only a few words per line which looks a bit odd.

Fluid is, for example, when you set the site to take up 100% of the screen - the site will scale up or down when you resize the browser window. I find fluid sites are suitable for some content, but not all. When you have a large screen resolution and a maximised browser the lines of text can stretch on forever and be difficult to read.

Elastic is when you design so that the site is set at a size which the user has some control over. For example increasing text size will expand the site, allowing the lines of text to retain the same amount of words.

I experimented with fixed and fluid of these before deciding on an elastic design. The main content columns in the Fota site are set to 35ems which is generally accepted as an ideal reading length for lines of text. Fota will appear much like a fixed width site, but if you increase your font size the site will scale accordingly.

Navigation

The navigation was developed for ultimate clarity. The navigation is presented at the top of the page consistently and allows the user to identify where they are in the site at any time.

If the page has a lot of information on it, there is an “on this page” set of links which appears on the right hand panel.

The navigation section is also elastic and allows for increasing of font sizes. There is a ‘skip links' solution in place so that visitors to the site using aural browsers don't have to listen to the same links repeated on each page before accessing content.

Images and Enlarging Images

Fota House and Gardens is an amazing place. You have to see it to believe it. And so images play an important role in the site. The old site just didn't do the place justice and had limited images which were generally very small.

We designed the site so each page has a banner image showing a detail we especially liked. The right hand side panel then allows you to open and view the full image, and other large images too.

Many of the images in the main content are also enlargeable - indicated by a magnifying glass in the top right corner of any image you can enlarge.

The pop-up solution we used is as web standard compliant and as accessible as possible.
More on the accessible pop up solution...

The result is access to larger images that works across all browsers and platforms.

Updating content

Anyone in Fota House, with access to a browser, can update the News & Events section on the site. We developed a Weblog for the site to allow for easy updating.
We chose Blogger as the tool for this job because of it's fantastically user friendly interface.

We looked at other weblog tools and considered a few, but all of them had a more complicated user interface which we felt might be off-putting to non-nerds.

The most recent headlines are displayed on every page of the site, offering easy access to the most current information.

The result is an easy to use interface for client to update the site regularly.

Printing

The design of the site looks great on screen, but when we tried printing it didn't look so good. No problem. We designed a separate print style sheet which means when you hit print only the relevant content is printed, and in a nice format too! Gone is the navigation (useless on a printed page), the extravagant flourish at the top is replaced with a smaller, neater logo (to avoid space and ink wasting in print) and the content and contact details are printed out.

The result is clear presentation of content in print as well as on screen.

Findability (or Search Engine Optimisation)

As an integral part of the brief was increasing awareness, we felt findability was vital. As well as developing to web standards we took various other steps to try to ensure the best search engine results possible.

Searching for Fota House on Google brings back the site at position 1. This might sound obvious, but there are a lot of sites out there that don't come back no.1 on searches for their own name!

We developed the site to be extremely search engine friendly, and the amount of relevant content made our job a lot easier. It was nice checking the stats, with the site only just launched, and seeing that our work had paid off. People finding the site when searching for info on arboretums, history, architecture, restoration and the Cork area to name a few topics (even: 'how were chamber pots emptied regency'). This meant that people who may not have heard about Fota House before were now discovering the site and being delivered relevant content

One of our aims was to specifically increase awareness of Fota House as a venue for corporate events. At the time of writing this article I did a few searches in Google for finding a venue in Cork for corporate events:

corporate family day function - position 1
corporate functions venue cork -position 1
prestigious corporate events cork - position 3
corporate events facilities cork - position 5

Because of the implementation of the blog, and a few tips we passed on about writing the content, the search engine results can be improved on constantly.

The result is higher traffic to the site and relevant content for visitors.

Conclusion

The site is now up and running and beginning to see a steady stream of traffic building up. Fota House are very happy with the site which is attractive, versatile, easy to update and most importantly generating interest in Fota House.

Click here to comment on this article