A CodePen by Shannon Mølhave. Responsive HTML Email Template - A small email template I've put together based on <a href="http://htmlemailboilerplate.com/">HTML Email Boilerplate</a> and <a href="http://zurb.com/playground/responsive-email-templates">other</a> <a href="http://www.netmagazine.com/tutorials/build-responsive-emails">resources</a>. The two columns turn into a single column for email clients that recognize media queries. For others they'll use the percentage widths or will show the regular 600px wide format. This framework has tested successfully in Gmail, Yahoo, Mac and PC Outlook, and works responsively in the native Android, iOS and Gmail apps. The only issue I've found is the right-column images appear at their full-width in PC Outlook.

This Pen's CSS needs to go in the HTML head and make sure to also get the meta tag from the settings. The media query is set for max-width: 430px to display correctly in CodePen, but that width can be whatever works best with your content.