A responsive email is an email that displays well on any deviсe, whether it’s a desktop, a tablet, or a mobile phone. It automatically adapts to all screen resolutions, allowing subscribers to read emails on the go with convenience and meeting a modern demand in mobile presence.
In this video, Ana Hoffman offers simple tips to create traffic driving mobile-friendly emails.
Why is responsive email important?
More than half of all emails are read from mobile devices. Moreover, 75% of users claim they will delete an email if they can’t read it from their smartphones. A lack of usability caused by the absence of responsive design is a crucial factor for unsubscribing and marking emails as spam. In its turn, it damages sender reputation and email deliverability.
Without a responsive design, your emails are difficult to read on a mobile device, making the user scroll, zoom in and out — which is simply annoying.
How to create a responsive email?
With SendPulse drag-and-drop editor it’s easy breezy. You don’t need to worry about the responsive design of your emails since all templates created with SendPulse are responsive by default.
Before you launch your email campaign, preview how your email template looks on a desktop and mobile phone.
Responsive email examples
Billabong. This is an excellent example of a responsive email that promotes clothing, because, viewed on mobile, the text and CTA are distinct, and images get smaller to fit a smaller screen.
Designmodo. In this responsive email, the fonts and alignments change on a mobile phone, so the recipients can smoothly travel down to the CTA at the bottom of the email.
AdiInvite. In the mobile version of this email, the combination of pieces of text, images, and CTAs moves to a single column system to ensure convenient visual perception for the reader.
Responsive email tips and best practices
- Stick to a single-column layout. It simplifies your responsive email design, making it easier to digest information on the smaller screens of tablets and smartphones.
- Build a logical content hierarchy. Place essential information first, because the single-column design makes the template longer, narrowing the view for the recipients. When you place the most important details at the bottom, getting your message across the audience is at risk.
- Choose the appropriate font size. Keep the regular body text from 14-16px, and the headlines from 22-24px, making the email copy clear across all devices.
- Make a CTA easy to tap. Create a CTA contrasting with the background, and ensure its size is at least 44*44px. While creating your email template, select “the full width” to leave more space for tapping a CTA button on mobile devices.
- Use responsive images. If you work in HTML-editor, add class=“img-responsive” attribute to an <image> tag. In the drag-and-drop editor, all images are responsive by default.
Read our blog article here to get a bigger picture of email optimization for mobile devices.
- The article "A quick guide to designing responsive email" on InVision unveils the importance of a responsive email, compares scalable vs. fluid vs. responsive design, and offers best practices to follow.
- The article "Things I’ve Learned About Responsive Email Design" on Medium builds a holistic view of a responsive email. It defines the term, enumerates mobile clients that support and do not support media queries, considers responsive email techniques, sheds light on images in responsive emails, and offers tips to follow.
Last Updated: 2019-07-10