Best Practices & Considerations when writing HTML Emails

Following text fully Copywriting from http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails/21437734#21437734

This seems like a great place to list some resources for anyone trying to learn HTML email. This is (probably) the most comprehensive list of HTML Email resources you will find on the web. Happy learning.

Getting Started Guides:

CSS Support & General Guides:

You should always inline your CSS in html-email. Here is a list of CSS Inlining Tools

Responsive Guides:

Templates & Frameworks:

Responsive Alternate Examples:

Also the Ted Goas Responsive link above has an excellent fluid example.

Troubleshooting & General Guides:

You’ll need to use VML to get background images working in Outlook (Except in the body tag). Here are some VML links:

Pure CSS3 Accordion

Pure CSS3 Accordion! creating CSS3 based accordion can be a tricky task, so in this post I will try to share the concept that how to make it. But indeed we can always use jQuery to include nice effects.

Pure CSS3 Accordion GUI
Pure CSS3 Accordion

The DOM Structure

<section>
   <h3>Auto collapse</h3>
    <ul>
        <li>
            <label>
                <input type="radio" name="auto-collapse" checked="checked" />
                <span class="title">What is Lorem Ipsum?</span>
                <span class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="auto-collapse" />
                <span class="title">Where does it come from?</span>
                <span class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="auto-collapse" />
                <span class="title">Why do we use it?</span>
                <span class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
            </label>
        </li>
    </ul>
</section>
    
<hr>
    
<section>
   <h3>Manual collapse</h3>
    <ul>
        <li>
            <label>
                <input type="checkbox" name="manual-collapse" checked="checked" />
                <span class="title">What is Lorem Ipsum?</span>
                <span class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="manual-collapse" />
                <span class="title">Where does it come from?</span>
                <span class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="manual-collapse" />
                <span class="title">Why do we use it?</span>
                <span class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
            </label>
        </li>
    </ul>
</section>

CSS

* {
            margin: 0px;
            padding: 0px;
        }
        
        hr {
            margin: 20px 0px;
        }
        
        section {
            width: 500px;
            margin: auto;  
        }
        
        h3 {
            margin: 20px 0px;
        }
        
        ul, li {
            list-style: none;
            padding: 0px;
            margin: 0px;
            position: relative;
        }
        
        li {
            margin-bottom: 10px;
        }
        
        input[type="radio"],
        input[type="checkbox"] {
            opacity:0;
            position: absolute;
            top: 20px;
            left: 80px;
        }
        
        .title {
            background: #EFEFEF;
            padding: 10px 20px;
            cursor: pointer;
            display: block;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
        
        .detail {
            opacity: 0;
            height: 0px;
            border: 1px solid #dddddd;
            display: block;         
        }
        
        input[type="radio"]:checked ~ .title,
        input[type="checkbox"]:checked ~ .title {
            background: #006FC4;
            border: 1px solid #006FC4;
            color: #ffffff;
            border-radius: 3px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

         input[type="radio"]:checked ~ .detail,
         input[type="checkbox"]:checked ~ .detail {
            opacity: 1;
            height: auto;
            padding: 20px;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
        }

How to target only IE (any version of Internet Explorer) within a stylesheet?

Internet Explorer 9 and lower : There are some conditional comments to load an IE-specific stylesheet for any version (or combination of versions) that we wanted to specifically target. like below using external stylesheet.

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

However, beginning in version 10, conditional comments are no longer supported in IE.

Internet Explorer 10 & 11 : Create a media query using -ms-high-contrast, in which we place our IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Microsoft Edge 12 : We can use the @supports rule Here is a link with all the info about this rule

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

Inline rule IE8 detection

There are some options but it is only detect IE8 and below version.

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

 

 

Source: http://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet?answertab=active#tab-top