The template you are using for your HTML email marketing campaign can go a long way in converting your email recipients to customers. As such, you need to make sure that people who receive them can view your emails properly.
The question is: What is the best width for your email marketing campaign? In this article, we will attempt to answer the question, as well as discuss important tips related to creating effective HTML email newsletters.
A Brief Background on HTML Email Design
Back in the day, Microsoft Outlook was considered as the primary email client during the time when the average width of the desktop monitor was 1,024 pixels. As a result, email marketers had to conform to the size to fulfill the constraints. From there, the 600-pixel width for HTML email came into being.
However, times have changed since then, and screen resolutions have become bigger. In fact, 97 percent of screen resolutions are now larger than 1024 x 768. Not only that, 53 percent of email are actually being opened on mobile devices, with 26 percent on iPhones.
With these figures in mind, a necessary email marketing revolution came into being. Now, marketers want their HTML email messages to look like actual websites. That’s why you can see email campaigns with big, bold, full-width hero images.
Effective HTML Email Design: A Question of Width?
For emails made in Gmail at widths wider than 640 pixels, the background color wouldn’t appear in the margins even at the most reasonable browser size. In addition, email clients don’t use the entire screen to display an email message. Instead, they will either show ads or add a menu in order to limit the space on a screen.
If you want an HTML email template that’s readable in every email client, there might be a need to widen the email width to more than 640 pixels. According to Stig Morten Myre of Campaign Monitor, an email width of 600 pixels is still recommended.
There are different factors to look at when determining the maximum width, but the biggest consideration is the email client that your subscribers use. When you are writing emails, do you adapt to the width of those clients? Does the subscriber end up doing horizontal scrolling for emails that are too wide?
Another consideration is the line length of your text. It is recommended to limit your text to less than 75 characters per line. If you are using the same font size on mobile and desktop, you can go for a minimum width that will fit 45 characters per line and 75 characters for the maximum width. While these are only guidelines, these figures can be useful in designing your email template.
When designing an HTML email template, limit it at a width of 600 pixels on desktops and 320 pixels on mobile. This will ensure that emails will look great on any kind of device or email app.
How To Make A Responsive HTML Email Design
Given the fact that a lot of emails are now read in mobile devices, it is important for you to adopt a responsive HTML email design. You can use a wide range of coding techniques such as media queries, fluid layouts, and others.
For mobile device screens, a multiple-column layout will make your email look cramped, cluttered, and hard to navigate. Use single-column layout instead to make it cross-device compatible and easy to read when viewed using different email clients.
Aside from that, a single-column template will make your HTML email design simple, thereby highlighting the more important parts of your content. The optimal width for mobile design is 320 pixels and 640 pixels for Retina.
People do not have the time to scroll down and look for the “call to action” button, so put it above the fold. More so in the mobile version, there might not be enough room for all the content of your newsletter. Make sure that you make your HTML email content concise, but with an outbound link to your preferred landing page.
If your email is full of products and offers, you should limit the number for the mobile version. In other words, the desktop version should not be similar to the mobile layout. When it comes to the mobile version, user experience should be at the top of your priority.
In short, trim down your content and focus on the main message if you want aim for better conversion rates.
Buttons are designed to be tapped in order to follow a certain conversion path. As such, your button need not be large enough so users could easily tap them. The call to action button should be at least 40×40 pixels or bigger to allow easy engagement by your reader.
You should also avoid using hyperlinks and avoid cluttering multiple hyperlinks together. Use buttons instead of hyperlinks. For phone numbers, use a ‘tap to call’ button.
Choose fonts that are clear and easy to read. A small font size could result to a lost customer. Nobody would want to strain their eyes reading a small text.
The minimum size should be 13 or 14 pixels for text and 20-22 for titles. This will make your HTML email more readable on a small screen.
Mobile devices load web content more slowly than desktops or laptops, so consider the weight of your email. Use smaller and responsive images if you do not want to lose your readers due to poor loading time. This will help save bandwidth as well.
For high-resolution mobile devices such as Retina or Super Amoled, use images that are two times larger. Never assume that your images will always be visible. Some email clients display images but others don’, and so the alt tag may be helpful for situations like this.
The last and most important step before sending your email to subscribers is to test it. You need to ensure that your HTML email template will look perfect on all major mobile devices.
The width of your email newsletters may sound simple, but it’s actually a very powerful factor that makes the difference between effective email marketing an a lousy one.