jeffsheets · September 6, 2024 05:39
diff --git a/email.html b/email.html
 <!-- 
  * 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>
	<!--
	* 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>