Editorial newsletter
Field Letter
A garden journal with two reading modules that wrap naturally, even without media queries.
- Responsive strategy
- Hybrid and spongy
- Fluid outer table
- Inline block columns that wrap
- Conditional Outlook ghost table
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
