Email is a crucial part of marketing, and it’s a continually changing element. In the second quarter of 2015, 67 percent of emails were accessed on mobile devices, and 80 percent of users of these devices will dump your email if it’s too hard for them to read.
Squeezed to fit a small screen — for example, a 4-inch smartphone or a 7-inch tablet — a message can be virtually unusable, with text too small to read, wide layouts crunched on a narrow display, and broken layouts. The responsive email tips below can help avoid ugly displays and ensure readability on mobile devices.
Responsive Layout
As we detailed in our responsive web design article, responsive email means the message that looks great on a desktop computer or laptop will look just as good — although different — on a tablet or cell phone, greatly increasing the chances you’ll attract the attention of the mobile user. Responsive email is optimized to adjust or resize to correspond to the size of the screen displaying the message.
Responsive email implements media queries to change email layout, adjust the size of elements within email, and hide certain content. In some cases, responsive email will trade content between desktop and mobile devices.
While scalable and fluid email designs are fine for simple layouts and emails with mostly text, responsive design gives more control over layout and is ideal for companies with larger audiences who are likely to use mobile devices. Companies whose staff is knowledgeable about media queries will find responsive email design ideal for their needs.
Creating Responsive Email Designs
If your company already does its own email design, you can do your own responsive email design using CSS3 and HTML5 to create designs that are optimized for mobile users. Since most modern email platforms now support CSS3 and HTML5, it’s a great time to create attractive, robust email layouts that can be viewed on any device.
Many sources exist online to explore responsive email design in depth and offer tools and other email building resources to achieve greater understanding while honing and practicing your skills.
Responsive Email Templates
For smaller companies without a lot of resources or email design expertise on staff, templates can help secure the perfect design. Responsive email templates enable you to create email designs without having to work with code. These templates will ensure your email will be optimized for whatever device the reader is using, whether a desktop, laptop, tablet or cell phone, and that the reader will not have to pinch or zoom to read or view content effectively. Many templates feature drag-and-drop technology, so you can design right in your browser.
You can purchase collections of templates from companies, choosing from a variety of packages, and you may also be able to download a trial package that will enable you to try the templates before choosing whether to buy. Free templates are also available.
Design Tips
Here are a few tips for elements of responsible email design:
- Single-column layouts should stick to 500 to 600 pixels for readability.
- Links and buttons should cover a minimum of 44 x 44 pixels for easy clickability.
- The minimum font size that can be properly displayed on an iPhone is 13 pixels. Smaller fonts will be upscaled, which could break your layout.
- Avoid extras such as social-sharing buttons, as they are more difficult to use for mobile device owners.
- Place your call to action early in the email so the reader sees it without scrolling.
Messages should be especially concise when targeting mobile users, with crucial images and design elements early in the email. Scrolling through a long email is easy on a desktop with a mouse or keyboard; not so much on a touchscreen.
While the most common uses of email for marketing are newsletters and promotional content, the most effective emails are mobile opt-ins and birthday emails. Each offers an incentive for the reader; the mobile opt-in offers interesting or informative content, while the birthday greeting is a pleasant interlude that may come with a bonus such as a discount or a freebie, such as Cold Stone Creamery’s free ice cream treat. So not only should mobile emails have responsive design, they should also be compelling amid a sea of emails that may be a chore to read on a mobile device.
