Saturday, February 6th, 2016

Brighton, England

A responsive redesign for theauditor.com

 
T

he Auditor is a UK-based company that examines a client’s cost centres, improves things where possible, and is paid based on a pre-agreed percentage of savings achieved in the first year.

  • Client
    Auditor, The
    Glasgow, Scotland, United Kingdom
  • Services
    Web Design
 

Engaging first built their company website way back in 1999, when they were called Cost Reduction Analysts. Amazingly, until now—even with the name change—the site had never been fully redesigned. That’s 16 years! Yes, we’d retrofitted a content management system, widened the display to better suit the bigger screens, and gradually added and removed some functionality. And yes, its longevity is arguably a testament both to the web as a medium and to the site’s initial design. But by 2015 it had been showing its age for a while.

Initially it had been a useful calling card for the business, demonstrating their tech savvy—it was, for example, probably among the first websites to have a sticky header menu. But more recently it had likely been doing the opposite, suggesting to prospective clients that the company had fallen behind the times.

So it was satisfying to finally bring theauditor.com up to date—redesigned, responsive and with webfonts. Company Director David Latter recently emailed that he and his team are once again gaining “much strength from [their] client-facing persona,” and that the redesign has given them a “new lease of energy”.

A brand new challenge

One challenge was that back in 2010 they changed the company name from Cost Reduction Analysts to The Auditor but still hadn’t fully let go of the former; the existing site showed both brands, and was therefore somewhat schizophrenic. The redesign was an opportunity to force clarification here.

Also, the client had recently become concerned that the old name actually explained their service more clearly than the new and performed better for them on search engines. And a number of taglines had accumulated over the years, such as “Make more money from the money you make” and “No savings, no fee,” each appearing somewhere on the site. Which to keep?

Our Gordian Knot solution was to eliminate the taglines completely and render the old name as the tagline for the new, resulting in: “The Auditor: Cost Reduction Analysts”.

How to scroll a header

The more square a logo, the more versatile it is, so we placed the tagline beneath the company name. But we didn’t want the sticky header containing the now taller logo to hide the content beneath. Our solution was to follow the current convention of growing and shrinking the header; upon scrolling, the tagline moves from beneath the company name to alongside it (absolute positioning proved the smoothest animation), and the company name shrinks. The scrolled header’s height is thereby reduced by about two thirds. With this we’ve tried to maintain the site’s traditional fun sticky header.

At mobile sizes, there simply wasn’t—and usually isn’t—enough space to display the masthead on the left and the menu on the right. The logo, tagline and a menu icon therefore abutt horizontally, and the vertical line separating the logo and the tagline is subtly overloaded; does it mean the menu belongs just to the tagline or does the tagline belong with the company name? Both.

Client endorsements

On the previous design, the client endorsement quotes were part of the header. Now they are paired with the client’s logo and displayed as notecards in a slideshow that dominates the homepage. The slideshow is powered by Flickity, my new go-to slideshow script, replacing the venerable Cycle. I like Flickity because it:

  • has momentum physics
  • works with no tinkering on mobile
  • behaves just as we expect a slideshow to these days
  • is being actively maintained, and the developer is asking for some money for it
  • was initiated by Paul Irish who seems to be behind the entire web these days
  • is reasonably configurable

The number of notecards displayed varies by screen size, from just one on mobile to three on the desktop.

Frank Lloyd Wright’s Unity Temple

I hope it’s not pretentious to bloviate that the unstated inspiration for the design was Frank Lloyd Wright’s Unity Temple in Oak Park, Chicago—what Mr Wright referred to as the first modern building. We pared back many of the squares and lines inspired by the sanctuary (as was vaguely intended), but one thing remaining is the matrix of client logos in the footer, inspired by the sanctuary’s ceiling.

These flipping logos

How to elegantly fit these logos of such varying proportions into a consistent square shape? Our solution was to align each logo to its containing square’s bottom right, setting the maximum height or width of the logo image—whichever is bigger—to 62% (the Golden Ratio) of the square’s side. Although some extremely wide logos (generally text-only ones) are therefore quite small, in all some 70 logos of varying shapes and sizes display nicely here. To help present each logo at its best we used one of its colors as its background whenever there was sufficient contrast.

On the narrowest screens the grid looked best with three columns, on the widest with nine; both looked best with three rows. So the number of logos displayed varies by screen size, from nine to 27.

Moreover the logos flip, showing a random new one each time. Although we haven’t seen this anywhere else, it just seemed the obvious way to display them and imply that The Auditor’s clients are many and equal. The mechanism is now posted in more generalized form at CodePen, Random Card Flip from a Larger Set.

Colors to the fore

Among The Auditor’s virtues most appreciated by clients is their unobtrusiveness; despite the fact that they conduct an audit of fairly central processes, they are not an obvious, interrupting presence, and we wanted the design to convey this.

Hence the color palette is limited to subdued browns, with brighter colors coming instead from the clients’ logos, thereby placing The Auditor in the background and bringing the clients to the fore. True, the site’s contrasting blue—used for links and menus—is not quiet, but since it’s part of the logo it seemed the obvious choice for site-wide highlight color.

Fonts of no-nonsense savvy

We rely on Hoefler & Co’s typography.com for typefaces, taking a leap of faith that limiting the choice to the output of one foundry maintains some subtle unity. To convey no-nonsense savvy, body text is in their Gotham san-serif; ditto Gotham Extra Narrow for the menus and headers. For the dropcaps and client texts their serif Surveyor provides a strong contrast from The Auditor’s own texts, and evokes pedigree.

Dropcaps are generated by Adobe’s dropcap.js.

Abandoned illustrations

The old site contained a number of stock images from the company’s successful initial branding push in the 1990s. As part of bringing things up to date we removed them all.

To replace them we commissioned the help of our painter friend Juan Carlos Bronstein to produce some watercolors to illustrate the various cost centers where The Auditor operates. Juan loved the secret Unity Temple inspiration, and produced three beautiful watercolors. However, the client decided they were too abstract, electing not to use them on the site. Perhaps we’ll eventually get them onto the site somehow.

The mechanics of responsiveness

Every element on the site is sized relative to a single constant: the body font size. However, font sizes themselves cannot be set as percentages of the screen size, so things can’t simply resize entirely based on that (nor is this desirable). Some exemplary sites such as theguardian.com elect to keep the body font size constant, and wisely don’t even set its size, instead allowing it to be determined by the browser default. We decided however to step up the body font size to a maximum of 20px for the biggest screen sizes, down to 14px for the smallest. If you gradually increase and decrease the screen width you’ll see the layout adjusting to remain itself as much as possible at all typical desktop screen widths, from 800 to 1900px wide, before beginning the more overt changes for smaller screens.

Why do some web sites feel more fun on the limited screen of a mobile device than on the capacious one of a desktop? That is how it feels, though I say so myself, at theauditor.com.