Templates Newsletter

Gran Fondo, The last hour

A photo-led long read with the masthead and headline set on the photograph, a serif display face, a pull quote and one button at the end. Send it when one piece of reporting carries the whole issue.

Open in editor
680px

About this email

Subject line
Issue 09: the last hour of the Stelvio
Preview text
Forty-eight switchbacks, one feed station, and a decision made at 2,200 metres.
Width
600px, stacks on phones
Export size
20,925 bytes (20.4 KB)
Free
Yes, with no account and no export limit.

What the HTML does

  • Table layout with ghost tables for Outlook. Columns are tables inside Outlook-only conditional comments, so Word's engine gets the widths it needs and everyone else gets the responsive version.
  • VML buttons. Each button is a VML shape for Outlook and a padded link everywhere else, so the whole button is clickable in both.
  • Background images with VML fill. Background images fall back to a VML rectangle in Outlook instead of disappearing.
  • Dark-mode meta. color-scheme and supported-color-schemes tell Apple Mail and Outlook how the email expects to be treated in dark mode.
  • Preheader. The preview text is in the HTML, hidden from the body, so the inbox shows what you wrote instead of the first line of the footer.
  • Mobile stacking. Columns stack under 600px with a media query, and stay side by side where media queries are ignored.
  • Inline styles. Every style that matters is on the element, because Gmail strips most of the head and some clients drop it entirely.
  • Exact line heights in Outlook. mso-line-height-rule: exactly keeps spacers and text from drifting in Outlook for Windows.
  • Outlook DPI fix. The OfficeDocumentSettings block stops Outlook from scaling images on high-DPI Windows displays.
  • Presentation tables. Layout tables carry role="presentation" so screen readers read the content, not the grid.
Open this template and export the HTML