Designing emails with mobile users in mind has become a standard practice to ensure that content looks attractive and is easily readable across a wide range of devices and browsers. You always have the option to send Plain Text emails, which are inherently mobile responsive, but if you're using Rich HTML or Interactive emails, you will need to pay attention to your design and how it displays in differently-sized viewing areas.

There are countless ways to finetune your designs to translate flawlessly from desktop to mobile. To get off to a strong start, try following these introductory steps for creating mobile-friendly designs.  

Instructions

Enable Responsive Design and use Percentage Widths

1. In the Email Composer, navigate to Design > Stationery
2. Open the dropdown menu for Responsive Design and select On
3. For Message Width, check the box for Use 100%.
4. Click Save

Optimize the layout for scrolling on mobile devices

• Use percentages, not fixed widths, in your message. This includes:
  • Stationery Properties - In the Email Composer, go to the Design tab and review the Stationery on the right-hand side. Toggle from using px to 100% width by checking the box Use 100%.
  • Content Blocks - if you have added DIVs or Tables into your Rich Text blocks, make sure they are also using a percentage width. You may need to view the table properties or examine the HTML code for the rich text block to find where this problem is occurring.
• Use white space to give elements of your email room to move around in adaptive or responsive layouts
• Using columns:
  • The easiest way to facilitate easy scrolling is to use a single-column format. 
  • Two- and three-column sections will vertically stack into a single column, from left to right. Group content into columns logically so that related information will display together on mobile.

Example - Column Stacking

Full width, columns are side-by-side:

When mobile, the columns stack:

Optimize your images for mobile devices 

• Keep image sizes small (1 MB or smaller) so your email loads faster
• Keep image width narrow (600px or less)
  
• Add alt text to images

Optimize for readability and interactivity 

• Use short, concise paragraphs 
• Choose a web-friendly font with a font size of 16px or larger for body copy and 20px or larger for headings
• Use large, tappable buttons and clickthrough links

Preview and Test the Design on Multiple Devices

• In the Review tab of the Email Composer, toggle through previews of your email in HTML, Text, and Mobile formats
• Send and check your email on your desktop and various mobile devices: Sending a Test Email Message
• You can also use our integration with Litmus to test email designs

FAQs and Troubleshooting

Issues for Apple Mail

• Auto-scaling: iOS10 and iOS11 auto-scales responsive email designs to fit mobile devices. Fixed emails are also auto-scaled but typically render with altered dimensions or skewed alignment. 
• Minimum Font Size: Small text will automatically be resized, make sure to have a minimum font size of 14 px for body text, and 20 px for header text.

Issues for Gmail

• CSS Properties: Supported Gmail CSS Properties and Media Queries
• Hidden Content: Avoid using HTML or CSS to hide content in your email messages. This can cause your email to be classified as spam. 

Issues for Outlook 

• Styled DIV elements: Outlook typically does not register any styles applied to <div> elements. Use <table> elements instead. Act-On automatically uses tables for emails designed in the Email Composer.