Responsive email template

Finally I got some time and implemented responsive email templates in this blog. Some of you probably already have seen these changes in September newsletter. To be honest, even in a nightmare, I couldn’t imagine so many hacks in order to solve such a very simple task as responsive email templates. Which appeared to be simple on a first glance. Click Read More to find out the list of problems I have encountered and ways to resolve them. Check out an example of responsive email template attached as well. By writing this post, I’m starting a new set of posts I plan to write just to share some know-hows I have learned or achieved, just to keep them somewhere 🙂

Problem: a post client strips away media queries from email
Solution: use tables (yes, those old html-tables)

Problem: a post client stripes away external CSS styles
Solution: inline your CSS while coding

Problem: a post client ignores any <style> or <link> in the section
Solution: add a style to each html element while coding

Problem: a post client doesn’t support padding, margin, fload and paragraph
Solution: use a nested table based layout with each TD tag carrying padding and margin

Problem: a post client styles links as blue and underlined by default
Solution:

<a href="https://ivangrigoryev.com/the-unforgotten-soldiers-an-anzac-tribute/" style="text-decoration:none; color:#00001b">Read More</a>

Finally, a single column responsive email template:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{title}</title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
  table {border-collapse: collapse;}
</style>
<![endif]-->
</head>
<body style="margin: 0 !important;padding: 0;>
  <center style="width: 100%;table-layout: fixed;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">
    <div style="max-width: 640px;margin: 0 auto;">
      <!--[if (gte mso 9)|(IE)]>
      <table width="640" align="center">
      <tr>
      <td>
      <![endif]-->
      <table align="center" style="Margin: 0 auto;width: 100%;max-width: 640px;">
        <tr>
          <td style="text-align: left;">
            <table width="100%">
              <tr>
                <td>{content}</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <!--[if (gte mso 9)|(IE)]>
      </td>
      </tr>
      </table>
      <![endif]-->
    </div>
  </center>
</body>
</html>

Here is a “before” example:

And “after” for desktop mode:

You can see an example of “after” for mobile at the beginning of the post.

Stay tuned. Get post excerpts, news and other perks not included in RSS, Feedly or somewhere else.

Join 258 other followers and receive monthly newsletter

Ivan Grigoryev's Blog
Living in New Zealand. Blogging about the country, beautiful places, everyday life.
Do a skydive - halfway completed; get 1400 - still working on; reach 300kph - completed by 96.6%