HTML email, built for the reader.

Three email formats, three responsive strategies, and the markup behind them.

In progress / Authored artifact

The problem

A message needs to stay readable when layouts narrow, images fail, or an inbox applies its own rules.

My role

Independent portfolio project. I own the concept, content, implementation, and verification scope.

The approach

Three standalone email documents sit apart from the portfolio shell. Its sandboxed preview preserves the email colors in both site themes.

Keep a linear reading order and a constrained content width.
Match the responsive strategy to the message: hybrid newsletter, fluid transaction, and breakpoint driven promotion.
Keep the preview isolated from site styles.

The solution

Three standalone emails: a hybrid editorial newsletter, a fluid transactional message, and a promotional campaign with a responsive breakpoint. Each includes a plain text edition and can be inspected at desktop and mobile widths alongside its HTML source.

Results & impact

Three authored email examples are available in the gallery, with matching source and plain text views. Automated checks cover document structure, local assets, source consistency, and isolated preview embedding. This is the current engineering deliverable; inbox test captures are the next evidence to collect.

Lessons & takeaways

Different message structures call for different responsive techniques. Keeping the email documents separate from the portfolio makes their markup easier to inspect, while matching plain text editions preserves the content outside the visual layout.

Explore the evidence

Inspect the emails

Explore the rendered email, responsive layouts, HTML source, and plain text edition.

Read the plain text edition Open the email viewer

Field Letter

Responsive preview

Read the HTML source

Compact indentation for easier reading.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="color-scheme" content="light" />
    <title>Field Letter: Start with the light</title>
  </head>
  <body
    style="
      margin: 0;
      background: #e9efec;
      color: #202624;
      font-family: Arial, sans-serif;
      line-height: 1.6;
    "
  >
    <div style="display: none; max-height: 0; overflow: hidden">
      A simple observation before your next planting day.
    </div>
    <table
      role="presentation"
      width="100%"
      cellpadding="0"
      cellspacing="0"
      style="width: 100%; border-collapse: collapse"
    >
      <tr>
      <td align="center" style="padding: 16px 0">
      <table
      role="presentation"
      class="email-shell"
      width="100%"
      cellpadding="0"
      cellspacing="0"
      style="
      width: 100%;
      max-width: 640px;
      background: #fff;
      border-collapse: collapse;
      "
      >
      <tr>
      <td
      style="
      padding: 32px 24px 16px;
      color: #52605d;
      font-size: 16px;
      "
      >
      Field Letter / The garden journal
      </td>
      </tr>
      <tr>
      <td
      style="
      padding: 28px 24px;
      background: #244c3b;
      color: #fff;
      "
      >
      <p style="margin: 0 0 18px; font-size: 16px">
      A quieter start to the growing season
      </p>
      <h1
      style="
      font-family: Georgia, serif;
      font-weight: normal;
      font-size: 42px;
      line-height: 1.1;
      margin: 0 0 20px;
      "
      >
      Start with the light.
      </h1>
      <p style="font-size: 18px; margin: 0">
      Before you choose a seed, get to know the
      place it will grow.
      </p>
      </td>
      </tr>
      <tr>
      <td style="padding: 28px 24px">
      <h2 style="font-size: 22px; margin: 0 0 12px">
      One small task for this week
      </h2>
      <p style="margin: 0; font-size: 17px">
      Visit your growing space in the morning, at
      midday, and in the late afternoon. Notice
      where the light settles. A few observations
      can help you choose a plant that belongs
      there.
      </p>
      </td>
      </tr>
      <tr>
      <td
      align="center"
      style="
      padding: 0 16px 24px;
      font-size: 0;
      text-align: center;
      "
      >
      <!--[if mso]><table role="presentation" width="608" cellpadding="0" cellspacing="0"><tr><td width="304" valign="top"><![endif]-->
      <div
      style="
      display: inline-block;
      width: 100%;
      max-width: 304px;
      vertical-align: top;
      text-align: left;
      "
      >
      <table
      role="presentation"
      width="100%"
      cellpadding="0"
      cellspacing="0"
      >
      <tr>
      <td style="padding: 8px">
      <table
      role="presentation"
      width="100%"
      >
      <tr>
      <td
      style="
      padding: 24px;
      background: #edf1d9;
      font-size: 17px;
      "
      >
      <p
      style="
      margin: 0 0
      16px;
      font-size: 14px;
      "
      >
      In practice
      </p>
      <h2
      style="
      font-size: 24px;
      line-height: 1.2;
      margin: 0 0
      16px;
      "
      >
      Keep a light
      diary.
      </h2>
      <p
      style="
      margin: 0;
      "
      >
      A pencil, a few
      notes, and three
      visits to the
      same spot. Start
      with
      observation.
      </p>
      </td>
      </tr>
      </table>
      </td>
      </tr>
      </table>
      </div>
      <!--[if mso]></td><td width="304" valign="top"><![endif]-->
      <div
      style="
      display: inline-block;
      width: 100%;
      max-width: 304px;
      vertical-align: top;
      text-align: left;
      "
      >
      <table
      role="presentation"
      width="100%"
      cellpadding="0"
      cellspacing="0"
      >
      <tr>
      <td style="padding: 8px">
      <table
      role="presentation"
      width="100%"
      >
      <tr>
      <td
      style="
      padding: 24px;
      background: #f0e4d8;
      font-size: 17px;
      "
      >
      <p
      style="
      margin: 0 0
      16px;
      font-size: 14px;
      "
      >
      A small
      beginning
      </p>
      <h2
      style="
      font-size: 24px;
      line-height: 1.2;
      margin: 0 0
      16px;
      "
      >
      Make room for a
      pot.
      </h2>
      <p
      style="
      margin: 0;
      "
      >
      You do not need
      a whole garden.
      One container is
      enough to learn
      something.
      </p>
      </td>
      </tr>
      </table>
      </td>
      </tr>
      </table>
      </div>
      <!--[if mso]></td></tr></table><![endif]-->
      </td>
      </tr>
      <tr>
      <td style="padding: 8px 24px 36px">
      <a
      href="https://example.com/garden-notes"
      style="
      display: inline-block;
      padding: 14px 22px;
      background: #315d4b;
      color: #fff;
      font-size: 17px;
      "
      >Read the planting notes</a
      >
      <p style="margin: 24px 0 0; font-size: 17px">
      Until next time,<br />The Field Letter
      editors
      </p>
      </td>
      </tr>
      <tr>
      <td
      style="
      padding: 28px 24px;
      background: #244c3b;
      color: #fff;
      font-size: 14px;
      "
      >
      Field Letter / Thoughtful things for growing
      spaces.<br />Fictional portfolio example. No
      order or message send.<br /><a
      href="https://example.com/preferences"
      style="color: #fff"
      >Email preferences (example)</a
      >
      </td>
      </tr>
      </table>
      </td>
      </tr>
    </table>
  </body>
</html>

Read the plain text edition

Field Letter / The garden journal
A quieter start to the growing season

Start with the light.
Before you choose a seed, get to know the place it will grow.

One small task for this week
Visit your growing space in the morning, at midday, and in the late afternoon. Notice where the light settles. A few observations can help you choose a plant that belongs there.

In practice: Keep a light diary.
A pencil, a few notes, and three visits to the same spot. Start with observation.

A small beginning: Make room for a pot.
You do not need a whole garden. One container is enough to learn something.

Read the planting notes
https://example.com/garden-notes

Until next time,
The Field Letter editors

Field Letter / Thoughtful things for growing spaces.
Fictional portfolio example. No order or message send.
Email preferences (example)
https://example.com/preferences

View full email

Three messages, three jobs

Field Letter is a fictional garden journal and shop. I authored the content and markup for its newsletter, order confirmation, and promotional campaign. Each has a complete HTML document and a matching plain text edition.

The decisions behind the layouts

The newsletter uses a hybrid layout. Two inline block modules wrap as space narrows, without a media query. Conditional ghost tables provide a fixed column structure for Word based Outlook.

The order confirmation uses a fluid single column. Percentage based tables shrink within a maximum width, and the itemized order uses a caption and scoped table headings. It does not depend on a breakpoint.

The promotion uses a fixed 600 pixel desktop canvas. At 620 pixels and below, a media query makes the canvas fluid, stacks the product columns, and adjusts headline size and spacing. This deliberate breakpoint differs from the newsletter’s intrinsic wrapping. Clients that ignore the query may retain the wider layout; actual client testing is still needed.

Inspect the implementation

Each viewer changes the actual iframe width for Desktop and Mobile, constrained by available space. Its width label reports the current size. HTML source and plain text correspond to that viewer’s email. The full gallery provides direct links to all three examples.

Fictional links use the reserved example.com domain. Sandboxed previews block navigation and scripts. Downloaded HTML contains no portfolio wrapper, scripts or tracking pixels.

What this proves

Three authored artifacts and their layout techniques are available to inspect. Structural checks establish their documents and source consistency. They do not establish successful sends, platform integrations, Outlook compatibility, or inbox dark mode behavior. Those require observations in named environments.

Next steps

Review all three layouts in actual email clients.
Document observed rendering differences and fixes.
Collect actual inbox evidence.

Does your team need work like this?

Let's discuss the role and the systems behind it.

Book an intro call