'How can I vet my HTML email signature code

I'm new to HTML and I am designing an HTML email signature for the first time. I believe the code is properly written but I've had some issues. I attempted to get clearer images by saving each slice at twice the resolution then downsizing using HTML. However, in some email clients each image would have added padding around each image cell making the email signature look broken apart. Other browsers and clients would have images and text showing up blurry.

I gave up and stuck to the same image size and resolution in both the image size and the HTML coding which seems to work better. Is there anything wrong with my code?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
    td {line-height:0; font-size: 0.0em; }
    img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Test Email.psd) -->
<table id="Table_01" width="516" height="172" border="0" cellpadding="0" cellspacing="0">
<tr>
    

    <td rowspan="7">
        <a href=example.com><img src="image1.jpg" width="161" height="172" alt=""></td>
    <td colspan="2" rowspan="2">
        <img src="exampleimage2.jpg" width="315" height="80" alt=""></td>
    <td>
        <a href=example.com><img src=image3.jpg" width="39" height="44" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="44" alt=""></td>
 </tr>
 <tr>
    <td rowspan="2">
        <a href=example.com><img src="image4.jpg" width="39" height="43" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="36" alt=""></td>
 </tr>
 <tr>
    <td rowspan="2">
        <a href="tel:8888888888"><img src="image5.jpg" width="111" height="30" alt=""></td>
    <td rowspan="2">
        <a href="mailto:mail.com"><img src="image6.jpg" width="204" height="30" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="7" alt=""></td>
 </tr>
 <tr>
    <td rowspan="2">
        <a href=example.com><img src="image7.jpg" width="39" height="43" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="23" alt=""></td>
 </tr>
 <tr>
    <td colspan="2" rowspan="2">
        <a href=goo.gl/maps><img src="image8.jpg" width="315" height="38" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="20" alt=""></td>
 </tr>
 <tr>
    <td rowspan="2">
        <a href=example.com><img src="image9.jpg" width="39" height="42" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="18" alt=""></td>
 </tr>
 <tr>
    <td colspan="2">
        <img src="image10.jpg" width="315" height="24" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="24" alt=""></td>

 </tr>
</table>
<!-- End Save for Web Slices -->
<div style="background-color:#FFFFFF">
<style>
  hr {
    height: 1px;
    background-color: #9d9d9d;
    border: none;
  }
  div {
padding-top: 5px;
padding-right: 8px;
padding-bottom: 1px;
padding-left: 8px;
}
</style>
<body>
<hr>
<span style="font-size:9pt;  font-family: 'Cambria','times new roman','garamond',serif; color:#223488;">This email may contain confidential and/or proprietary information. If you are not the intended addressee or have received this e-mail in error, please inform the sender immediately and destroy this e-mail. Unauthorized copying and/or forwarding of this email is strictly prohibited.
</p>
</div>
</body>
</html>
htmlcsshtml-email


Solution 1:[1]

There's something over and above all of this which is that: does it work on mobiles? Most people read emails on their phone (70-80%), so if it's 516px wide what will happen is that your email will be reduced in size to fit (you will want to fit to at least 300px, if not 280px to cover the smallest).

Otherwise, assuming the email environment you use automatically uploads the images, to remove the gaps you would use the following set of defaults (a HTML email CSS reset needs to be inline, not in <style>):

For <td> write <td style="padding:0">

For <img> write <img style="display:block;border-width:0;">

If you wanted something that worked on mobiles, I would go for something thinner. Then on your <table> use style="min-width:200px;max-width:300px" if you need a small measure of responsive behaviour.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nathan

Related Questions