That Pleases Everybody
Written by Rob Lane.
Rare makes it pretty easy to create both fluid and responsive email designs. We think it might be easy to take this a step further and increase mobile engagement using content targeting to provide an even better mobile experience.
For a refresher on the different technologies used to create email check our blog post Responsive Email and its Predecessors.
Let’s look at the rubber duck example above. This is a product recommendation email created in the Rare template designer. It looks great on both desktop and on mobile browsers, displaying content that has been moved and adjusted to fit visually in either type of reader.
On mobile it even inserts targeted content to display an additional “Shop Now” button between the first group of ducks and the second to help visually break the product list. Our customers have made a lot of money sending this type of email.
With a few tweaks this can be taken a step further to increase engagement.
2. Targeted Content = Higher Engagement?
By using targeted content, we can create a shorter, more engaging, and more actionable email for mobile recipients.
Research by Jakob Nielsen contains some interesting insights on why mobile reading is harder. For example:
Users can see less at any given time. Thus, users must rely on their highly fallible memory when trying to understand anything that’s not fully explained within the viewable space. Less context = less understanding.
So we set out to take the design in the first example and make its elements fit within the viewable space. To do this, we had to get all our ducks in row on the same fold and provide a call to action along with each duck. Here’s what we ended up with:
In this new layout, we’ve highlighted (in red) roughly the content that fits within the reader pane on a desktop or mobile reader. On mobile in the previous example, we were at nearly one duck per screen, so reading the whole message could mean a lot of finger swiping.
Mobile content is consumed quickly by people on the go; getting readers to the business of the email by putting the recommended products all on one screen for easier comparison should lead to higher engagement—and in ecommerce, that should equate to higher conversion.
3. The Example
To make this new layout for mobile, we added some targeted content.
For example, we shortened the mobile version of the intro text so it’s more to the point and quicker to read for an on-the-go customer. We also revised the mobile version of the coupon text by putting the coupon code in its own text region, thus making it easier to select and copy.
We also added a different mobile call to action at the bottom of the recommendation block. Our thinking was that the intro section is out of view at this point so a bolder call to action is placed at the end of the message.
You can perform A/B testing on these different techniques to see what works for you. If you would like to give it a try, here’s what the sections look like in the Rare template designer. We’ve colour-coded the desktop-only content in pink and the mobile-only content in cyan.
We have numbered the targeted content (by section) in the screen capture above. Only #4 is actually required; the other three just show other things you could try.
Here’s a breakdown:
- The mobile variant features a shorter intro message that gets straight to the point. This message and offer fit easiliy on the screen, requires less reading, and not require any swiping to read.
- We broke the coupons into two boxes on the mobile version to make them easy to select and copy. A note here: if you can generate coupons without dashes, they’re much easier to select.
- We wanted a shorter message that didn’t word wrap lines here, and because we made the intro less personalized, we added a little more personalization here.
- The desktop version uses a three-panel container. Each panel contains two content blocks, one with a image content and the other with text content. The mobile version uses three two-column containers configured for “no reflow” (this stops them reflowing and stacking the image on the left over the text on the right, which is the default behaviour). The left side contains an image content block. The right side contains two content blocks, the first with text content, and the second with button content.
4. The Example
The example above was tested with Litmus on all major desktop and mobile readers including all versions of Outlook and it displayed perfectly.
Rare.io makes it easy to start using automated email campaigns for common challenges like: Welcome Series, Abandoned Carts, Order Follow-up emails and more! You can learn more about our powerful email marketing automation features here or go ahead and get started right away by using Rare.io for FREE.
And if you’re one of the thousands of merchants who are already using Rare’s Smart Email Marketing software and want to see how our Customer Success Team can work with your brand to grow your revenue – feel free to book a call at your convenience here.