Last active
September 6, 2024 05:39
-
-
Save jeffsheets/11f1f111df45ff4c0809c947d6642900 to your computer and use it in GitHub Desktop.
HTML Email structure and CSS hacks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
* A collection of various HTML Email hacks | |
** Along with these, user an html boilerplate like https://github.com/seanpowell/Email-Boilerplate | |
** Hacks are from many sources including: | |
** https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design | |
** https://litmus.com/community/discussions/1007-outlook-image-sizes | |
** https://www.emailonacid.com/blog/article/email-development/how-to-code-emails-for-outlook-2016/ | |
--> | |
<!-- 1) Fix image sizes in Outlook --> | |
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" | |
xmlns:v="urn:schemas-microsoft-com:vml" | |
xmlns:o="urn:schemas-microsoft-com:office:office"> | |
<head> | |
<!-- https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013 --> | |
<!--[if gte mso 9]> | |
<xml> | |
<o:OfficeDocumentSettings> | |
<o:AllowPNG/> | |
<o:PixelsPerInch>96</o:PixelsPerInch> | |
</o:OfficeDocumentSettings> | |
</xml> | |
<![endif]--> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<style type="text/css"> | |
body { | |
/* 2) Fix sizing on mobile browsers */ | |
-webkit-text-size-adjust: 100%; | |
} | |
</style> | |
</head> | |
<!-- 3) Full page backgrounds are weird, so specify them on both the body and a full size table --> | |
<body bgcolor="#f5f5f5"> | |
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5" style="background: #f5f5f5;"> | |
<tr> | |
<td> | |
<table width="100%" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" align="center"> | |
<!-- 4) Fix weird extra bottom pixel row from showing on Outlook images --> | |
<tr style="font-size:0; line-height:0; border-collapse:collapse;"> | |
<td> | |
<table border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> | |
<tr style="font-size:0; line-height:0; border-collapse:collapse;"> | |
<td> | |
<!-- 5) Specify a width (without px) to get Outlook to size the images correctly --> | |
<img src="https://example.com/img2.jpg" width="528" style="display: block;" alt="example"> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
<tr> | |
<td style="text-align: center;"> | |
<!-- 6a) Hack for rounded corners on Outlook | |
Use https://buttons.cm/ to generate correct arcsize | |
Note that AWS Pinpoint will not keep click analytics on VML hrefs (maybe others like Mailchimp too?) | |
--> | |
<div><!--[if mso]> | |
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" | |
xmlns:w="urn:schemas-microsoft-com:office:word" | |
href="https://example.com/download" | |
style="height:37px;v-text-anchor:middle;width:145px;" | |
arcsize="138%" strokecolor="#ffffff" strokeweight="2pt" | |
fillcolor="#ffffff"> | |
<w:anchorlock/> | |
<center style="color:#0056ff;font-family:sans-serif;font-size:15px;font-weight:bold;"> | |
Download | |
</center> | |
</v:roundrect> | |
<![endif]--> | |
<!-- 6b) border-radius does not work in Outlook, so use the VML for that above --> | |
<!-- 7) Gmail forwards will strip the classname from anchor tags, so inline all styles on 'a' tags --> | |
<!-- 8) Anchor link padding (or really any padding) does not work, so use width and line-height instead --> | |
<a href="https://example.com/download" | |
class="btn-link" | |
style="mso-hide:all; | |
width: 145px; | |
line-height:29px; | |
display:inline-block; | |
text-align: center; | |
border:2pt solid #ffffff; | |
background: #ffffff; | |
color: #0056FF; | |
font-weight: 700; | |
margin: 0 auto; | |
text-decoration: none; | |
border-radius: 40px;">Download</a></div> | |
</td> | |
</tr> | |
<tr style="font-size:0; line-height:0; border-collapse:collapse;"> | |
<td> | |
<!-- 9) Outlook and iOS Email need hacks to get line-height correct. Here's one to mimic a negative margin by shrinking lines together --> | |
<h1 style="margin: 0; text-align: center; color: #0D4C70; line-height: 21px; mso-line-height-rule:exactly; -webkit-text-size-adjust: none; font-size: 27px; font-weight: bold;">Example Header</h1> | |
<h1 style="margin:0; text-align: center; color: #5DF3CC; line-height: 21px; mso-line-height-rule:exactly; -webkit-text-size-adjust: none; font-size: 27px; font-weight: bold;">Example Header</h1> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment