Skip to content

Instantly share code, notes, and snippets.

@kruzyk

kruzyk/mail.html

Created January 17, 2020 15:46
Show Gist options
  • Save kruzyk/238e888c295b90677cea75e6e3836367 to your computer and use it in GitHub Desktop.
Save kruzyk/238e888c295b90677cea75e6e3836367 to your computer and use it in GitHub Desktop.
Download ZIP
Email code tricks
Raw
mail.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
<!-- Fix DPI Scaling Issues in Outlook -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<title>Linked text and numbers</title>
<!-- Character encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Open Graph Sharing Title -->
<meta property="og:title" content="Linked text and numbers" />
<!-- Set 100% scale, allow zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Remove default blue colour from links so you can style your own -->
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
<!-- Prevent iOS 11 from automatically scaling your email -->
<meta name="x-apple-disable-message-reformatting">
<!-- Enable CSS3 and media queries in Windows Phone 7.5 and higher -->
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
/* Reset CSS */
body {
margin:0 auto;
padding:0;
width:100%;
height:auto;
font-size:15px;
background-color:#ffffff;
line-height-rule:exactly;
mso-line-height-rule:exactly;
}
body, h1, h2, h3, h4, h5, h6, p, ul, ul li, ol, ol li, blockquote {
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
font-family: Helvetica, Arial, sans-serif;
font-weight:normal;
line-height:normal;
color:#666666;
}
/* Outlook.com and Hotmail .ExternalClass class override */
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Outlook 2007/2010/2013 'Read in Browser' Link */
#outlook a {
padding:0;
}
/* Outlook fix spacing left and right side of tables */
table {
mso-table-lspace:0pt;
mso-table-rspace:0pt;
border-spacing:0;
}
table, td {
border-collapse:collapse; /* If you’re using border-radius, use border-collapse:separate; instead */
}
/* IE ensure image resizing looks a little better using: -ms-interpolation-mode:bicubic; */
img {
-ms-interpolation-mode:bicubic;
border:0 none;
height:auto;
line-height:100%;
outline:none;
color:#666666;
text-decoration:none;
}
img,
img a,
a img {
border:0 none;
font-size:15px;
color:#666666;
text-decoration:none;
}
a {
outline:none;
color:#333333;
text-decoration:none;
}
/* Remove blue links on Apple and Samsung devices */
a[x-apple-data-detectors],
#MessageViewBody a {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
strong, b {
font-weight:bold;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="" style="background-color:#e4e4e4;">
<tr>
<td align="center" class="" valign="top" style="font-size:20px;padding-top:30px; padding-bottom:30px;">
<p style="color:#666666; font-size:20px;"><a href="https://www.google.com" style="color:#333333; font-size:20px;text-decoration:underline;">This is a link</a><br><br></p>
<p style="color:#666666; font-size:20px;">This number isn't linked 0444444333<br><br></p>
<p style="color:#666666; font-size:20px;">This is a link <a href="tel:0444444333" style="color:#333333;font-size:20px;text-decoration:underline;">0444444333</a></p>
</td>
</tr>
</table>
</body>
</html>
@kruzyk
Copy link
Author

kruzyk commented Jan 17, 2020 •
edited
Loading 

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="color-scheme" content="only">
        <meta name="supported-color-schemes" content="only">
        <meta name="format-detection" content="telephone=no">
        <meta name="format-detection" content="date=no">
        <meta name="format-detection" content="address=no">
        <meta name="format-detection" content="email=no">
        <meta name=”x-apple-disable-message-reformatting”>
        <title>Title</title>
        <style>
            * {
                box-sizing: border-box;
            }
            a[href^="x-apple-data-detectors:"] {
                color: inherit !important;
                text-decoration: inherit;
            }
            /* What it does: A work-around for email clients meddling in triggered links. */
            a[x-apple-data-detectors],  /* iOS */
            .unstyle-auto-detected-links a,
            .aBn {
                border-bottom: 0 !important;
                cursor: default !important;
                color: inherit !important;
                text-decoration: none !important;
                font-size: inherit !important;
                font-family: inherit !important;
                font-weight: inherit !important;
                line-height: inherit !important;
            }
        </style>
    </head>

@kruzyk
Copy link
Author

kruzyk commented Jan 17, 2020

https://litmus.com/builder/525a89f

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment