Reflow support

28 May

In email design, reflow support refers to an email's ability to adapt its layout dynamically when viewed on different screen sizes — especially on mobile devices — by stacking or rearranging content vertically rather than just shrinking it.

More technically:

Reflow support means the email is responsive — not just in terms of resizing, but in how its content "flows" into a readable format. It goes beyond simply scaling text or images down and instead repositions, reorders, or collapses columns and elements in a logical way for smaller screens.

📱 Example Without Reflow:

An email with a 3-column table layout might remain side-by-side and become illegibly squished on a phone.

✅ Example With Reflow:

That same 3-column layout stacks vertically into a single column, ensuring legibility and usability — headlines above text, images above buttons, etc.

How it’s Achieved:

Media Queries (usually in the <style> tag in the <head>)
Fluid or hybrid layout techniques
Table-based layouts with conditional stacking
Use of tools like MJML, Foundation for Emails, or responsive email frameworks

Why It Matters:

Better mobile UX (over 50% of emails are read on mobile)
Improved accessibility
Higher engagement and conversions

Caveat:

Not all email clients support CSS-based reflow equally — Gmail, Outlook, and others have their quirks. So designers often use fallback-friendly, mobile-first layouts with careful use of tables and inline styles.

If you're working with platforms like Pardot, Adobe Campaign, or Mailchimp, many have templates with built-in reflow support — but it’s still worth testing on Litmus or Email on Acid to verify.

Richard Inniss