From Email To Landing Pages: Mobile-Optimization For the Entire Subscriber Journey0
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.
- “Are landing pages letting down your email campaigns?” — Campaign Monitor.
- “Mobile Email Design Best Practices” — GetSMART.
- “Mobile Email Best Practices: Ask the Experts” — Econsultancy.
- Have you seen any great emails & you were wondering how they did that “cool” technique? Use Litmus Scope (it’s free!) to take a peek at the code.
- Media query support chart — StyleCampaign.