cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

A small email template I've put together based on HTML Email Boilerplate and other resources. 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 head CSS is meant for clients that recognize it; the email WILL STILL WORK in those that don't. 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.


  1. Browsers OK Android 4/10 Outlook 8/10 - blue background Ios 8/10 Total: 6/10


Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.