Mobile accessories follow us everywhere. We use them to contact friends, to do research, and to read news. We check the weather on mobile instead of looking out of the window. We use smartphones to buy tickets or pay in shops, so it’s natural that mobile’s importance has increased in the field of email marketing.
Did you know that two-thirds of emails are opened on mobile devices? That’s a lot and the trend is rising. Keeping that in mind, many opportunities will be lost if you don’t optimize your campaign for mobile devices.
[clickToTweet tweet=”With two thirds of emails being opened on mobile, make sure to optimize your campaigns for all devices!” quote=”With two thirds of emails being opened on mobile, make sure to optimize your campaigns for all devices!”]
Enter responsive newsletters
First of all, responsive newsletters let your recipients browse comfortably. If they receive an email that is non-responsive, essentially they’re getting a mini-copy of a desktop template where everything is crammed onto one small screen. With elusive links and tiny words, your email will be ineffective and you might lose potential business.
Responsive newsletters aim for conversion – there’s little opportunity for action if the email is unreadable. A non-responsive email may cause you to lose traffic and conversions, especially if you are in an ecommerce market.
It’s worth noting that mobile commerce makes up 30% of all U.S. ecommerce. This statistic has increased annually, which means the ecommerce field harbors many opportunities. So, don’t ruin your chances with a non-responsive email campaign.
You should include responsiveness to follow trends. Don’t fall behind your competitors. If they’re optimizing their email templates for mobile devices but you aren’t, they could start eating into your market share. Because we want you to succeed, I’ll be giving you some useful tips. Here are eight rules to making your template responsive.
BONUS – at the bottom of this article, you’ll find two surprises. One of them is an infographic. Read the article to find the other one!
1. Be simple
Today, smartphone screens are being made bigger and bigger. However, they’re still too small to show everything that a desktop screen can. To avoid a mess, use a simple form for your newsletter. Remember – sometimes less is more.
Don’t use too many fonts and colors in your template. That’s one of the most important rules when making a clear newsletter for mobile devices.
Using simple templates is far better than using a template that is too complicated, hard to click or difficult to understand.
For simplicity, avoid having too many sophisticated graphic details. As a rule, use two or three colors maximum – one main color and two as a contrast. If making a background, use shades of white and grey. It will make your template clear for your mobile subscribers.
2. Be readable
Another important point of making your template mobile-friendly is to use proper fonts. Using fancy fonts can be pointless, especially when taking into account small mobile device screens. Just imagine reading text on your mobile that looks like this:
To avoid getting into trouble with non-readable text, you should use safe fonts.
The most common and safe fonts are the most popular: Arial, Tahoma, Helvetica, Verdana, Times New Roman or Georgia.
Remember that not every mobile device is able to read different fonts. Even if you make a great template and use fancy fonts, the mobile subscriber might end up seeing safe fonts instead. This happens because a mobile device can replace an unknown font. So your whole design concept can be ruined if you don’t use safe fonts.
If you want to distinguish certain parts of the text, use different sizes and font colors.
Use as little text as you can though. Good practice is to add only a title and a link. There’s no point in adding huge paragraphs. People prefer scanning text rather than reading it so don’t distract them! Leave white space between paragraphs to make them more clear.
Learn more about using fonts here.
3. Be clickable
Often the purpose of creating newsletters is to direct your subscribers to a target location like a landing page, your eShop or another website with the goal of making a conversion.
You can increase the chance of subscribers visiting your landing page by including visible CTA buttons. Use different sizes and colors to distinguish them from the text.
Remember to place these CTA buttons on the top of your newsletter (above the fold) to make them immediately visible. If you want your readers to scroll through and read all of the information first, add a second CTA button at the bottom of your message.
[clickToTweet tweet=”Place CTA buttons on the top of your newsletter above the fold to increase click-through rates.” quote=”Place CTA buttons on the top of your newsletter above the fold to increase click-through rates.”]
It’s difficult for a mobile user to select a small CTA. Use larger CTAs with big fonts or buttons that are at least 44px width. To avoid misclicks, leave empty space around the button. If you want to be sure that your subscriber lands directly on your website, make all of the content clickable, like in the example below:
4. Be clear
Don’t hide your overall message. Rather, make it crystal clear from the start.
Put the newsletters gist at the top of your message. Make your information easy and simple, without any hidden messages. Use only the most necessary information. If mobile users see a lot of empty content, they might close your message without a second glance.
I also recommend practicing restraint when writing – even if you want to include everything. Let your recipients gather more information from your website. It’s better to not overwhelm them with information. Remember that a newsletter should only be an announcement, so the headline should be enough.
5. Use one or two column formats
If it’s possible, use one or two columns maximum in the email layout to ensure proper display across mobile devices. It will make your newsletter clear, because columns tend to stack when squashed on a mobile display.
6. Use a preheader
Not everybody knows this, but the first thing a recipient sees before opening an email is the subject line and the first words of the message. So don’t be surprised if you receive an email that looks like the example below:
If you want to ensure your preheader looks nice and professional, you should add text before the “view this email in your browser” hyperlink.
A preheader encourages your recipient to open your message. It can be a continuation of the subject line, or a short blurb about your offer. Tell your recipient what’s inside – it will give them reassurance that if they open your mail, they’ll get what’s expected. In the long run, this will build trust in your brand’s newsletters.
You can also personalize a preheader by using your subscriber’s name. This adds to the level of trust in your mailing and shows the message is dedicated to them directly. This little touch will increase open rates since your subscriber is more trusting and willing to click.
7. Use proper HTML code
If you code your newsletter using HTML, please remember to add the align attribute on the table tag:
| newsletter content |
Be sure to use media queries as well:
@media screen and (max-width:600px) { td[class="mobile-text"] { font-size: 18px !important; }}These will make your template responsive as it adapts easily to mobile devices. Use a width of at least 320px and no more than 600px.
8. Use a proper template designer
If you’re not a web developer and you don’t know how to code, don’t worry. You can create your own responsive template quickly and easily. If your email service provider has a built-in email designer, you’ll be able to choose a free, nice-looking template and modify it as you wish just by dragging and dropping individual elements that make up the newsletter.
Summary
These days, responsive newsletters are one of the many keys to success for any campaign. More and more users are opening emails via mobile phones or tablets. If you want to keep ahead of the competition, make sure you’re sending responsive newsletters. Luckily, you now know how! In the long run, it will bring you far more results.
Last but not least…
… I have a special offer for all you Piktochart blog readers. Try FreshMail and create some beautiful and fully responsive email templates.
Use this link to create your free account. You will be able to use FreshMail for free when sending newsletters up to 500 subscribers. If your mailing list is larger, you can purchase any of our plans with an exclusive 15% discount!
