Do you want your email newsletters and marketing campaigns to look how you want them on any device? Of course, you do. No one wants their hard work to go down the drain.
Luckily, you can create responsive email designs ready to impress your subscribers in five easy steps. So grab some refreshments, put on your favorite playlist or a drink and let’s make some positive shifts in your email designs.
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:
| Column 1 content here | Column 2 content here |
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
Use responsive image sizing when adding images to your email. Doing so will lead the images in your email to adjust perfectly to the screen dimension it is being viewed on.
For example, instead of just including a large 1000px wide image, also include:0
- A medium size (around 600px)
- A small size for narrow columns (around 400px)
- A tiny size for small mobile screens (around 200px)
To specify multiple image sizes in your email, use the Add img srcset attribute.
Make media mobile-friendly
Provide size options for other media such as videos and GIFs too.
Videos should have MP4 sources in different resolutions. GIFs and iframes (like YouTube embeds) should have width constraints that resize to fit any screen.
Note these things and your email images, videos and other media will display perfectly 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 the 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 inboxes. Creating a great responsive email design experience for your subscribers is worth the effort.
Test, test and test some more
Check emails on mobile devices
We all know the majority of people use their mobile devices to access emails on the go. So to make sure your email is mobile-friendly, test your email by sending it 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 the alt texts, image captions and image descriptions 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 that any buttons or forms function as expected. This will help you ascertain that 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. 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 and are easy to read in a hurry.
- 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
!importantafter width declarations to override some email client CSS. - Add fallback code for Outlook 2007-2013. These older versions need separate styling.
Following these troubleshooting tips will solve the most common responsive email issues.
Need a helping hand with responsive email design?
Icegram Express is your digital helping hand! It’s super easy to use, even if you’re not a tech wizard. With Icegram Express, you can create emails that look fantastic on any device, no matter how big or small the screen. It’s like having a magic wand that makes your emails responsive in a snap!
- Fluid Layouts: Icegram Express uses fluid layouts that adjust to different screen sizes. This ensures that your emails look great and are easy to read on all devices.
- Responsive Images: Images are automatically resized to fit the screen width, preventing them from being distorted or cut off.
- Media Queries: Icegram Express allows you to use media queries to hide or show content based on the screen size. This helps you to create emails that are optimized for both desktop and mobile devices.
- Easy-to-Use Interface: Icegram Express has a user-friendly interface that makes it easy to create responsive email designs, even if you don’t have any coding experience.
Conclusion
These are some of the many ways to ensure your emails are responsive. You must note that more than 50% of emails are opened today via mobile devices, hence 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 can read and engage with regardless of the device they’re using.
FAQ
- What’s the difference between responsive and mobile-first email design?
Responsive design adapts to various screen sizes by adjusting elements, while mobile-first design prioritizes the mobile experience and then scales up for larger screens. Mobile-first focuses on creating an optimal experience on small devices first, ensuring emails work well across all devices. - Are there best practices for typography in responsive email design?
Yes, use legible font sizes for mobile (at least 14px for body text and 22px for headlines) and ensure sufficient contrast between the text and background. Avoid long blocks of text; break content into smaller, scannable sections to enhance readability on small screens.