Responsive emails, three ways.
A newsletter, an order confirmation, and a promotional campaign. Each layout responds to a different job.
Field Letter
Editorial newsletter. Hybrid and spongy.
A garden journal with two reading modules that wrap naturally, even without media queries.
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
Your garden is on its way
Transactional email. Fluid.
A clear order confirmation that puts the purchase, total, and delivery information in one readable column.
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: Order confirmed</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">
Your example order FL 1042 is confirmed.
</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;
background: #e4edf3;
font-size: 16px;
color: #334c60;
"
>
Field Letter / Order FL 1042
</td>
</tr>
<tr>
<td style="padding: 32px 24px">
<p style="color: #52605d; margin: 0 0 16px">
Order confirmation
</p>
<h1
style="
font-family: Georgia, serif;
font-weight: normal;
font-size: 38px;
line-height: 1.15;
margin: 0 0 20px;
"
>
Your garden is on its way.
</h1>
<p style="font-size: 17px; margin: 0 0 24px">
Thanks, Alex. Your example order is
confirmed. We will send a separate update
when it ships.
</p>
<h2 style="font-size: 22px; margin: 0 0 18px">
Your order
</h2>
<table
width="100%"
style="
width: 100%;
border-collapse: collapse;
font-size: 16px;
"
>
<caption
style="
text-align: left;
padding-bottom: 12px;
"
>
Order FL 1042, October 20, 2026
</caption>
<tr>
<th
scope="col"
style="
text-align: left;
padding: 12px 0;
"
>
Item
</th>
<th
scope="col"
style="
text-align: right;
padding: 12px 0;
"
>
Price
</th>
</tr>
<tr>
<td style="padding: 12px 0">
<img
src="../images/products/basil.jpg"
alt="Fresh basil, illustrating the herb starter set"
width="120"
height="80"
style="
display: block;
width: 120px;
max-width: 100%;
height: auto;
margin: 0 0 12px;
border: 0;
"
/>Herb starter set × 1
</td>
<td style="text-align: right">
$24.00
</td>
</tr>
<tr>
<td style="padding: 12px 0">
Shipping
</td>
<td style="text-align: right">$5.00</td>
</tr>
<tr>
<th
scope="row"
style="
text-align: left;
padding: 16px 0;
"
>
Total paid
</th>
<td
style="
text-align: right;
font-weight: bold;
"
>
$29.00
</td>
</tr>
</table>
<p
style="
margin: 20px 0 28px;
font-size: 16px;
color: #52605d;
"
>
Illustrative prices. This fictional order
has no tax charge.
</p>
<a
href="https://example.com/orders/FL1042"
style="
display: inline-block;
padding: 14px 20px;
background: #334c60;
color: #fff;
font-size: 17px;
"
>View order details</a
>
<h2
style="font-size: 22px; margin: 32px 0 12px"
>
What happens next
</h2>
<p style="font-size: 17px; margin: 0 0 20px">
Example delivery window: October 24 to 27.
Tracking will be shared when the parcel is
ready.
</p>
<p style="font-size: 17px; margin: 0">
Need help with your order?
<a
href="https://example.com/support"
style="color: #334c60"
>Contact order support</a
>.
</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 / Order FL 1042 Order confirmation Your garden is on its way. Thanks, Alex. Your example order is confirmed. We will send a separate update when it ships. Your order Order FL 1042, October 20, 2026 Herb starter set × 1: $24.00 Shipping: $5.00 Total paid: $29.00 Illustrative prices. This fictional order has no tax charge. View order details https://example.com/orders/FL1042 What happens next Example delivery window: October 24 to 27. Tracking will be shared when the parcel is ready. Need help with your order? Contact order support https://example.com/support Field Letter / Thoughtful things for growing spaces. Fictional portfolio example. No order or message send. Email preferences (example) https://example.com/preferences
Product photography: Markus Spiske and Annie Spratt. Photo credits.
A little room to grow
Promotional campaign. Responsive fixed width.
A seasonal planting collection with a deliberate desktop composition and a mobile breakpoint.
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: The spring collection</title>
<style>
@media only screen and (max-width: 620px) {
.email-shell {
width: 100% !important;
}
.product-column {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
.campaign-pad {
padding: 28px 20px !important;
}
.campaign-title {
font-size: 38px !important;
}
}
</style>
</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">
Two simple ways to begin growing at home.
</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="600"
cellpadding="0"
cellspacing="0"
style="
width: 600px;
background: #fff;
border-collapse: collapse;
"
>
<tr>
<td style="padding: 28px 24px; font-size: 16px">
Field Letter / The spring collection
</td>
</tr>
<tr>
<td
class="campaign-pad"
style="padding: 48px 40px; background: #f0e4d8"
>
<p style="font-size: 16px; margin: 0 0 24px">
Good things can start small.
</p>
<h1
class="campaign-title"
style="
font-family: Georgia, serif;
font-weight: normal;
font-size: 54px;
line-height: 1.04;
margin: 0 0 24px;
"
>
A little room to grow.
</h1>
<p style="font-size: 18px; margin: 0 0 28px">
Make a sunny windowsill your next growing
space. Meet two simple ways to begin.
</p>
<a
href="https://example.com/spring"
style="
display: inline-block;
padding: 15px 22px;
background: #5b4334;
color: #fff;
font-size: 17px;
"
>Explore the collection</a
>
</td>
</tr>
<tr>
<td class="campaign-pad" style="padding: 32px 24px">
<table
role="presentation"
width="100%"
cellpadding="0"
cellspacing="0"
>
<tr>
<td
class="product-column"
width="50%"
valign="top"
style="width: 50%; padding: 12px"
>
<table
role="presentation"
width="100%"
>
<tr>
<td
style="
padding: 28px 20px;
background: #e9efdf;
"
>
<img
src="../images/products/basil.jpg"
alt="Fresh green basil growing in a wooden planter"
width="240"
height="160"
style="
display: block;
width: 100%;
max-width: 240px;
height: auto;
margin: 0 0 24px;
border: 0;
"
/>
<p
style="
font-size: 14px;
margin: 0 0 24px;
"
>
For the kitchen
window
</p>
<h2
style="
font-size: 26px;
line-height: 1.15;
margin: 0 0 16px;
"
>
The herb starter
</h2>
<p
style="
font-size: 17px;
margin: 0 0 20px;
"
>
Basil, parsley, and
a small daily
ritual.
</p>
<p
style="
font-size: 20px;
margin: 0 0 20px;
"
>
$24
</p>
<a
href="https://example.com/herb-starter"
style="
font-size: 16px;
color: #244c3b;
"
>Meet the herb
set</a
>
</td>
</tr>
</table>
</td>
<td
class="product-column"
width="50%"
valign="top"
style="width: 50%; padding: 12px"
>
<table
role="presentation"
width="100%"
>
<tr>
<td
style="
padding: 28px 20px;
background: #e4edf3;
"
>
<img
src="../images/products/terracotta-pots.jpg"
alt="Terracotta plant pots in a range of sizes"
width="240"
height="160"
style="
display: block;
width: 100%;
max-width: 240px;
height: auto;
margin: 0 0 24px;
border: 0;
"
/>
<p
style="
font-size: 14px;
margin: 0 0 24px;
"
>
For a favorite
corner
</p>
<h2
style="
font-size: 26px;
line-height: 1.15;
margin: 0 0 16px;
"
>
The everyday pot
</h2>
<p
style="
font-size: 17px;
margin: 0 0 20px;
"
>
A simple home for
something green.
</p>
<p
style="
font-size: 20px;
margin: 0 0 20px;
"
>
$18
</p>
<a
href="https://example.com/everyday-pot"
style="
font-size: 16px;
color: #244c3b;
"
>Explore the pot</a
>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p style="font-size: 16px; margin: 24px 12px 0">
Choose the place first. Find the light. Then
find something you would like to grow.
</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 spring collection Good things can start small. A little room to grow. Make a sunny windowsill your next growing space. Meet two simple ways to begin. Explore the collection https://example.com/spring For the kitchen window: The herb starter Basil, parsley, and a small daily ritual. $24 Meet the herb set https://example.com/herb-starter For a favorite corner: The everyday pot A simple home for something green. $18 Explore the pot https://example.com/everyday-pot Choose the place first. Find the light. Then find something you would like to grow. Field Letter / Thoughtful things for growing spaces. Fictional portfolio example. No order or message send. Email preferences (example) https://example.com/preferences
Product photography: Markus Spiske and Annie Spratt. Photo credits.