A production workflow for responsive email

Email clients provide a narrower and less consistent rendering platform than browsers. A robust template begins with readable table-based structure and layers supported responsive adjustments without depending on scripts or web application conventions.

Define the client matrix

Use recipient and business evidence to select desktop, webmail and mobile clients, including relevant Outlook versions. Record whether images, media queries and remote fonts are disabled or transformed in each one.

Build a readable fixed baseline

Use presentation tables, inline essential CSS, explicit cell spacing and a sensible narrow reading order. Keep semantic headings and text where clients preserve them, and do not place the complete message inside one image.

Enhance with media queries

Adjust container width, stack selected columns and enlarge controls on supporting mobile clients. Ensure unsupported clients retain a usable desktop layout and avoid selectors stripped by major webmail services.

Control content and assets

Host images over HTTPS with explicit dimensions and meaningful alternative text. Keep primary calls to action understandable with images disabled and include a plain-text part generated from reviewed content.

Test the sent message

Render through real delivery infrastructure so link rewriting, tracking and CSS inlining are present. Inspect inbox, preview text, dark backgrounds, forwarding and replies, then retain screenshots with the approved campaign.