Online plus-size fashion retailer Simply Be began using Litmus’ Email Analytics tool to track their subscribers’ email opens in mid-2011.
At first, their mobile opens were well below 20%. Within a year they began to see a huge increase in the number of customers visiting their site and opening emails via mobile devices. By late 2012, they were seeing mobile opens over 50% — they had nearly tripled in the span of a year!
Results in hand, Simply Be made the decision to optimize their website for mobile and also decided to replicate the experience for their emails. Collaborating with email service provider Responsys, they began working on their mobile email strategy and decided that responsive design was the right approach for them.
As Richard Corbally, Web Design Manager at JD Williams Group, explained, “We are now in a multi-channel, multi-device world and customers expect to receive communications in a way that fits their lifestyle at that point in time, so if you want to create relationships with your customers then you need to accommodate their needs and requirements and communicate with them on their terms.” In other words, “going mobile” was a no-brainer.
BEFORE: NOT IDEAL FOR MOBILE OPENERS
Prior to their mobile movement, Simply Be’s emails, while visually appealing, were very difficult to interact with on small screens.
Due to small font sizes and links, the email is not only difficult to read, but links and CTAs were nearly impossible to click. Looking at the navigation bar—serious zooming would be necessary to click the links. In addition, there isn’t a clear-cut main call to action, which could lead to confusion and/or a drop in click rate.
AFTER: MOBILE OPTIMIZATION
What a change from their old template! Through the use of a four-step media query—with breakpoints at 760px, 580px, 480px, and 380px—the responsive elements echo a fluid layout and the email looks great in almost every environment.
By using media queries, Simply Be is able to scale down the mobile view of the email to include key details and strategically modify content:
- Remove the navigation bar, social sharing links and “view in browser” links from the top of the email
- Streamline from two columns to one column, which enables imagery and text to scroll across the entire width of the device it’s being read on
- Scale down the navigation bar at the bottom of the email to only include links to “spread the cost” and “delivery”
- Place social sharing links at the bottom of the email and enlarge them so they are touch-friendly
Simply Be’s new email format is very impressive and a major improvement from their previous template. The redesign features a clear hierarchy, prominent main CTA, and an overall streamlined and sleek appearance. You can see their four-step media queries in action in the Scoped version of the email.
Another great aspect of this email is how it is optimized for images-off viewing.
Since less than 50% of subscribers see images by default, it’s important to make sure emails are still legible when images are disabled. And, Simply Be definitely does that! Simply Be is able to clearly distinguish between different parts of the email—the header, main CTA, secondary CTAs, and footer—by using different background colors in each section. The bright colors also make the email look fun and appealing even when images are disabled.
Styled ALT text describes the graphics and encourages viewers to download images, and the use of live text for the promotion and corresponding code, ensure these important elements are visible to all openers, even when images are disabled. Nice work!
TESTING THEIR EFFORTS AND GATHERING RESULTS
Creating a mobile email design strategy was a no-brainer for Simply Be. Why wouldn’t they want to optimize for the devices their customers are using? From their own analyses and the strategic work they did with Responsys, they were confident in the direction they wanted to take and opted not to do any A/B testing. However, they did make sure to test the rendering of their emails using Litmus.
One of JD Williams Group’s other brands, Jacamo, went responsive about a year ago and saw some fantastic results early on, with click-through rates increasing sharply. While the increase in click-through rates has leveled off, they continue to see an improvement in open rates and mobile conversions. They are hoping to have the same results with Simply Be’s emails.
“…if you want to create relationships with your customers then you need to accommodate their needs and requirements and communicate with them on their terms”
Richard Corbally explained that their strategy has been about creating a behavior in their customers. Mobile optimized emails and websites give their customers the confidence and ability to shop when and where it is convenient for them. They have continued to roll out responsive templates across their brands and are looking forward to continually optimizing their channels for a great customer experience.
CHALLENGES ALONG THE WAY
Simply Be faced challenges (and are still facing some!) along their mobile email optimization journey. Some of these challenges include the design technology, training and developing in-house design skills to build responsive templates. In addition, they wanted to make sure their responsive templates were dynamic so content and imagery could easily be swapped.
Simply Be has also had to change the way they think about email. Since many of their customers are reading their emails on the small screen of mobile devices, they realized the importance of adopting a more structured and, in some people’s eyes, less “creative” email style that focused on the content and call-to-action rather than enticing imagery.
“If the customer can’t see the email or grasp the key message, then it doesn’t matter how innovative and creative the design is.”
In addition, since Simply Be is just one of more than a dozen brands of JD Williams Group, another challenge has been rolling out such a big change across so many different brands. While it continues to be a challenge, Richard Corbally says that it “soon will just be the norm.”
WANT TO INSPIRE US?
Do you have an email that you’re especially proud of? Send it to us at firstname.lastname@example.org.
When it comes to mobile optimization, it’s important to optimize the entire subscriber journey: if an email is mobile-friendly, but the landing page is hard to interact with (or vice-versa), then subscribers are likely to be turned off. As Matthew Kelleher from RedEye explains, “Not much point in optimising email if you don’t have a mobile site as the journey will end in disappointment for the customer or prospect, earning you negative brand perception marks.”
Only 3.3% of subscribers will view a single email in more than one environment and 61% of users are unlikely to return to a mobile site that they had trouble accessing from their phone. In other words, you only get one shot to get it right.
Lasoo, a website and app that publishes catalogues from Australian shopping retailers, had all these figures in mind when they decided to align their email campaigns and website. They had previously optimized their website for mobile viewing after seeing a large portion of their traffic coming from mobile devices. After using Email Analytics, Lasoo worked with their email agency, Salmat Digital, and discovered that they also had a large percentage of mobile opens—nearly 30%. With this information in hand, they decided that it was a worthwhile investment to update their existing email templates and make them responsive. With mobile-optimized emails and an accompanying website, Lasoo aimed to create a seamless experience for their subscribers.
BEFORE: CLUTTERED & BUSY
Before the redesign, Lasoo’s emails were very image-heavy and somewhat cluttered. Not only was the experience overwhelming to view on a mobile device, but desktop viewing was also a challenge.
When viewing the email on my iPhone, the message had to scale down significantly. As a result, the images and CTAs were extremely small, and definitely not touch-friendly. In addition, the intro paragraph text was 12px, which made it very difficult to read on a small screen. We recommend using a minimum body copy of 14px and 22px for headlines.
AFTER: SLICK & RESPONSIVE!
As you can see, Lasoo streamlined both content and imagery in their mobile-optimized template.The desktop view contains less imagery, simplifying the experience. By removing the banner with additional CTAs at the top and eliminating half of the images in the rest of the email, the email is much easier to interact with. And the mobile view? Well that’s a whole new ball game!
Through the use of media queries, Lasoo is able to further streamline the mobile view. Not only is the navigation bar hidden, but the entire email is slimmed down to one or two columns, rather than four. This enables text to scroll across the entire width of the screen, images to stand out more, and CTAs easier to tap. Even though the responsive, mobile-optimized version is longer, it’s much easier to navigate and use.
Want to see how they made this email responsive? Check out the desktop and mobile version and peek into the code with Scope.
FOLLOWING THE CLICK—EMAIL TO LANDING PAGE
While I was was very impressed with Lasoo’s responsive email as well as their mobile site, I was somewhat disappointed that when I tapped one of the CTAs on my iPhone, I was brought to the full site, rather than the mobile site. Since their mobile site is so fantastic, Lasoo should definitely have the links in the mobile view direct to the mobile site, or better yet, enable the site to automatically detect mobile viewers and display the optimized version.
As GetSMART explains, “With mobile you only have one chance to get the recipient to read your email and to click through to landing pages. If you are directing people to your website or landing page and it doesn’t look good or load or operate well on mobile, people will leave—and find another site that does work.” As a result, Lasoo should not only be testing the emails that they’re sending, but they should also be testing the landing pages that they are being directed to. Closing the loop to connect their mobile-optimized emails and landing pages will complete the subscriber journey.
Not only is Lasoo’s new email template responsive, it looks pretty good with images-off, too!
Lasoo’s use of live text and bulletproof buttons preserves a great deal of the content and more importantly—the CTAs—even when images are disabled. We’d just suggest the use of ALT text to complete their optimization success story.
We’re thrilled to announce the launch of a HubExchange app for Litmus in the ExactTarget HubExchange marketplace.
The Litmus HubExchange app will be among the first tools available directly within ExactTarget’s Interactive Marketing Hub starting July 15th.
WHAT IS THE HUBEXCHANGE?
HubExchange is ExactTarget’s new marketplace that allows their users to “drop in” additional technology providers and connect them to their ExactTarget account, essentially bringing multiple apps and data together into one account.
For more information, visit hubexchangeweek.com
LITMUS IN THE HUBEXCHANGE
With more than 40% of emails opened on mobile devices, creating a consistent email experience across screens large and small has never been more important. With the launch of the HubExchange marketplace, Litmus offers an affordable and simple way to preview mobile rendering, gather behavioral data and preflight your campaigns. ExactTarget clients will now be able to:
- See how your emails appear across 30+ clients and devices
- Track email client usage across your subscriber base
- Identify mobile openers
- Segment and target your campaigns
VIRTUAL SESSION WITH JUSTINE AND EDDIE
Join Justine and Eddie for a webinar covering the Litmus HubExchange app on Wednesday, July 17th at 11:00am EST.
To learn more about the ExactTarget HubExchange, visit the HubExchange Week site where you can sign up for local meetings throughout the world in addition to dozens of virtual sessions from each of the providers launching apps in the marketplace.
We’ve seen the same names appear again and again in our email client market share reports in the past year. May marked a pivotal turning point with a surprising upset in the top five.
iPhone, Outlook, and iPad continue to top the charts—no surprises there. The big upset was courtesy of newcomer Outlook.com. We covered the rise of Outlook.com in last month’s video, and I wasn’t all too shocked to see it enter the charts a notch above Hotmail’s exit. However, my jaw dropped when I saw Outlook.com had jumped to the #4 spot, dethroning Apple Mail’s long-held position.
Keep an eye out for these pesky rendering issues that are still present in Outlook.com:
- No support for CSS background images
- No support for CSS floats
- No support for the margin property
- Image blocking
- No support for ALT text
- Irritating defaults for standard header tags
Some other changes we’ve spotted this month include:
- Yahoo! Mail dropped to #8
- Gmail is now #7
- Windows Mail fell off the bottom of the list
- Thunderbird is now in the #10 spot with about 2% of opens
Luckily, Thunderbird uses WebKit as a rendering engine, which has stellar support for HTML and CSS. This client isn’t likely to give you much trouble and should render similarly to Apple Mail and Outlook for Mac (which also use WebKit). With the introduction of Thunderbird onto the list, nearly 43% of the top ten email clients use WebKit as a rendering engine—music to our ears!
NOTE: I made a minor goof in this post by stating that Thunderbird uses WebKit to render. Thunderbird uses Gecko as a rendering engine (which renders very similarly to WebKit). Either way, you don’t need to worry too much about Thunderbird mangling your designs, since it has excellent support for HTML and CSS!
Gmail recently announced a new feature, called “Quick Actions,” that will allow users to perform actions right in their inbox without needing to open emails first. In the mind of an email marketer, this equates to skipping several steps in the conversion process: bypassing the open and going straight for the CTA.
Responding to an event directly from the Gmail inbox. Image via Google.
“Getting those things done is getting a little easier with new quick action buttons in Gmail, designed to help you tackle your digital to-do’s as quickly as possible,” touts the official announcement on the Gmail blog. Sounds like a win for Gmail users and senders alike: a quicker path to conversion for marketers and less hassle for those with overburdened inboxes.
TYPES OF TASKS AVAILABLE VIA QUICK ACTIONS
Gmail currently supports four types of actions, categorized into “in-app” and “go-to” actions:
- One-click replies, for simple, pre-defined tasks (for instance, registration confirmation)
- Submitting reviews for products or services (an example might be giving a restaurant a star rating along with a quick text reviews and submitting it to a 3rd party app)
- Event responses or RSVPs, which would show event details along with Yes/No/Maybe responses
- More complex interactions that involve multiple steps and take the user to a landing page
The more complex “go-to” actions add a new, unique button directly adjacent to the subject line in the inbox view. Image via Google.
WHY USE THEM? USE CASES FOR QUICK ACTIONS
In addition to the scenarios above, Google also mentions that early release partner Esna is using quick actions to “inform users of missed calls and provide them with a one-click button to be called again” while local food delivery services Seamless is “implementing the rate/review action to collect feedback about restaurants.” More complex use cases for “go-to” actions include checking into flights, tracking package deliveries, playing movies or songs in web-based streaming services, updating account details, and more.
Other early release partners include Docusign, Mailchimp, Netflix, OpenTable, Paperless Post, Spotify, and Tripit. Interestingly enough, I spotted a quick action in the wild with a recent email from TripIt:
TripIt’s usual triggered message becomes that much more useful when I can access my itinerary with fewer clicks!
ADDING QUICK ACTIONS TO YOUR EMAILS
Adding quick actions to your email involves adding a bit of JSON script to the header of your email:
"name": "John's Birthday Party",
... information about the event ...
The code, known as a schema, is still going through the standardization process, so there’s bound to be some quirks. For now, it seems like non-Gmail accounts would simply ignore the scripts used for quick actions. However, the potential of schemas and quick actions is vast. As Elliot Ross notes, “using a schema.org style standard means that there’s potential for the same code to be used by other email apps.” While I remain optimistic that adoption of schemas will make their way into email, I temper my optimism with the knowledge that the industry has also been slow to adopt new standards.
While you can test quick actions by adding schemas to your email and sending them to yourself (you’ll need to send and receive the email from a @gmail.com address), launching to the public requires registration with Google, DKIM or SPF authentication, and adherence to some email best practices. Google also encourages quick actions to be used in transactional emails versus promotional bulk messages.
MEASURING IMPACT FROM QUICK ACTIONS
Speaking as a designer, I love that quick actions enhance the Gmail user experience. Speaking as a marketer, the potential to offer direct access to conversion opportunities without users needing to open emails is revolutionary. But it also means preparing for a potential decrease in open and click rates, and impacts to content strategy. If the user doesn’t have to open in order to take the action, open rates will surely decline, but conversion or click rates on the action may increase.
MORE INFORMATION AND RESOURCES