Skip to content
All projects
HTML EmailHTML EmailsStatus: Live

A|G Realty — The 2026 Investor Briefing

Editorial quarterly newsletter, hand-coded with cross-client fallbacks

Live SiteGitHub
Screenshot of A|G Realty — The 2026 Investor Briefing

A fictional quarterly investor briefing shipped as one raw HTML file — editorial typography, VML gradient fallbacks, and cross-client tested across Gmail, Apple Mail, Outlook, and Yahoo.

Problem

HTML email is one of the most hostile rendering environments on the web — Outlook uses Microsoft Word, Gmail clips messages, and mobile clients collapse layouts without warning. Most marketing emails default to drag-and-drop builders that produce generic, undifferentiated output.

Goal

Build a polished, editorial-style newsletter as a single HTML file written from scratch — no MJML, no build step, no drag-and-drop — that renders reliably across major email clients while still reading as an art-directed publication.

What I Built

A fictional quarterly investor briefing ("The 2026 Horizon") for a made-up firm, A|G Realty, hand-coded as a single `index.html`. Four editorial sections — Portfolio, Performance, Featured Acquisition, Market Notes — carry the issue, with Portfolio using allocation-percentage prefixes (38 / 28 / 18 / 16) instead of generic 01–04 ordering. The type pairs Instrument Serif with Poppins over kicker labels, italic-numeral stat grids, and hairline dividers: print-quarterly convention rather than marketing email. The README ships an ESP merge-tag map so the static file drops into a sender platform without rewrites.

Key Features

  • Hand-coded single-file HTML (no MJML, no build step, no preprocessor)
  • MSO conditional comments serving Georgia/Arial to Outlook while modern clients get Instrument Serif + Poppins
  • VML gradient fallbacks on banners and a dual-branch `<v:roundrect>` CTA for Outlook
  • Three responsive breakpoints (600 / 480 / 100%) with mobile divider orientation flip on both stat grids
  • `@media (hover: hover)` desktop-only CTA lift, gated so touch and email clients skip it
  • `color-scheme: light dark`, preview-text spacer, iOS/Gmail blue-link overrides, and a "View in browser" fallback above the masthead
  • Plain-text fallback (`index.txt`) plus an expanded compliance footer (unsubscribe, postal address, sender ID, Update Preferences, CCPA / Do Not Sell My Info, recipient-context line)
  • Reg D accredited-investor disclosure with deep links to risk factors and forward-looking-statements language; body contrast tuned to 7.34:1, per-section `role="region"` + `aria-labelledby` landmarks, `<address>` wrapping the postal block, and `aria-label`s on every footer quick-link
  • Single primary CTA discipline — `View the portfolio →` is the only button; secondary signals (`See the full report`, per-note `Read the note`) stay as text links to preserve hierarchy

Challenges

  1. Matching the editorial tone across clients that disagree on font support — Outlook falling back to Georgia had to feel intentional, not broken
  2. Balancing VML gradient fallbacks against modern CSS gradients without double-painting in hybrid clients

Outcome

Renders correctly from the Outlook Word engine through to Apple Mail, with a colophon block below the email documenting the engineering, accessibility, and breakpoint decisions. Tested in Gmail (web/iOS/Android), Apple Mail (macOS/iOS), Outlook 365 web, Outlook desktop (Word rendering engine), and Yahoo Mail, with plain-text fallback shipped alongside.

Next Steps

  • Add Litmus / Email on Acid automated screenshot tests to the GitHub repo
  • Build a second issue to prove the editorial system scales across content