How Should I Design Emails for Different Devices and Clients?

Designing mobile-friendly and/or responsive email templates is much harder than it seems. A message that's perfectly designed for one screen may look completely wrong on another. The display of an email can drastically differ based on device type and OS, software version, email client/app, and much more.

Simple Content Performs Best

From observing our customer base, we have seen that most senders achieve their best results from text-based emails with simple HTML, limited imagery, and straightforward buttons. This strategy often results in better deliverability and higher open/click rates than more ambitious designs. 

In many ways, Gmail is optimized for messages containing words 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 CTA button to an Act-On landing page, you can present rich, well-designed web content that looks just as nice on mobile and desktop alike.

Single-Column Layouts

The most reliable standard for responsive design is in a single column. 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 responsiveness of design may still vary based on the rendering of each client.

Image sizes are also important - in many cases, your message "canvas" will be stretched to the width of your widest image. 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 to Block" setting for images in the Act-On Email Composer to give your message more flexibility.

Custom Email Design

You may need to develop custom stationery and HTML if you want layouts with multiple columns and other more complex content to display consistently across devices. Our Professional Services team has delivered these kinds of projects for customers and can discuss options with you.