Bamford Medical

Bamford Medical

Link: bamfordmedical.co.nz

Size: 15 template pages

My professional status: independent web designer/developer

Website clients: WM Bamford & Co Ltd

Dates: May - July 2009 and March - May 2010 with ongoing support after launch

Brief: Following the successful launch of the Bamford website in December 2008, the company requested that we create a companion website, Bamford Medical, which would allow them to sell online a selection of the wide range of medical products they supply.

The templates and CMS backend of the new site are based on the original Bamford site, with a completely different look and feel so that they are easily distinguishable from one another.

My responsibilities included:

  • Development of the information architecture and site schematics (based on those already developed for the Bamford website)
  • Project management and ongoing liaison with the client in order to achieve all their aims for the site, and to work through a range of technical and implementation issues with them
  • Design of the site - including look & feel, graphics, and navigation - using the Bamford Medical logo as design guide and inspiration
  • Development of the site templates in pure CSS and HTML 4.01 Transitional (based on those already developed for the Bamford website), which were then integrated into the Bamford Expression Engine CMS built by my programming partner Tom St George
  • Hand-coding in HTML 4.01 Transitional to a reasonable level of accessibility, and following NZ e-government Guidelines
  • Creation of dynamic graphical effects using jQuery - including an accordion for the FAQs page, and automatic child > parent relationships generated in the subnav
  • Utilisation and re-styling of the Superfish jQuery plug-in for main nav dropdown menus
  • 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; Firefox 3, Google Chrome, Opera
    • Mac: Firefox 3, Opera, Safari
  • Creation of a print stylesheet tested in IE6, IE7 and Firefox on Mac and PC to ensure cross-browser printing consistency
  • Ensuring that every page and stylesheet had been validated using the W3C Markup Validation Service and that it conformed to HTML 4.01 Transitional requirements
  • Ongoing liaison with Tom, to ensure that the template pages could easily be integrated with the CMS
  • Ongoing additions and alterations to the website during the content-loading process - including adding new sections to the website, developing the registration and sign-in process, and adding thumbnail images to various pages
  • Undertaking a thorough QA of the entire site once the content had been loaded, in order to ensure that all pages displayed as expected, and to tidy up any pages that didn't look quite right
  • Training Noeline how to use Photoshop to create thumbnails and larger product images, how to clearcut and tidy up product images and how to prepare them for inclusion on the website
  • Ongoing support and consulation with Noeline, in order to help her work through the necessary alterations to the site.

When we designed and built the original Bamford website, it was with Bamford Medical in mind, because the company was thinking ahead to the online sales site right from the beginning of the process. This meant that we had planned to re-use both the HTML/CSS templates and the CMS and to expand these for the Bamford Medical site - saving the client time and money in the process. This worked out very well, and because I'd done the original design and built the original templates I was able to re-skin these for Bamford Medical while still creating an entirely new and different design.

The project ended up being carried out as two separate blocks of work, almost a year apart - we understand that decision-making is sometimes a long and involved process for companies, so it wasn't really a problem to put the site development on hold for a while. Noeline Cummings, our contact at Bamford, is always heaps of fun to work with, and she had a lot of really good ideas about how she wanted the site to work, and how she wanted product imagery to be incorporated into the original design.