Holmes Consulting Group

Holmes Consulting - homepage

Website: holmesgroup.com (site has since been redesigned) - view screenshots

Size: 14 template pages for a 120+ page website

My professional status: independent web designer/developer

Website client: Holmes Consulting Group

Dates: September 2009 - April 2010, with ongoing support until December 2013

Categories: Showcase sites, Scoping/pitching/quoting, Client liaison, Project manager, IA & UX, Website designer, Front-end developer, Writing for the web, Content-loader, CSS-based layout, jQuery/JavaScript, SilverStripe, Medium sites

Brief: the international structural engineering firm Holmes Consulting Group needed a new website, as their existing one was old and a little tired.

Their existing CMS wasn't really working for them either, so they asked us for a completely new photography-centered design, new HTML/CSS templates, and a new CMS. At the same time they took the opportunity to completely re-write the content for the website.

Hi Ali & Tom! Thanks so much for your hard work. I really do appreciate the fact that you guys got it done, especially when you've got so much other work on... You are actually quite wonderful, thank you for doing this.

Lisa Long, Information Manager, Holmes Consulting Group

My responsibilities included:

  • Writing the proposal for the website fixed-price contract
  • Creation and refinement of the information architecture and site schematics, including template wireframes and sitemap
  • Project management and ongoing liaison with the Holmes team in Auckland in order to achieve all their aims for the site, and to work through a range of technical and implementation issues with them
  • Project management of the WebWeaver team (myself and developer Tom St George) including the development of design/development timelines within a programme of work and ensuring that we achieved all our project milestones in a timely fashion
  • Ongoing project management once we had designed, built and integrated the website in response to client requests for changes to the backend functionality of both the CMS and the website itself
  • Design of the site - including the look & feel, graphics, and navigation - and beginning with mood boards in order to give the Holmes team an overview of two different design directions
  • Development of a set of 14 templates in pure CSS and XHTML 1.0 Transitional, which Tom then integrated into the SilverStripe CMS
  • Hand-coding in XHTML 1.0 Transitional to a reasonable level of accessibility
  • Incorporating dynamic graphical effects via jQuery - including sliding photo strips that open up to full width on hover, expandable fixed-size sections for related markets and services, a two-column layout for a single unordered list within the secondary navigation, and styled scrollbars within the fixed-size content area
  • Extensive testing of the site at all stages of the development process, ensuring complete consistency across the following browsers and platforms:
    • PC: Internet Explorer IE6, IE7, IE8; Chrome, Firefox, Opera
    • Mac: Firefox, Opera, Safari
  • The creation of a sitewide CSS print stylesheet
  • Ensuring that every template had been validated using the W3C Markup Validation Service and that it conformed to XHTML 1.0 Transitional requirements
  • Building the skeleton site in SilverStripe so that all the pages would be ready for Lisa Long, Holmes's web editor, to input content quickly and efficiently
  • Training Lisa to use the CMS, together with ongoing support as she developed her SilverStripe skills
  • Selecting and resizing the large number of photographic images on the site, from Holmes' extensive image library, and providing Lisa with a photoshop template that she could use to make her own images once the site had gone live
  • Helping Lisa to content-load the site within SilverStripe
  • Ongoing liaison with the Holmes team, to ensure that the new templates and backend functionality were working as expected, and to provide additional HTML, CSS and content graphics as required
  • Carrying out a full content QA of the site once Lisa had completed the content-loading, to ensure that all content was properly formatted and that the site was looking its best before go-live
  • Creating a "Treasure Hunt" with Lisa and Tom for launch week, which encouraged visitors to visit a range of pages while looking for a hidden prize somewhere on the site.

This was a two-person job - I did the initial quote, information architecture, site schematics, ongoing project management and client liaison, design, HTML and CSS, testing, training, QA and ongoing support. Tom integrated my templates into SilverStripe and programmed all the site functionality.

Lisa Long, Holmes's web project manager and the website editor, was based in Auckland, as is her boss. Clients sometimes worry that distance will be difficult to manage, but in our experience being based in a different city from a client rarely causes problems. We communicated mainly by email and phone, and met up a few times when Lisa was in Wellington, and this arrangement worked out very well for all of us. It was an extremely smooth-running and enjoyable project - and we continue to have an ongoing relationship with the Homes team.

I love this website. I'm really pleased with the design, which uses the Fibonacci sequence to create a tiled layout with squares whose sides are successive Fibonacci numbers in length. The length of the side of one square divided by that of the next smaller square is the golden ratio, and from this is derived the golden rectangle, which has been used by architects and artists since at least the Renaissance to create aesthetically pleasing forms. It seemed to me very appropriate to design a structural engineer's website using these proportions, and I think it's worked very well. Lisa used this "design story" in her presentations of the design to Holmes staff around the country, and felt that it really added to their appreciation of the new site.

Holmes's CEO was very clear that he absolutely had to have a website that would fit neatly within his laptop screen, which meant a website with a fixed height as well as a fixed width. Designing a website like this brings with it a whole set of new challenges, not least how to fit an unknown amount of text into a pre-defined space. I've used jQuery quite extensively on this site in order to fit everything in without breaking anything, and to allow users to view hidden content easily. I've included styled scrollbars in the content area and dropdowns (when required) in the small Related Markets and Related Services boxes, as well as using an adapted jQuery plugin to hide and reveal five times as many photographs as would naturally fit into each page.

The subnav is built as a single full-width unordered list which breaks into two half-width lists if the maximum height of the container is reached. Automatically splitting a single list (containing an unknown number of items) into two is a bit of a holy grail for front-end web developers, and I found a solution within a jQuery plugin that had actually been designed to create newspaper column-type layouts. I adapted the code to suit my needs, and as far as I know it's the only solution out there. Here's my blog post about it - A CSS/jQuery solution for creating multi-column lists.