ContactMonkey's Email Builder creates HTML emails that automatically adapt to different devices. Follow these essential practices to ensure your emails display perfectly on mobile devices.
Essential Layout Practices
Use separate rows for content: Create a new row for each piece of content to ensure proper mobile display.
Apply 'Hide on Mobile' strategically: Use this feature for desktop-specific elements like tables or complex layouts that don't render well on smaller screens. Content will still display on desktop devices.
Avoid tables: Tables aren't mobile-compatible. If you must include tables, use the Hide on Mobile option to prevent display issues - learn more here.
Disable 'Stack on Mobile': This prevents side-by-side content from automatically stacking vertically on mobile devices when you want to maintain horizontal layout.
Design Specifications
Content width: Keep your email width at 800px - this provides optimal display across both desktop and mobile devices.
Font size: Set font size to 14px for optimal mobile readability.
Enable reverse stacking: Use this feature to ensure images appear before text on mobile devices for better visual hierarchy.
Preview and Testing
Use the mobile preview toggle: The Email Builder includes a mobile view toggle in the top left corner. Switch between desktop and mobile views while building your email.
Preview before sending: Always use the Preview button to check how your email appears on both device types.
Test thoroughly: Before sending, verify that:
- The email comes from the correct mailbox
- All formatting displays correctly
- All links redirect properly