Going Responsive With Limited Resources: A Look at Edinburgh Bicycle’s Journey

[ 3 By

We’re constantly preaching about the importance of designing mobile-friendly emails. However, as Jason describes, there is a lot of confusion about mobile email design strategies and how to choose which one is right for you. It comes down to two aspects: the percentage of your subscribers opening on mobile and the resources you have available to put towards a mobile strategy.

While responsive email design is a powerful strategy, designers can find it difficult to wrap their heads around, and many feel as if they do not have the resources available to make it a priority. However with so many amazing responsive templates and guides available, implementation is plausible—even for small teams!

Edinburgh Bicycle Cooperative is a perfect example. With 100 employees and only five people in their promotions/marketing department (none of whom are focused solely on email!), they were still able to optimize their emails for viewing in mobile, desktop, and webmail environments. Despite their limited resources, responsive design was a must for them. Martin Stewart, Web Developer at Edinburgh Bicycle Cooperative, explained why they decided to use responsive design:

It’s the best way to improve the user experience for customers using mobile devices. And, as the general trend is for more and more people to be using mobiles, it’s really important to make our emails mobile-friendly.

MINIMAL RESOURCES, GREAT RESPONSIVE DESIGN

To choose a mobile strategy, you must take a close look at your audience. On what devices are they most frequently opening your emails? Do you have a high percentage of mobile opens? Edinburgh Bicycle Cooperative analyzed both their email and web audience before choosing which approach was right for them. Martin stated,

I’ve seen a steady increase in the number of customers using mobile devices to read our weekly email (and access our website in general), so it was a bit of a “no-brainer” to optimise for mobile. I want to give the user as good of an experience as possible, so going responsive seemed like the best way of achieving this.

Let’s take a look at what they did!

edinburgh-desktop

Desktop view

edinburgh-mobile

Mobile view

Through the use of media queries and fluid layout techniques, the template switches to a single column design when viewed on a mobile device. This enables text to expand to fill the entire width of the screen, making it easy to read. In addition, all of the buttons are touch-friendly and body copy is 14px, while headlines are 26px—making them completely legible on any screen size!

Edinburgh Bicycle Cooperative also uses media queries to hide and stack content when viewed on small screens. For example, the social sharing links, navigation bar, and phone number are all removed from the top of the email when viewed on mobile devices.

edinburgh-desktop-top

Desktop view (top)

edinburgh-mobile-top

Mobile view (top)

In addition, the navigations bar towards the bottom of the email turns into stackable, clickable buttons.

edinburgh-desktop-bottom

Desktop view (bottom)

edinburgh-mobile-bottom

Mobile view (bottom)

By stacking the buttons on top of each other, rather than side by side, they are extremely touch-friendly on the small screen of a mobile device. Through the use of media queries, the entire email is easy to read and interact with regardless of which environment it is read in.

OPTIMIZED FOR IMAGES OFF

With numerous email clients blocking images by default, it’s necessary to optimize your emails for viewing in images-off environments. Techniques like ALT text, background colors, bulletproof buttons, and live text are perfect for making this happen. Edinburgh Bicycle Cooperative includes almost all of them!

edinburgh-images-off

Through the use of these techniques, the email is completely legible AND easy to interact with when images are disabled! However, using styled ALT text could have taken it even a step further. In addition, their bulletproof buttons could use a little work (we’ll get to this later!).

EXCITING RESULTS!

Martin and the rest of the team at Edinburgh Bicycle have been thrilled with the results they’ve seen since going responsive. He explained,

I’ve been pleasantly surprised with the results of the responsive email. There’s been a 13% uplift in mobile clicks, and new visits on mobile were up 30%.

Impressive! They have also seen an 8% increase in opens. Since you can’t see the email before it’s opened, it’s not clear why making an email mobile friendly would lead to an increase in open rates. The increased open rate may be a result of inbox optimization (from name/subject line/preheader text). Also, over time, after the redesign, Edinburgh Bicycle Cooperative may have trained their subscribers to expect a better post-inbox email experience. This could also be a reason for the uptick in open rates.

A FEW SUGGESTIONS

Rendering issues

While they did a great job with this email, there are a few rendering issues—specifically in Outlook (rendering issues in Outlook? Shocking!). Here’s what the email looks like in Outlook 2010:

edinburgh-outlook2010

Compared to ideal renderings of the email, the results in Outlook include some less-than-desirable results.  The email is aligned to the left, includes Times New Roman fonts throughout (rather than their brand font), contains mis-aligned images, and some of the buttons are rendering strangely. Put simply, the Outlook results don’t measure up to the beautiful results in other email clients and on mobile devices!

It’s possible that Edinburgh Bicycle Cooperative has a very small percentage of their subscribers opening in Outlook (which would make sense since they are a mostly B2C company!), and therefore it may not be a big concern for them. However, if they are seeing a large proportion of Outlook opens, we suggest making some of the following changes to their code:

  • Apply font declarations to individual HTML elements, rather than relying on font inheritance from parent elements. This will prevent fonts from reverting to Times New Roman in Outlook.
  • Define image heights and widths for main images, which will enable images to render and line up properly.
  • Center the first container cell <td> so the entire email will remain center aligned.

In addition, they should consider restructuring some HTML elements with defined table widths. This would fix alignment issues that were occurring. You can check out the original HTML code, as well as the altered HTML.

Lastly, in order to make the buttons “fully” bulletproof, they should add a display: inline-block declaration and use the border property (rather than padding) for the main background color.

Button Before

<div style="float:left; padding-top:50px;" class="wraith-div">
 <a href="http://www.edinburghbicycle.com/products/revolution-wraith-14" style="color:#594d4d; font-weight:bold; text-decoration:none; padding:13px; border:1px solid #919191; background:#ffffff; font-size:16px;">Find out more <span style="color:#919191; font-size:13px">&gt;</span></a>
 </div>

Button After

<div style="float:left;" class="wraith-div">
 <a href="http://www.edinburghbicycle.com/products/revolution-wraith-14" style="color:#594d4d; font-weight:bold; text-decoration:none; border:13px solid #ffffff; background:#ffffff; font-size:16px;font-family:Arial,Helvetica,Sans-Serif;display:inline-block;">Find out more <span style="color:#919191; font-size:13px">&gt;</span></a> </div>

While social media and email integration was a big trend, we think that social sharing links can be a waste of valuable space in email. Emails should include relevant information with a specific purpose—and social sharing buttons don’t usually make the cut in terms of relevancy and importance. There are, of course, exceptions; for example, if you’re sending an email about a contest that involves social media.

Turns out social media icons are rarely clicked and can even be a distraction—in both email and websites. HubSpot found that Twitter, LinkedIn, and Facebook sharing links in their emails get about a 0.01% CTR (that’s about 5-9 people clicking for every 100,000 messages sent). Taloon.com saw a 11.9% increase in CTA clickthrough on their product page by removing social sharing buttons. Jani Uusi-Pantti of Taloon.com reasoned

Maybe those share buttons were just extra clutter and distraction on a very good spot.

Why distract your subscribers with social sharing buttons? Have them focus on the content and calls-to-action that matter!

Inbox optimization

Optimizing your from name, from address, subject line, and preheader are crucial — a subscriber’s experience with your email starts long before they open your email. Since some email clients (Outlook, iPhone, Windows Mobile 7) will display the first few lines of text in your email as “preview” or “snippet” text, this portion of the email can be optimized to follow up on the subject line or display other useful information. Let’s check out how this email renders in the inbox:

edinburgh-preheader

While they do have a preheader—“A carbon beauty. Sub 9.5kg for sub £1k”—since it’s so short the “View this email online,” “Share this email,” and even “Unsubscribe” links show up, too. Do you really want one of the first things your subscribers see to be an unsubscribe link? I think not! They should have used this prime real estate to get their subscribers’ attention by further encouraging the open.

Blue links on iOS devices

It’s not uncommon to find phone numbers, addresses, and dates styled blue and underlined when viewing email on an iPhone or iPad. These links can trigger different events, such as making a call or creating a calendar event. Towards the bottom of the email, Edinburgh Bicycle Cooperative mentions opening and closing times of their different locations—all which turn blue in iOS.

edinburgh-blue-links

While blue links definitely make sense for some emails (such as a save the date!), they aren’t necessary in this case. In addition, they take away from the branding and color scheme. In order to remove or restyle the blue links, Edinburgh Bicycle Cooperative could have have added a simple bit of embedded CSS in the <head> their HTML. This fix could change the color of the link to better tie in with their branding.

GET THE BEST MOBILE RESOURCES

Interested in moving towards responsive design? We’ve put together a mobile readiness kit containing our best stats, infographics, and articles on mobile to make understanding mobile audiences easier.

CTA-mobile-email-kit
  • Storewars News

    Interesting
    article! Found this very interesting: Apple Offering Free Recycling of All Used
    Products. Read it here http://linkd.in/1rgOkUk

  • http://www.twitter.com/notalyce Alyce

    Awesome post! Lots of interesting tips in there and loving the code samples.

  • FutureDave

    They have 5 people in marketing? Lucky them! :)

    I created our company’s responsive email template from scratch to avoid the bloated nature of templates and frameworks. However, I would recommend the htmlemailboilerplate.com as reference.

    Little heads-up: Constant Contact currently strips the doctype which is required for responsive to work. If you’re pulling your hair out trying to get responsive to work through their system, take note.

    Love the part about social links being a distraction. Valuable info.