Given the desired output functionality, recommend methods for creating responsive emails.
Emails can be opened on different devices with varying screen resolutions and email clients. To ensure that emails are displayed properly across devices, they should be designed responsively and according to best practices.
Responsive design contracts and expands content and design elements based on the screen size of a device. This ensures that the email content is readable and includes all essential design elements on all devices.
Marketing Cloud offers out-of-the-box mobile-optimized email templates with fluid, liquid, scalable, adaptive, and responsive designs. To detect screen sizes, Marketing Cloud uses CSS3 @media queries. Based on the screen size, email styles are overwritten to automatically tailor content to fit in different screen sizes. Apart from out-of-the-box templates, custom email templates can be created.
Mobile emails should be kept simple and easy. Single-column templates, large text sizes, optimized images, and buttons with plenty of space allow mobile users to easily read and navigate emails.
Some interactions such as hover or mouseover are difficult or impossible on touchscreens and should be avoided in responsive designs.
The content in mobile emails should be kept brief and organized. Content blocks ensure that keep messages focused and easy for readers to scan.
To prevent large images and graphics from overflowing in mobile emails, their height and width should be limited. Furthermore, alternative texts and background colors should be provided, to account for image blockers.
Important information should be kept above the email fold. This ensures that the most relevant messages are visible without users needing to scroll. The fold for mobile devices appears after about 150 pixels and for desktops after approximately 350 pixels.
Emails should be designed from a mobile-first perspective. This means that emails should be designed for mobile devices first, and then extended with interactive content and calls to action for larger devices and screen sizes.