Nowadays the Internet users prefer to check their inboxes on mobile devices gradually moving away from desktops. If an email is difficult to read on a smartphone and one has to scroll or zoom too much, it will more likely be closed.
Responsive email template along with specific structure of the elements are needed for the email to be displayed correctly on mobile devices. In this entry, we are going to discuss which newsletter elements to optimize for mobile users’ convenience.
A template with responsive layout changes its size and structure in real time depending on the device screen size and browser. One of the ways to make an email template responsive is to use HTML-code. It defines the screen size and choose corresponding size of the template.
Generally, the responsive email templates work the same as for ordinary websites with the help of CSS media queries rules.
Previously we wrote about the influence of the responsive design on the CTR of email campaigns.
But just responsive layout is not enough, because one has to structure the elements of the email for convenient review and click on the smartphone. The following is on that matter.
There is more space for a preheader than for a title on a mobile device screen. Make maximal use of it and optimize the preheader copy. There should be no links or meaningless text like “Don’t see images?” or “Link to the web-version”. Start the copy from the title or greetings or even combine these two.
Many columns with rubrics create an informational overload, make it impossible to navigate as well as to move from one information block to another.
One-column layout simplifies the readability, design and allows focusing on the main content.
Simplify navigation as much as possible, don’t include the website sections into the header. But there always should be the brand logo with the link to the site as it ensures the brand recognition.
Optimal template width is 600 px for a desktop and 320 px for mobile devices.
One should strike a balance between the font size of the title and the text, for instance, 22-24 px for the title and 14-16 px for the text correspondingly. Too small font is difficult to read on a mobile device screen. Avoid hyphenation as well.
Considering the font types, it’s better to use cross-platform fonts because they are visible on all devices and email providers:
The space of a mobile device screen limits the possibilities for placing as many content as possible, so add only the most important information. For example, in promotional emails it’s advisably to cut the quantity of the goods.
Divide the informational blocks from each other with the help of blank space, and the priority message place above the email so that a reader will understand at once the point and the purpose of the newsletter.
The most logical thing to make CTA visible and get clicks is to put it in the upper part of an email. If there are several call-to-actions define their priority and then place them under the principle “the main CTA is bigger and higher”. The point is that readers may not have possibility or desire to scroll the email to the end.
The size of the button should be at least 44×44 px with enough free space around it — this ensures that the reader clicks it easily with a thumb. In addition, the button has to be receptive for the touch.
We don’t recommend use hypertext links in the text especially a lot of them. One may struggle upon clicking it with a finger. So place buttons or a link in such a way that text or other links would not surround it.
If you want to leave the contact phone number do it with the users’ convenience in mind and add a “Contact us” button instead of actual phone number.
Keep a close eye on the size of images as mobile devices load pictures and photos much slower than a desktop. Visuals always make an email heavier to load, so their size should not be more than 599 px. And don’t forget about quality either — the readers will hardly favor blurry and pixilated images.
Add ALT-text to all the visuals because some email clients such as Outlook block pictures.
Use gifs very carefully as again some email providers do not display them and a heavy email can get into spam folder.
As for an infographic, it’s better to add it as a preview and video — as a thumbnail with a play button.
Summing it up
Follow these tips, but remember to check the display of an email on different devices. By the way, SendPulse email constructor allows this function.
Or you can use ready-made free responsive templates, find them in SendPulse template gallery. Check yourself while sending test emails on various devices and remember that the user-friendliness and functionality should be top-of-mind.
Send emails campaigns in SendPulse and achieve great results!