According to Movable ink, 66% of consumers are opening their emails using a mobile device. Therefore, you’ll be missing out if your newsletters aren’t mobile-friendly. Your objective should be to make sure whether your customer is reading your email on a PC, desktop, or mobile phone; they have the same experience.
Here are 7 tips to create HTML email newsletters that are mobile-friendly.
The space mobile devices allow for displaying the subject is enough to make even an expert develop a migraine. Some email clients display your whole subject, but most of them won’t.
With that said, you don’t want your subject line to be cut off because it’s akin to the headline of your newsletter.
To be on the safe side, ensure your headline has 40 characters, or at least the relevant details appear in the first 40 characters.
Multiple columns appear condensing, and they can be hard to navigate on mobile. A single-column makes your email compatible regardless of the email client your reader is using.
It also helps in simplifying your design, shedding more light on the email content of your newsletter.
Although modern mobile devices might handle responsive designs, there are a few exceptions.
When the size of your pixel is 600, your subscribers won’t have a problem reading emails that were designed for large computers.
Set a width in your email template at 600 pixels, or utilize the CSS width property to make the changes.
A 10-pixel font is strainers to read on a desktop, and it’s even worse on mobile devices. Your customers will not strain to read your emails. They will trash them right away. A font size of 14 pixels makes your font readable on small gadgets.
But don’t be scared of going bigger, large fonts make your newsletters more readable on both mobile and PCs.
Smaller images load faster. Many mobile users still use 3G and other slow internet connections. The speed at which an image load is still important.
Find someone with technical knowledge, and request them to help you use responsive code techniques to load bigger images on big gadgets and small images on small devices.
Another hack is to shrink your images by 50% and compress them at a higher compression rate than usual, to load the images faster and conserve your reader’s bandwidth.
All your emails should have a call to action (CTA) to prompt the reader to take a certain action. That something could be clicking or tapping a button.
Your CTA needs to be bigger on the mobile device, for the reader to press it effortlessly. Keep in mind that fingers aren’t nearly as effective as a mouse. And as much as mobile manufacturers are working hard to make devices that respond to the actions accurately, it’s still hectic.
If your reader has to click more than once on your CTA, they’re likely to abandon the act.
Some email service providers will only display images for verified email addresses. So if you use an image as your CTA, and the email client hasn’t verified your email address, then it means all your work will go down to the drain.
After all the hard work, it’s such a bummer to miss on the opportunity of getting your reader to take the action you wanted them to take.
The issue is when recipients view images, they improve the click-through-rate. If, for this reason, you’re inclined to using an image as your CTA, make sure you include an alt tag. It could be the same message as the image has like “click here.” That way, even if your email client doesn’t display the image, your readers can still take the required action.
Read our article on “What is an HTML Email template?” to know more about the subject.