Skip to content

Instantly share code, notes, and snippets.

@roachhd
Last active August 29, 2015 14:09
Show Gist options
  • Save roachhd/12f0ba1aa6fed83033d8 to your computer and use it in GitHub Desktop.
Save roachhd/12f0ba1aa6fed83033d8 to your computer and use it in GitHub Desktop.
HTML5 Email Boilerplate

#HTML5 E mail Boilerplate

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title><?php echo $subject; ?></title>
    <style type="text/css">
        #outlook a {padding:0;}
        body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
        .ExternalClass {width:100%;}
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
        #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
        img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
        a img {border:none;}
        .image_fix {display:block;}
        p {margin: 1em 0;}
        h1, h2, h3, h4, h5, h6 {color: black !important;}
        h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: blue !important;}
        h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {color: red !important;}
        h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }
        table td {border-collapse: collapse;}
        a {color: orange;}
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
        <tr>
            <td>
                <table cellpadding="0" cellspacing="0" border="0" align="center">
                    <tr>
                        <td width="200" valign="top"><a href="" target ="_blank" title="Styling Links" style="color: orange; text-decoration: none;">Example Links</a></td>
                        <td width="200" valign="top"><img class="image_fix" src="" alt="" title="" width="" height="" /></td>
                        <td width="200" valign="top"></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