Do you want your email newsletters and marketing campaigns to look amazing on any device? Of course you do. No one wants their hard work to become unreadable in someone’s inbox. Luckily, in just five steps, you can ensure that your emails are responsive and ready to impress subscribers. So grab some refreshments, your favorite playlist or a drink, and let’s begin making sure they look their best on any screen.
Set column widths in percentages, not pixels
To make your email design responsive, set the column widths using percentages rather than fixed pixel values. This allows the columns to flexibly adjust to different screen widths.
Use a fluid grid
The fluid grid approach uses percentages for column widths so they can expand and contract as needed based on the screen size. For a simple two-column layout, make the left column 60-70% wide and the right column 30-40% wide. For example:
<table>
<tr>
<td width=”65%”>Column 1 content here</td>
<td width=”35%”>Column 2 content here</td>
</tr>
</table>
This will allow Column 1 to take up 65% of the available space and Column 2 the remaining 35%. On a large desktop screen, Column 1 may end up 650px wide, while on a small mobile screen, it may only be 200px wide. But the relative proportions will stay the same.
Add media queries for responsive breakpoints
Media queries allow you to apply different styling rules based on the screen width. You can use them to make further adjustments to your fluid grid at different breakpoints. For example:
/* For mobile phones: */
@media only screen and (max-width: 600px) {
table, td {
width: 100% !important;
}
}
/* For tablets: */
@media only screen and (min-width: 601px) and (max-width: 900px) {
table, td {
width: 80% !important;
}
}
This will make the table and columns expand to fill 100% of the screen width on small phones and 80% on tablets, making the design fully responsive.
Use fluid images and media that resize
To make your email design mobile-friendly, images and other media need to resize fluidly to fit any screen size. Follow these tips:
Use responsive image sizes
When adding images to your email, use responsive image sizing. This means providing multiple image sizes so the email client can choose the right size for the screen it’s being viewed on.
For example, instead of just including a large 1000px wide image, also include:
- A medium size (around 600px)
- A small size for narrow columns (around 400px)
- A tiny size for small mobile screens (around 200px)
The email client will automatically choose the best size for the screen and bandwidth. To specify multiple image sizes in your email, use the <img srcset> attribute.
Make media mobile-friendly
For other media like videos or GIFs, also provide multiple size options. Videos should have MP4 sources in different resolutions. GIFs and iframes (like YouTube embeds) should have width constraints that resize to fit any screen.
Keep these tips in mind and your email images, videos, and other media will display beautifully on any device. Your subscribers will appreciate an email that looks great and is easy to read wherever they open it.
Size font in ems, not pixels
To make your email design mobile-friendly, you’ll want to size font in ems instead of pixels. Pixels are fixed units, so if someone has their browser zoomed in, the text can become distorted. Ems, on the other hand, are relative units that scale with the user’s settings.
Use a responsive email framework
A responsive email framework has pre-built components that automatically resize for any screen width. Some popular options are MJML, Foundation for Emails, and Ink. These frameworks use ems for sizing, so you don’t have to worry about doing the conversion yourself.
If not using a framework, convert pixels to ems
If you want full control over your CSS and prefer not to use a framework, you’ll need to convert any pixel sizes to ems. Here’s how:
- Determine your base font size in pixels. Let’s say it’s 16px.
- Convert that to ems. 1em = 16px (your base size), so 16px = 1em.
- Any size you want to use, divide by 16px and multiply by 1em. For example, for a 24px heading, 24px/16px = 1.5em.
- Replace all pixel sizes in your CSS with the em equivalents.
Align your content responsively
To make your email design responsive, you need to align your content so it displays properly on any screen size. Follow these steps:
Use fluid measurements
Rather than using fixed pixel widths for columns, images, and containers, use percentages. This will allow your content to scale proportionally based on the screen width. For example, instead of an image with width=”600px”, use width=”50%”.
Avoid heavy styling
Keep your email simple by limiting the use of custom styling, which won’t display properly in some email clients. Rely on basic HTML tables, inline styles, and the align attribute for layout. Center elements when needed.
Following these practical steps will ensure your email content displays beautifully no matter what device your readers use to open their inbox. Creating a great responsive email design experience for your subscribers is worth the effort.
Test, test, and test some more
Check how it displays on mobile devices
We all know the majority of people use their mobile devices to access emails. So to make sure your email is mobile friendly, test your email by sending them on different mobiles. Check them on Androids, iPhones and tablets. Check how images, buttons, and text are displayed in both portrait and landscape mode.
Test on major email clients
Not all email clients display emails the same way. Do tests on Gmail, Outlook, Yahoo Mail, and any other major email services your subscribers commonly use. Look for any issues with how images, embedded links, buttons, or other interactive elements are displayed. Make edits to your code to fix any display issues and ensure consistency across clients.
Check how fallback content appears
For subscribers with images disabled in their email client, your fallback content will appear in place of images. Double-check that all alt text, image captions, and image descriptions make sense on their own and provide context for your email content. The fallback content should still result in a good reader experience, even without the images.
Review on an email rendering service
Use a free email rendering testing service like Litmus, Email on Acid, or Mosaico to see how your email design renders across a wide range of email clients and devices at once. They provide reports highlighting any issues to address to improve your email’s responsiveness. Make changes to your code and re-upload test emails until the reports come back clean.
Double-check links and interactive elements
Embedded links, buttons, and any other interactive components in your email need to work properly across all platforms. Double-check that links go to the intended destination and any buttons or forms function as expected. Test them multiple times to ensure there are no broken links or non-functioning elements before launching your campaign.
Constant testing and tweaking are needed to perfect your email’s responsive design. But putting in the effort upfront will result in an email with broad reach and high engagement across all your subscribers’ devices and email clients.
Troubleshooting common responsive email issues
Content overflowing on mobile
- Use single column layouts. Multiple columns rarely work well responsively in email.
- Keep paragraphs and sections short and concise. Long blocks of text are hard to read on small screens.
- Use bullet points and numbered lists when possible. They take up less space than paragraphs.
- Hide secondary content on small screens. You can use media queries to show/hide content based on screen width.
Email width issues
Some older email clients have issues with responsive email widths. To fix this:
- Set a max-width on your email container. We recommend 600px for most emails.
- Add !important after width declarations to override some email client CSS. For example:
- Add fallback code for Outlook 2007-2013. These older versions need separate styling:
Following these troubleshooting tips will solve most common responsive email issues. Let me know if you have any other questions!
Conclusion
These are some simple ways to make sure your emails are responsive. Keep in mind more than 50% of emails are opened today via mobile devices, so optimizing for smaller screen sizes is essential. Review all your templates for email and make any necessary changes to the font size as well as image size and spacing. Your recipients will appreciate receiving an email that they are able to read and engage with no matter which devices they’re using.