Leatherman Refresh

A few months ago we completed the Leatherman redesign. There were several issues facing the old Leatherman site.  The front-end code was showing its age.  The original site had been built to accommodate 16 products and now featured close to 50.  A redesign would need to allow more flexibility for innovation such as up-selling, cross selling and press highlights and scale for growth in the product catalog.  All of this would ideally be maintained in-house via an admin system that allowed for updates.   Not to mention being built so that it could be translated into multiple languages.  A tall order but I think we achieved our main tenets.  I’ve listed them not necessarily in order of importance:

Localization
This site would be translated into several languages.  While this may not happen immediately the site would need to be structured to lend itself to easy translation.  The idea was to divorce the content from the markup.  Any scrap of English, be it an alt tag or metadata, would be pulled out into xml, or our particular .net flavor: a .resx file.  The idea is to use the same template (.aspx and masterpage files) for the entire site, and language specific content would be pulled from the .resx files.

Flexibility for changing copy styles and performance optimization
We used Sifr in as many places as we could to maintain the design aesthetic. I could set the dimensions of the headlines and the length of their content could vary due to addition of copy, or potentially lengthier translated headlines – the font-size shrinking or growing while the layout is maintained.  We minimized the number of images needing creation and translation, and reduced the need for content specific css and markup due to image replacement.   That said while lending flexibility, Sifr can be a performance hit. We did use image replacement on the more static headlines, and quarantined the English containing images in “en” subfolders, separated by their use: css or inline. One thing I ran into was when using AJAX calls to populate comparison tables: the Sifr function needs to be called again on the newly updated information. 

SEO Optimization
On the homepage, it was decided to use html, Sifr and JavaScript as opposed to a single flash movie to maximize SEO.   Content would be available to be indexed, but the divs hidden using jQuery. The animation timing was a bit of a challenge.  Flash is an animation tool and it’s efficiency and compression is hard to beat.  However, we were able to use AJAX calls to preload images minimizing load times.   We utilized JQuery to time content population and transitions while preserving value from an SEO perspective.

Ease of administration
Recreating a CMS from scratch was not our goal.   However the client would still have the ability to enter or alter specs, headlines, or an occasional long/short description requiring little or no knowledge of font styling or layout markup.  The choices made on the back end would place formatting markup in the .aspx files or templates – meaning the .resx should only contain text that could be directly edited via that admin area. The goal was not to completely dispense of our services, but to utilize us less for updates such as copy edits and product page creation and more for creating designed layout or modifying the more static/design heavy pages of the site.  That said the client was given the ability to populate the flash image carousel and choose the appropriate order for the images.  The complexity of tying products to promos, activities, reviews, press releases, and tool tales were provided as an easy checkbox option in the admin upon entering.  These items were integrated and supplied enhanced cross-linking across the site, allowing the user access to relevant information as needed.

*Note that I use the term “we” quite loosely!  “We” were a host of people who made this site happen from talented programmers, editorial directors, copywriters, designers, project managers, and account managers, to brute force in the form of intern data entry – not to mention constant support and advice from my favorite Pop Art front-end developer and coworker  It was a big task, and I think as a team we performed it beautifully </horn-tooting>! But you be the judge.