Does a Great Design Matter if You Can’t See It?

By

A couple months ago a friend tipped me off to Fab.com, one of the latest sites to launch in the DOD (deal of the day) frenzy. Their deals are a bit unique and right up my alley, offering up “daily design inspirations and sales 70% off retail.” Think the kinds of cool stuff and geeky toys you’ll find in a contemporary art museum’s gift shop — signed Milton Glaser prints, minimalist furniture and avant-garde jewelry.

Being both a marketer and designer, I signed up right away and have been anxiously awaiting the launch of their site and accompanying email program since. Given that they are an online venture with a focus on design, I had high expectations and made a mental note to pay particularly close attention to their email design. So when Fab finally launched last week, I excitedly pursued their offerings while performing a cursory email
critique.

Fab-Email-Design.png

Overall design

Overall, I enjoyed the design quite a bit. Fab’s emails are based on a grid structure that features new sales in a 2×2 grid, followed by a 4×2 grid of sales that will be ending soon, and wrapping up with a three-column overview of upcoming sales arranged by date. The hierarchy is clear, simple, and easy to read. There are no introductory paragraphs, excessive copy or other “fluff”, and the calls-to-action are clear. Fab’s template strikes a balance between providing branding and structure while allowing the products to shine. While it can be challenging to combine photos from different sources into one cohesive design due to differences in style, lighting, composition and quality, the use of a grid and some simple yet refined design elements tie the design together.

Rendering

Even before I worked at Litmus, I used our Email Previews every day while I checked the campaigns I was designing and coding, so rendering has always been top of mind. How an email renders directly affects the end user’s experience. In Fab.com’s case, you could make the argument that the email is their product, since it’s the gateway to the deals on their site — and their sales. In fact, Fab published a blog post today highlighting their traffic since launch, and it turns out that email is delivering 70% of their revenue!

One nuance of their email that I really enjoy is the semi-transparent overlap of grey header bars over the product image. I was also impressed that that text on top of the header bars was live HTML text (so it will still display when images are off). Knowing they must be using some combination of background images to achieve this affect, I popped open their email in my web browser to take a closer look. I use Firebug and Web Developer Toolbar in Firefox to fiddle with code and preview alt tags and background image compatibility.

fab-bg-images-off.png

I also ran their HTML through Litmus’ Email Previews tool to see how their email was shaping up in all the major email clients.

fab-email-thumbnails.png

Unfortunately, I noted a few compatibility issues with their design. All the product images in the email utilize background images to achieve the transparent header bar affect. This also means that none of the products appear when viewed in Outlook 2007 or 2010 since these mail clients do not support background images. I also noted some font and alignment compatibility issues with Outlook 2007/2010. In instances where these clients do not have the first font (in this case, Helvetica) in a CSS font stack installed, they default to Times New Roman rather than the next font in the stack.

fab-outlook2007.png

Data from Email Analytics shows that almost 19% of all users are viewing email in Outlook 2007-2010, but it’s possible that Fab.com’s audience doesn’t match up to those averages. If they wanted to ensure that their design stood up to these hard-to-please clients, they could slice their images a bit differently, separating the transparent headers from the rest of the product image and coding the majority of the product as a static image. This way only the top portion of the product behind the header bar text would be suppressed. Additionally, specifying Arial rather than Helvetica in their font stack would resolve any font compatibility issues, even though I agree that Helvetica is more elegant!

fab-recommendations.png

I can’t help but wonder if they could push that revenue number from email a bit higher if their products were visible in Outlook 2007/2010?