Designing mobile-friendly or responsive email templates is a challenge, but it doesn't have to be difficult. You may find that a message shows perfectly on one screen yet looks completely different on another. The display of an email can drastically differ based on device type and OS, software version, email client/app, and much more. Here we uncover the best practices for responsive email design.
Simple Content Performs Best
Most senders achieve the best results by creating simple emails with the following qualities:
- Text-focused
- Simple HTML layout, usually a single column
- Limited use of images
- Straightforward buttons and links
For example, Gmail is optimized for messages with content in a single column. When rendering emails, Gmail ignores many CSS styles, including media queries, and uses text-to-image ratio as one factor for inbox placement.
However, this doesn't mean that all your content needs to be sparse and boring! If you link your call to action button to an Act-On landing page, you can present rich, well-designed web content that looks great on mobile and desktop alike and promotes audience engagement.
This strategy often results in better deliverability and higher open and click rates than more ambitious (yet less versatile) designs.
Use Single-Column Layouts
The most reliable standard for responsive design is to use a single-column layout. Many longtime email senders have found that this design works best across all possible email renders.
You may need to restructure your content so that it presents well in a single column. Some customers have given the appearance of multiple columns in a single text block, but we have observed that the responsiveness of design may still vary based on the rendering of each email client.
Take care with your Images
When adding images to your messages, here are some key considerations:
- Choose quality over quantity. Adding too many images or creating image-only emails can cause problems viewing the email. Due to data plan restrictions, or other image restrictions set up on the recipient's email (most common for B2B), your images may not come through. Consider using images when needed, and do not send emails that only contain images.
- Adding alt text to describe your image is also a great way to convey information to the end-user if an image is blocked or fails to download to their device. Image alt text is also an accessibility practice, discussed more below.
-
Pay attention to image size. In many cases, a wide image can stretch your message, especially for smaller screens. If you are having issues with the responsive nature of your design, changing how you size and present your images will make a big difference.
- We recommend trying the Fit Block setting when adding images in the Act-On Email Composer to give your message more flexibility (particularly beneficial for Microsoft Outlook). This works well with single-column email designs. To do this, add the image using the Image Block section and update the Image Align property, as shown here:
- We recommend trying the Fit Block setting when adding images in the Act-On Email Composer to give your message more flexibility (particularly beneficial for Microsoft Outlook). This works well with single-column email designs. To do this, add the image using the Image Block section and update the Image Align property, as shown here:
Choose Web Safe Fonts
Adding custom fonts is a great way to add life to your messages and can be important to preserve your branding. However, some fonts may not work or render properly on specific devices or email clients. There is a table here that details the email clients that do and do not work with web fonts.
Use a resource such as W3 schools - Web Safe Fonts for a complete listing of all web-safe fonts you can use as a fallback for your email.
Design for Accessibility
Accessibility is important to consider so that all of your contacts can read your message. Readers who need additional assistance often use assistive technology such as screen reading, zooming in, color adjustment, and access controls. Follow these best practices to ensure you're meeting these accessibility needs:
- Use high contrast colors for text and backgrounds
-
Add Alt Text to describe your images for users of screen readers
- Add image captions when you can't add Alt Text
- Avoid using font styling or color alone to indicate important information
- Make links descriptive so the user can expect what to find when they click
- Always include subject line preview text
Still need help with your custom email design?
You might like to try using custom stationery, or designing your email directly in HTML if you want layouts with multiple columns and more complex content to display consistently across devices.
If you still need help, our Professional Services team is experienced in creating complex yet responsive email templates and can help deliver a design that fits your unique needs.