Responsive Mail Design Guide: Make your emails perfectly present on a variety of devices
Core points
display property of the table cell. The latter is more elegant and uses native CSS rules. img {max-width: 100%;}). However, using media queries, one image can be hidden and another image can be used instead as the background image. 
In previous articles about press release writing, we have learned some tips that can greatly change how your emails appear in different clients.
In addition, we must consider mobile devices, which are increasingly used in email reading. This raises the problem of building responsive layouts for emails.
Since we know that email templates are built with HTML tables and have inline CSS, our work is a little more complicated than usual:
Luckily, most mobile devices have high compatibility with modern CSS rules, so we can easily solve all of these problems with media queries, use a lot of !important declarations (to override inline styles), and Pay attention to the arrangement of contents carefully.
For such projects, it is important to adopt a "mobile-first" approach, avoiding layouts that cannot be arranged correctly on small devices.
Please note that even in this article we only discuss responsive issues, responsive mobile mail is not necessarily a good mail. Effective mobile email design involves many elements, including font size, layout combinations, and more: these are very important tasks, which we will cover in another article.
About responsiveness, we can identify two types of mail: single column and multiple columns.
Single-column layout (usually only one title image) has no special needs. Since they don't need to rearrange elements, we just need to note that all widths are elegantly downgraded to match device sizes. This is not a responsive design, but a classic example of a scalable design (see Scalable, Fluid, or Responsive: Understanding how to move mail).
Single-column layout
<table> cellspacing="0" cellpadding="0" border="0" width="600"> </table>
@media screen and (max-width:480px) {
table {
width: 100%!important;
}
}Multi-column layout
There are two simple ways to achieve this:
Using nested tables
display
attribute, which causes the table to be horizontally aligned.
Each element must have a table align="left"specific
When the device width decreases, we have to resize the container and force all table columns to 100% width. 
This technique ensures compatibility with most clients: I tested the demo files in Litmus and all clients get good results, allowing the following warning:
table[class="body_table"] {
width: 600px;
}
table[class="column_table"] {
width: 180px;
}
table[class="spacer_table"] {
width: 30px;
height:30px;
}
@media only screen and (max-width: 480px) {
table[class="body_table"] {
width: 420px!important;
}
table[class="column_table"] {
width: 100%!important;
}
}Outlook 2007, 2010, and 2013 (these versions of Outlook use Microsoft Word as the rendering engine: see the Microsoft Outlook Client Rendering Difference Guide on the Litmus blog);
The second method of building multi-column messages is more elegant and uses native CSS rules.
This technique involves changing the display properties of the default table cell when the device width is reduced (you can find many examples on responsiveemailpatterns.com). This causes cells to re-stack vertically:
<table> cellspacing="0" cellpadding="0" border="0" width="600"> </table>
The results of this test are very good: all clients render the test mail correctly (sometimes there are subtle errors), but remember that we have tried empty mail and the results may vary after adding content.
In responsive mail, images only require the classic responsive technology we currently use in the web (img {max-width: 100%;}).
However, as suggested in Campaign Monitor's Responsive Mail Design Guide, using media queries, you can hide one image and replace it with another image as the background image.
@media screen and (max-width:480px) {
table {
width: 100%!important;
}
}
Remember that even images hidden through CSS will load on the client, so be aware of this.
A good option is to use the same image for the img tag and background-image source. You have to prepare a multiple-purpose image for use in all these ranges, like the following example:
After selecting the appropriate image, you can use it for many media query breakpoints. Once you're ready, you only need to add a small amount of CSS rules:
table[class="body_table"] {
width: 600px;
}
table[class="column_table"] {
width: 180px;
}
table[class="spacer_table"] {
width: 30px;
height:30px;
}
@media only screen and (max-width: 480px) {
table[class="body_table"] {
width: 420px!important;
}
table[class="column_table"] {
width: 100%!important;
}
}You can also add the background-size attribute to adjust each breakpoint view (note the client's support for this rule).
Unfortunately, this is unlikely to solve all your needs for high-density devices—but it can reduce the number of files loaded for all other cases.
So, is there a single, versatile, and best responsive email creation technology ever?
Usually, the answer is no. Each project requires a different approach and there are different best solutions. The real answer is to master a range of useful techniques and constantly try new methods.
(The FAQ section provided in the original text is omitted here, because the content of this part is less difficult to rewrite and is longer than other parts of the original text. To avoid too long output, it is omitted here.)
The above is the detailed content of A Box of Tricks for Building Responsive Email. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
