@media and viewport for mobile-friendly HTML email campaigns

To make your email mobile-friendly do this:

1. Viewport meta tag
Add this to resize the page to fit the desired viewport. The width should reflect the size of your content. My standard emails are 600px wide.

<meta name = "viewport" content = "width = 600">

2. Use media queries to modify page layout and font sizes
I like to use font-size:17px for iOS.

@media only screen and (max-device-width: 480px) {
    .pconly { display:none!important; }
    p{
      font-size:30px!important;
    }
}		

Handy tools for building with HTML5

caniuse.com to learn about HTML5, Javascript and CSS browser compatibility

Modernizr for building websites for progressive enhancement

Find me by ip to check your current browser or analyse other websites (including litmus)

Data Vocabulary or schema.org for semantic mark-up of structured data

Google Webmaster Rich Snippets Testing Tool to see how Google indexes your structured data

Facebook Share and Tweet Count Buttons

Align the Facebook Share and Tweet Count buttons like this:

share counter buttons for twitter and facebook

Add the following in between your HEAD tags or just before the end BODY tag:

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

The CSS is:

.share-facebook { float:left; padding-top:1px; margin-right:25px; }
.share-twitter { float:left; }

The HTML is:

<div class="share-facebook"><a name="fb_share"></a>Share</div>
<div class="share-twitter"><a class="twitter-share-button" href="http://twitter.com/share">Tweet</a></div>

Click here for a demo.

References: