Overview

MUI's email library provides a few simple building blocks and helper classes that developers can use to build beautiful HTML emails that work across clients and devices. The MUI email library is tested on GMail, Apple Mail iOS 7 & 8, Outlook.com, Outlook 2007, Outlook 2013, as well as many other popular platforms.

In general it's useful to keep these tips in mind when you're working with HTML emails:

  • Inline your CSS inside the <body>
  • Use <table>'s for layout
  • Support for rgba colors and box-shadow is limited
  • Outlook 2013 doesn't support max-width or padding on div's
  • Use HTML conditionals to target Outlook
  • Keep it simple

Inline vs. Styletag

The MUI email library provides a set of CSS files which are meant to be used together to style UI components across clients and devices:

  • mui-email-inline.css
  • mui-email-styletag.css

To render components inside the <body> tag, the mui-email-inline.css file should be inlined into your HTML elements. To apply device-specific bugfixes, the contents of mui-email-styletag.css should be embedded into a <style> tag.

Basic Template

The following HTML can be used as a basic boilerplate for HTML emails. You can use external <link> tags in development but the CSS should be embedded in production:

<!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" />
  </head>
  <body>
    <table class="mui-body" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>
          <!--

          email body goes here

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

Note that the .mui-body <table> element is necessary because some email clients strip out the <body> tag so we need a fallback element to render the background of the email. To change the background color, make sure to set the background-color on both elements.

Centered Container

To center emails in a fluid container with a maximum width of 600px you can use a combination of the <center> tag the .mui-container class:

<!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" />
  </head>
  <body>
    <table class="mui-body" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>
          <center>
            <!--[if mso]><table><tr><td class="mui-container-fixed"><![endif]-->
            <div class="mui-container">
              <!--

              email goes here

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

Since Outlook doesn't support the max-width property, we also included an Outlook HTML conditional to wrap the fluid container in a .mui-container-fixed class. The wrapper element is a table in order to support padding on either side of the contatainer in Outlook. If you'd prefer a fixed width container, you can remove the conditionals and use .mui-container-fixed for all clients.

« Previous Next »