As a front-end developer I’ve come across many challenges while coding HTML emails. Here are some of the common scenarios I’ve encountered and their solutions.
How do I remove whitespace around images?
This can happen in Gmail. Add display block and remove margins/padding from all images.
<img src="" alt="" style="display:block;margin:0;padding:0;" />Why doesn’t Microsoft Outlook respect list styles when sending HTML emails?
Have a look at Campaign Monitor’s guide to CSS support in HTML emails.
list-style-image, list-style-position and list-style-type are not supported in Outlook 2007 or Outlook 2010.
Using tables is standard practice in HTML email builds because CSS support is not consistent across email clients, particularly Outlook on desktop (mobile CSS support is much stronger).
Use table cells with exact widths specified for the layout of your list (one cell with a bullet • and another cell for the text), and have each item in a new row or separated by <br>s.
How do I display background colours in Outlook?
This method works across email clients.
<table bgcolor="#3399ff" style="background:#3399ff;"><tr><td>test</td></tr></table>Spaces below TD cells in tables are inconsistent
Keep your table structure and try these additions:
- Add the
valignattribute to all table cells (options: top, middle, bottom) - Remove margins and padding from images
- Use inline css on the table cells rather than internal css
How do I make images look sharp on mobile?
Export images @2x resolution, meaning twice the display size so they appear crisp on high resolution (retina) displays. Make sure the image and surrounding table cell has a fixed width on desktop, to stop Outlook from rendering the full size image. Use CSS media queries to make the images responsive on tablet and mobile.
Litmus Understanding Retina Images in HTML Email
How do I use a custom font with a fallback for Outlook?
Add a custom font.
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700');
</style>Usage: style="font-family:'Open Sans',Verdana,sans-serif;"
Then define what font Outlook should use throughout the email. Note: the * selector is not supported in Outlook 2007+.
<!--[if mso]>
<style type="text/css">
body, table, th, td, h1, h2, h3, h4, h5, li, span, p, div {
font-family: Verdana,sans-serif !important;
}
</style>
<![endif]-->How do I show different images on desktop and mobile?
Add desktop images to the first table row and a hide-for-small class on the table cells. In the second row add images for mobile, making sure to set the image width to 0 so the images are hidden on desktop.
<table width="600" cellspacing="0" cellpadding="0" border="0" style="width:600px;margin:0 auto;" align="center" class="full-width">
<tr>
<td width="300" class="hide-for-small" style="width:300px;" align="right" valign="top">
<img src="https://via.placeholder.com/600x300?text=Desktop Left" alt="" width="300" height="auto" style="width:300px;display:block;margin:0;padding:0" class="full-width" />
</td>
<td width="300" class="hide-for-small" style="width:300px;" align="left" valign="top">
<img src="https://via.placeholder.com/600x300?text=Desktop Right" alt="" width="300" height="auto" style="width:300px;display:block;margin:0;padding:0" class="full-width" />
</td>
</tr>
<tr style="display:none;" class="show-for-small">
<td width="0" class="show-for-small">
<img src="https://via.placeholder.com/600x300?text=Mobile Top" alt="" width="0" style="width:0;margin:0;padding:0" class="full-width" />
</td>
<td width="0" class="show-for-small">
<img src="https://via.placeholder.com/600x300?text=Mobile Btm" alt="" width="0" style="width:0;margin:0;padding:0" class="full-width" />
</td>
</tr>
</table>.show-for-small {
display:none;
width:0 !important;
height:0 !important;
mso-hide:all;
}
@media only screen and (max-width:600px) {
.full-width {
width:100% !important;
display:block!important;
height:auto !important
}
.hide-for-small,
.hide-for-small * {
display: none !important;
line-height: 0 !important;
height: 0 !important;
width: 0 !important;
}
.show-for-small {
display:block !important;
line-height:inherit !important;
max-height:none !important;
height:100% !important;
width:100% !important;
}
}