When building websites today, its easy to take take modern tools like Flexbox and CSS Grid for granted. Designing responsive HTML emails, however, is a completely different challenge. For my latest project, I built STRYDE, a multi-section marketing email for a fictional performance footwear brand. The goal was simple: take a hand-drawn desktop and mobile wireframe and turn it into a dependable, responsive email template that looks good across as many email inboxes as possible.

Why Tables and XHTML 1.0 Still Matter

To make sure the layout wouldn’t break across older clients, I built the entire email using nested <table>, <tr>, and <td> tags rather than standard <div> containers.

A few key technical choices made this work:

• XHTML 1.0 Transitional Doctype: Setting this older doctype stops email renderers from dropping into quirks mode, which usually causes random 2–3px gaps beneath images and uneven table alignment.
• Attribute Resets: Explicitly setting cellpadding="0", cellspacing="0", border="0", and role="presentation" on every layout table keeps spacing consistent and helps screen readers parse the layout properly.

Handling Mobile Stacking

The wireframe called for a side-by-side layout on desktop that collapses into a single vertical column on mobile screens.

To handle this, I gave the alternating table cells a .stack-column class and used a media query for smaller viewports:

Overall, developing the STRYDE template was a rewarding exercise in building resilient layouts under strict constraints. It proved that with thoughtful planning, solid table architecture, and smart mobile stacking, you can build a clean, modern design that looks sharp in any inbox without breaking.

The live deployment of this email template can be found here on my GitHub!