Email Development March 30, 2016 • Kyle Lapaglia

Accelerate Your Workflow with Modular Email Design

Modular design can be applied to email development to create a flexible framework of pre-tested code blocks or "partials" that you can mix and match for any email. A partial is a self-contained code sample that can be used in any order within the flow of an email. Instead of custom coding each email template and maintaining them separately, keep a library of tested code blocks that can be used to assemble any design your company or department might need. I'll be going over how to build the "frame" you'll drop your partials into, how to select the partials you'll need, and how to maintain the library of partials as you test and iterate.

Building the Frame

The frame contains a few elements that are required for all emails:

Doctype
HTML tag
Head tags
Meta tags
Style block
Body tags
Container table

You'll place your partials inside of the container table. This table will ensure that some basic styles are added, and that the email is centered and renders reliably. Check out my example frame below.

<!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>
    <style type="text/css">
      
    </style>
  </head>
  <body style="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;" >
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <!-- Email Content Here -->
    </table>
  </body>
</html>

Now you'll want to build partials that you can drop into the frame. At this point, you need to decide if your partials will be stacking tables inside the container table, or stacking TRs. The TR stacking method may be preferable, because it makes full-width colored backgrounds easier. The examples below show these two methods. With a table for each partial.

<body style="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;" >
  <table width="100%" border="0" cellspacing="0" cellpadding="0" >
    <tr>
      <td>

        <!-- Start Partial 1 -->
        <table>
          <tr>
            <td>
            </td>
          </tr>
        </table>
        <!-- End Partial 1 -->

        <!-- Start Partial 2 -->
        <table>
          <tr>
            <td>
            </td>
          </tr>
        </table>
        <!-- End Partial 2 -->

      </td>
    </tr>
  </table>
</body>

With a row for each partial.

<body style="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;" >
  <table width="100%" border="0" cellspacing="0" cellpadding="0" >
    
    <!-- Start Partial 1 -->
    <tr>
      <td>
      </td>
    </tr>
    <!-- End Partial 1 -->

    <!-- Start Partial 2 -->
    <tr>
      <td>
      </td>
    </tr>
    <!-- End Partial 2 -->

  </table>
</body>

Of course these are not the only ways to build a frame and include partials in it. You may want to experiment and find what works best for you!

Creating a Library of Partials

Each partial that will serve as a content block should have the same structure. As we described above, that may be starting and ending with table tags, or starting and ending with TR tags. By constructing them in the same manner, the partials are interchangeable and can be used to construct emails in any order. You'll want to start by taking an inventory of the needs of your department or company. Most will need at least a few basics:

A header with logo
A full-width hero image
A full width, single column article
An article with image left(or right) and text on the other side
A left aligned button, a centered button, a big button
A footer with address, unsubscribe, and so on

The needs of your company may vary. For example, you may also want to create multiple column layouts for advertising products, a variety of article layouts for a newsletter, or a partial with a huge CTA for event invites. You can get a good idea of what needs you'll have by taking a look at the mailings you've sent out in the last 6 months. You can always code new partials and add them to your library as the needs of your company or department change. Some partials may not be as large as an entire content block. Buttons, for example, can be a very useful partial to have, so that you can add them after any article or image.

Maintain, Test and Iterate

As you start to send out modular emails, you'll probably notice that some of your partials have issues in certain email clients. As you fix those issues and update your partials, you'll begin to see less and less problems. Soon you should have a robust set of modular content blocks that can quickly be assembled to create whatever layout is desired.

Using the Email Editor with Modular Design

Our Email Editor makes it incredibly easy to build emails using a library of partials. Just log into an editor project and hit the Snippets button to start adding partials. You may also want to save your "frame" as a snippet so that you can "start from scratch" and then quickly drop in your frame. Type the shortcut for the partials you'll need to create the main content sections of the email, and then all you'll need to do is customize the text and images. We included a couple buttons in the snippets that come free with the Email Editor. Try "eoa_buttonl" and "eoa_buttonc" as shortcuts.

Have you tried the Email Editor?

Our Email Editor is the ideal environment for email development, and it's free to use. If you haven't tried it yet, sign up and take it for a test drive! We'd love to hear your thoughts.

TRY THE EDITOR