Going Mobile: A Company’s Journey to Responsive Design2
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. Richard Corbally, Web Design Manager, worked in collaboration with email service provider Responsys and they began working on their mobile email creative strategy and decided that responsive design was the right approach for them.
Laura Robertson, Email Marketing 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.
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”
Laura Robertson 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, Laura Robertson 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.