Designing email for mobile is essential to ensure your content displays cleanly, loads quickly, and remains readable across different devices. Plain Text emails are always mobile-friendly, but for Rich HTML or Interactive emails, you’ll need to adjust your layout, widths, images, and typography to ensure a smooth experience.

While there are many ways to fine-tune email design for mobile, start with these foundational steps to build mobile-friendly layouts in the Email Composer.

Instructions

Enable Responsive Design & Use Percentage Widths

1. In the Legacy Email Composer, go to Design > Stationery.
2. Under Responsive Design, set the dropdown to On.
3. For Message Width, check Use 100% to support flexible layouts.
4. Click Save.

Optimize the Layout for Scrolling on Mobile Devices

• Use percentage-based widths throughout your message, including:
  • Stationery Properties: In Design > Stationery, toggle message width to 100%.
  • Content Blocks: If you’ve inserted tables or custom DIVs in Rich Text blocks, ensure they also use percentage widths. Switch to the HTML view if needed.
• Use generous white space to allow elements to reflow smoothly when screen sizes shrink.
• Use columns thoughtfully:
  • A simple single-column layout is easiest for mobile scrolling.
  • Two- and three-column sections will stack vertically on mobile from left to right. Group related content logically.

Example: Column Stacking

Desktop view (columns appear side-by-side):

Mobile view (columns stack vertically):

Optimize Your Images for Mobile

• Keep images small (ideally 1 MB or less) for faster loading.
• Use a maximum width of 600px to ensure compatibility.
• Always include descriptive alt text.

Optimize for Readability & Interactivity

• Use short, scannable paragraphs.
• Choose web-safe fonts and keep text sizes readable:
  • 16px+ for body text
  • 20px+ for headings
• Use large, tappable buttons and links with sufficient padding.

Preview & Test Designs on Multiple Devices

• In the Review tab, preview your email in HTML, Text, and Mobile formats.
• Send yourself test emails and review them on desktop and mobile devices: Sending a Test Email Message.
• You can also test designs using our Litmus integration.

FAQs & Troubleshooting

Apple Mail

• Auto-scaling: iOS devices automatically scale email layouts. Fixed-width emails may stretch or misalign.
• Minimum font sizes: Small text may auto-enlarge. Use 14px+ for body and 20px+ for headings.

Gmail

• Supported CSS: Review Gmail’s supported CSS properties.
• Avoid hidden elements: Using CSS to hide content may trigger spam classification.

Outlook

• Styled DIV elements: Outlook ignores styling on <div> elements. Use table-based layouts instead. Act-On automatically uses tables for messages built in the Email Composer.