While mobile has taken email over by force, some small factions of other devices still hold their own. The percentage of emails read on mobile devices remains steady at 54% of opens as of the end of 2019. Desktop dropped to 16% of opens and webmail grew to 30%.
This means that it is as important as ever to make sure that your email’s design will work on all devices and clients, especially on mobile devices where the majority of emails are read.
There are a few different approaches to create email designs that work across devices and platforms. They have a range of unique features that gives each its pros and cons.
Scalable
Also known as: Mobile aware, mobile-friendly, agnostic, or mobile-first
When you are designing an email for mobile, this is where you start. Every other approach builds off the basis of scalable design. This style of email design works well across both desktop and mobile without using any code to adjust tables or image size. It uses a grid system for alignment and proportion, single-column design, and big buttons to ensure that it works on both desktop and mobile.
Pros
- Easy to implement.
- No coding needed to change how the email shows up.
- It is reliable across clients and devices.
Cons
- Some Android apps do not scale at all, which means users will have to scroll up and down AND left and right.
Tips for implementation
- Make your buttons large and touch-friendly.
- Use a grid system for alignment.
- Make sure that crucial information and the CTA are at the upper left of the email to make sure it can be seen on devices that don’t scale.
Fluid
<table width=”100%” cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td>
<table width=”600″ align=”center” cellpadding=”0″ cellspacing=”0″ bgcolor=”#ffffff”;>
This style is in between scalable and responsive design. It uses percent-based sizing for tables and images so they will fit on whatever screen they are viewed on.
Pros
- Content “flows” to fill the screen.
- Simple for teams with limited resources.
- Layouts are simple.
Cons
- It’s hard to control how text and images interact and how they appear on each client.
Tips for implementation
- Good for emails with text-heavy layouts
- On larger screens, you need to constrain the width.
Responsive
/* Media Queries */
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
This form of email design is the industry standard in 2020.
It can add to the fluid design style by adding more control of elements using CSS media queries. It uses the media queries to control elements of the email.
This form is best known for its ability to control the layout of emails, change text, button, and image size while also allowing individual elements to be swapped or hidden depending on client/device.
Pros
- Designed specifically to fit targeted devices
- Will be easier for audiences to engage
- Best fit for most mobile devices
- Gives designers the most layout control
Cons
- Can be complicated for teams with fewer resources
Tips for implementation
- Start small by changing the size of texts, get more complex from there
It is up to you which of these mobile-friendly email styles you choose to implement. Scalable and fluid styles don’t require as much know-how or resources to implement, while both responsive and hybrid designs are the best fit for creating emails that look good on the most screens possible. Choose the one that is the best fit for your team now. It’s better than ignoring mobile and making half your audience look at an email that doesn’t fit on their screen.
Which style of email design does your team favor? Why? Let us know in the comments section.
