Start with a sketch

We always begin with a rough idea of what we’re building before we build it. The fastest way to get going is with pen — or in our case, Sharpie — and paper. In this lesson we’ll build out a template with one hero image, two sub-images in two columns, and a call to action.

Build upon a container-row-wrapper-column structure

Before we get to the design itself, we need to look at how a responsive email grid works. The Ink Grid has three main components that resemble Foundation, our responsive CSS framework. Vertical blocks called columns reside in horizontal rows. Rows, in turn, sit inside containers.

1. Containers are fixed-width tables, 100% as wide as its parent.

<table class="container">
  <tr>
    <td>
      …
    </td>
  </tr>
</table>

2. Like containers, rows are 100% wide. They have neither padding or margins. Their job is just to hold a series of <td> elements.

3. Inside rows, wrappers are <td> elements that add gutters between columns with a padding-right CSS property.

<table class="row"><!-- begin row -->
  <tr>
    <td class="wrapper last">…</td>
  </tr>
</table>

4. At last, columns — <td> elements that actually hold content — divide rows into horizontal sections. The final <td> in a row should have a class of "expander" to help its neighboring <td> elements expand 100% on small screens.

<table class="twelve columns">
  <tr>
    <td>…</td>
    <td class="expander"></td>
  </tr>
</table>

Notice that each column <td> gets its own wrapper table. This is one of the secrets behind responsive grids that work across many devices.

Here’s a complete example with a twelve-column block:

<table class="container">
  <tr>
    <td>

      <table class="row"><!-- begin row -->
        <tr>

          <td class="wrapper last">
            <table class="twelve columns">
              <tr>
                <td>  CONTENT GOES HERE  </td>
                <td class="expander"></td>
              </tr>
            </table><!-- end column -->
          </td><!-- end wrapper -->

        </tr>
      </table><!-- end row -->

    </td>
  </tr>
</table><!-- end container -->

The colors here show the different parts: container, row, wrapper and columns — and don’t forget the expander and last class.

Putting it together

The template design calls for three rows: one hero, one for sub items, and one call to action.

Above: We can divide the layout into three rows.

It’s best to start from the outside and work our way in. All of these can fit into a single container, so we start with a complete "container" table:

<table class="container">
  <tr>
    <td>

<!-- rows go here -->

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

Inside of that, we add three rows — as well as HTML comments to mark where each bit of content (hero, sub-items and call to action) will go. Remember that each row gets its own wrapper. Also notice that the code builds up quickly, which makes those HTML comments important to keep.

<table class="container">
  <tr>
    <td>

      <table class="row"><!-- begin row -->
        <tr>
          <td class="wrapper last">
<!-- hero -->
          </td>
        </tr>
      </table>

      <table class="row"><!-- begin row -->
        <tr>
          <td class="wrapper">
<!-- left column -->
          </td>
          <td class="wrapper last">
<!-- right column -->
          </td>
        </tr>
      </table>

      <table class="row"><!-- begin row -->
        <tr>
          <td class="wrapper last">
<!-- call to action -->
          </td>
        </tr>
      </table>

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

Next we add columns next to each HTML comment marker.

<table class="container">
  <tr>
    <td>

      <table class="row"><!-- begin row -->
        <tr>
          <td class="wrapper last">
<!-- hero -->
            <table class="twelve columns"><!-- begin column -->
              <tr>
                <td>  HERO GOES HERE  </td>
                <td class="expander"></td>
              </tr>
            </table><!-- end column -->
          </td>
        </tr>
      </table><!-- end row -->

      <table class="row"><!-- begin row -->
        <tr>
          <td class="wrapper">
<!-- left column -->
            <table class="six columns"><!-- begin column -->
              <tr>
                <td>  LEFT COL GOES HERE  </td>
                <td class="expander"></td>
              </tr>
            </table><!-- end column -->
          </td>
          <td class="wrapper last">
<!-- right column -->
            <table class="six columns"><!-- begin column -->
              <tr>
                <td>  RIGHT COL GOES HERE  </td>
                <td class="expander"></td>
              </tr>
            </table><!-- end column -->
          </td>
        </tr>
      </table><!-- end row -->

      <table class="row"><!-- begin row -->
        <tr>
          <td class="wrapper last">
<!-- call to action -->
            <table class="twelve columns"><!-- begin column -->
              <tr>
                <td>  CALL TO ACTION GOES HERE  </td>
                <td class="expander"></td>
              </tr>
            </table><!-- end column -->
          </td>
        </tr>
      </table><!-- end row -->

    </td>
  </tr>
</table><!-- end container -->

That completes the responsive template. It’s now ready to accept content and branding. It may look complex, but there’s a pattern at work: container > row > wrapper > columns > content — and expander. It’s worth the effort to make an email newsletter that’s readable across many devices.

---