How to Create a Responsive HTML Email for Mobile and Desktop

Start with a Fluid Email Foundation

A responsive email needs an outer structure that can shrink with its container. A common foundation uses a full-width presentation table around a centered inner table whose CSS width is 100 percent and whose maximum width controls the desktop measure.

The traditional width attribute can provide a desktop hint while an inline fluid width permits contraction. The essential reading order should remain logical in source because a receiving application can change or remove presentation rules.

<table role="presentation" width="100%">
  <tr><td align="center">
    <table role="presentation" width="600"
      style="width:100%;max-width:600px">
      ...
    </table>
  </td></tr>
</table>

Design the Essential Mobile Experience

Do not treat mobile as a scaled screenshot. Prioritize logical source order, readable text, usable links, controlled padding, and images that stay inside their container. The message should communicate its purpose if visual columns stack and decoration disappears.

Choose breakpoints from content. Resize until a row becomes crowded or text wraps badly, then place the conditional change before that failure. MDN recommends adjusting at the point where content needs improvement rather than following a list of fashionable devices.

Make Images Flexible and Accessible

Set normal content images to display as blocks where whitespace matters, constrain them with max-width:100%, and use height:auto when the aspect ratio should remain intact. Include meaningful alt text or empty alt for decoration. Width and height attributes provide intrinsic sizing, but CSS must still allow shrinking.

Do not place essential copy only inside an image. Remote images can be blocked, unavailable, or removed. The message should preserve its offer, context, and action in real HTML text.

Build Columns That Degrade Predictably

Traditional email columns often use table cells. Decide whether they should remain beside each other, narrow proportionally, or stack. If stacking relies on a media query, keep the unmodified source sequence meaningful because support and sanitization vary.

Avoid fixed heights around content that can grow through personalization or translation. A column that looks balanced with placeholder text may crop or create large gaps when actual copy is inserted.

Use Media Queries as Progressive Enhancement

Google documents Gmail support for media queries involving width, device width, orientation, and resolution, plus a defined CSS subset. That is useful evidence for Gmail, not proof for every client.

Keep selectors simple and add only purposeful overrides. If a primary call to action disappears without the query, the base layout is too fragile. Test the assembled output rather than assuming an authoring preview matches the sent message.

@media screen and (max-width: 620px) {
  .stack { display:block !important; width:100% !important; }
  .mobile-pad { padding-left:20px !important; padding-right:20px !important; }
}

Test from 320 Pixels to Wide Desktop

Review 320, 375, 390, and 430 pixels for overflow and target sizing; 600 pixels for the intended email canvas; 768 and 820 pixels for breakpoint transitions; and 1024 to 1440 pixels for container control. Use orientation tests only when they produce a meaningful layout change.

A responsive analyzer can measure horizontal browser overflow, while side-by-side preview makes state changes obvious. Follow those checks with actual sent messages because email clients can sanitize and reinterpret code.