HTML Email

Download View in new tab »

Tutorial

Step 1: Boilerplate HTML

First, start with an empty file and paste in the MUI Email boilerplate HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <!-- NOTE: external links are for testing only -->
    <link href="//cdn.muicss.com/mui-0.10.3/email/mui-email-styletag.css" rel="stylesheet" />
    <link href="//cdn.muicss.com/mui-0.10.3/email/mui-email-inline.css" rel="stylesheet" />
    <style>
      /* Tutorial CSS goes here (NOTE: CSS should be inlined in production */
    </style>
  </head>
  <body>
    <table class="mui-body" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>
          <!-- 

          Tutorial HTML goes here

          -->
        </td>
      </tr>
    </table>
  </body>
</html>

Step 2: Body Layout

Next, add a centered container:

<center>
  <!--[if mso]><table><tr><td class="mui-container-fixed"><![endif]-->
  <div class="mui-container">
    <!--

    Content HTML goes here

    -->
  </div>
  <!--[if mso]></td></tr></table><![endif]-->
</center>

And define the body CSS:

body,
.mui-body {
  background-color: #eee;
  font-size: 15px;
}

.mui-container,
.mui-container-fixed {
  padding-top: 15px;
  padding-bottom: 15px;
}

Step 3: Content

Next, add the content:

<h3 class="mui--text-center">Brand.io</h3>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td class="mui-panel">
      <table
          id="content-wrapper"
          border="0"
          cellpadding="0"
          cellspacing="0"
          width="100%"
      >
        <tbody>
          <tr>
            <td>
              <h2>Welcome to Brand.io!</h2>
            </td>
          </tr>
          <tr>
            <td class="mui--divider-top">
              Hello Friend,
            </td>
          </tr>
          <tr>
            <td>
              Thanks for signing up for our service! Brand.io is the fun new
              way to brand your I/O. Please verify your email by clicking
              this button:
            </td>
          </tr>
          <tr>
            <td>
              <table
                  class="mui-btn mui-btn--primary"
                  border="0"
                  cellspacing="0"
                  cellpadding="0"
              >
                <tr>
                  <td>
                    <a href="#">Verify email address</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              Thanks,
            </td>
          </tr>
          <tr>
            <td id="last-cell">
              The Brand.io Team
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table>

And define the content CSS:

#content-wrapper h2 {
  margin-top: 0px;
  margin-bottom: 0px;
}

#content-wrapper > tbody > tr > td {
  padding-bottom: 15px;
}

#content-wrapper .mui--divider-top {
  padding-top: 15px;
}

#last-cell {
  padding-bottom: 15px;
}

Step 3: Post-processing

In order for the email to render properly across all major clients (e.g. GMail, Applie Mail iOS, Outlook.com, Outlook 2007, Outlook 2013) you need to inline the page CSS as well as the mui-email-inline.css stylesheet. The contents of mui-email-styletag.css should be embedded in a <style> tag in the page.

« Previous Next »