What are the best practices for responsive email design on mobile and desktop?

Hi! The most reliable way to get marketing emails looking consistent on both mobile and desktop is to build with a “mobile-first, single-column (or hybrid) layout,” keep everything fluid inside a max-width container, and treat images and type as flexible—not fixed—so they can scale without breaking or becoming tiny.

Layout structure that won’t break

Email clients are picky, so the “best practice” approach is still table-based HTML with inline styles (even if you design it to behave responsively).

• Use a centered container with a max width (commonly around ~600px) and a fluid width so it shrinks on smaller screens. Inside that, design modules that can stack cleanly.
• Prefer 1-column layouts for the most consistent responsive email design. If you use 2 columns, use a stack-on-mobile approach (either with media queries or a “hybrid/fluid” technique that stacks naturally without relying on media queries).
• Avoid floats, grid, and most modern CSS layout (many email clients don’t support them well). Keep spacing with padding in table cells and simple structure.
• Make tap targets and spacing touch-friendly: don’t cram links together; give buttons and key links comfortable padding so they’re easy to hit on phones.
• Don’t rely on background images for essential content (support is inconsistent). If you use them, include a solid background color fallback and keep text readable without the image.

Image handling (scaling + sharpness)

Most “images scaling poorly” issues come from missing dimensions, using fixed widths everywhere, or putting text in images.

• Make images fluid: set them to scale down on small screens (e.g., use a max-width approach and let height auto-adjust). Don’t hard-code a large fixed width that can’t shrink.
• Always set width/height thoughtfully: define a sensible display width, but allow it to shrink. This reduces layout jumps and odd stretching.
• Use “real text” for headlines/buttons when you can. Text inside images can become unreadable on mobile, won’t adapt to dark mode, and hurts accessibility.
• Export images at higher resolution (often 2× the display size) so they look crisp on retina screens, but keep file sizes reasonable so the email loads fast.
• Add ALT text for key images (especially hero images) and ensure the email still makes sense if images are blocked by default.

Typography that stays readable on phones

If your text gets hard to read on small screens, it’s usually because the base font is too small, line height is tight, or the layout forces narrow columns.

• Use a comfortable base font size (many teams start around 15–16px for body copy) with generous line-height so it reads well on mobile.
• Keep line length reasonable: overly wide desktop lines and overly narrow mobile columns both reduce readability. A single-column layout helps a lot here.
• Stick to web-safe fonts (or provide solid fallbacks). Many email clients won’t load custom web fonts consistently.
• Make links obvious: use a clear link color and/or underline, and avoid tiny “text links” for primary actions—use buttons for CTAs.

A few extra “save you later” tips

• Dark mode: some clients invert colors. Use strong contrast, avoid text baked into images, and don’t depend on subtle light-gray text on white backgrounds.
• Preheader + subject: treat the preheader as part of the design—it affects opens and sets context before anyone sees the layout.
• Test across clients/devices: responsive email can look perfect in one inbox and odd in another. Always test at least: iPhone Mail, Gmail (mobile + desktop), Outlook (desktop), and a couple of popular webmail views.

If you tell me which email clients matter most for your audience (e.g., Gmail-heavy vs. Outlook-heavy) and whether you’re using media queries or a hybrid/fluid approach, I can recommend a layout pattern that matches your situation and is least likely to break.