Get Started

Mobile-First Email Design

Published

Overview

Most email opens happen on a phone. This guide shows you how to design for small screens first, then refine for desktop — so every email you ship looks right in both. You’ll structure a mobile-friendly layout, tune typography and tap targets, size images, and use the builder’s preview to verify before you export.

The HTML you export is built to render reliably in Gmail, Outlook, and Apple Mail, so what you check in preview is what your readers get.

Why mobile-first

The majority of opens are on phones, and mobile rendering problems — tiny text, cramped buttons, overflowing images — erode clicks faster than almost anything else. Designing mobile-first is easier than fixing a desktop-first design after the fact: you start with the constraints of the smallest screen, then expand outward. Everything you add from there only makes the desktop view better.

Structuring for mobile

Emails in Temway stack from three nested layers: Sections sit top to bottom, Rows sit inside sections, and Columns split rows to place content side by side. On narrow screens, every multi-column row reflows into a single stacked column — so the structure you build has to make sense when it collapses.

Build the skeleton first, then add content:

  1. Add a Section for each visual zone — typically a header, a body, and a footer.
  2. Inside each section, drag a Row and choose a column layout: 1, 2, 3, or 4 columns.
  3. Reach for one or two columns for most body content. Reserve three or four columns for content that genuinely needs side by side — a feature grid, or an image next to its caption.
  4. Keep your single most important action in its own one-column row, so it stays full-width and obvious when everything stacks.

A one-column layout is the most reliable choice on a phone. Multi-column rows are powerful on desktop, but every extra column is one more thing that has to reflow cleanly — use them where the content earns it.

Typography and tap targets

Text and buttons are where mobile designs most often break down. A few rules keep both readable and tappable:

  • Body text around 14–16px — anything smaller strains the eye on a phone. Bump headings up proportionally.
  • Generous line height so paragraphs breathe. Cramped lines are hard to scan on small screens.
  • Buttons with enough padding that a finger can hit them cleanly. A tap target that feels fine on desktop is often too small on mobile.
  • Full-width buttons on mobile — place your primary call to action in its own column so it stretches edge to edge when the row stacks.

All of these are adjustable per block in the properties panel — font sizes and weights, letter spacing, line height, alignment, plus button padding and corner radius.

Images that scale

Images that look fine on a wide screen often overflow or dominate on a phone.

  1. Upload or link an image with an Image block.
  2. Arrange image-heavy content in grids of up to 4 columns with configurable spacing and corner radius. On desktop they sit side by side; on mobile they stack vertically.
  3. Keep your most important image in a one- or two-column row so it stays large enough to read when stacked.

Using the preview

The builder toolbar has Desktop and Mobile viewport toggles. Switch between them constantly as you design — the preview reflects what readers will actually receive.

On each viewport, check:

  • Spacing — does anything feel cramped or oddly empty?
  • Font sizes — is body copy still readable at mobile width?
  • Single-column reflow — do multi-column rows stack in a sensible order?
  • Button tap targets — are primary actions easy to tap?
  • Image scaling — do images fit the width without overflowing?

Design and tweak in the mobile view first, then flip to desktop to confirm the wider layout still holds.

Spacing and dividers

Breathing room matters more on small screens, where everything sits closer together.

  • Use Spacer blocks to add vertical room between sections.
  • Use Divider blocks to separate content visually — a thin line between the body and footer, for example.
  • Adjust padding on each section to keep content from running to the edges of the screen.

A quick mobile checklist

Run through this before you export:

  • Body text is at least 14px, and headings scale up proportionally.
  • Primary buttons sit in their own column and stretch full-width when stacked.
  • Multi-column rows reflow into a readable single column.
  • Images fit within their column and don’t overflow on mobile.
  • Spacers or section padding keep content off the edges.
  • The mobile preview matches what you want readers to see.

Export and verify

When the design looks right in both viewports:

  1. Click Export to generate production-ready HTML.
  2. Temway is a builder and exporter, not your ESP — drop the HTML into your sending tool to deliver the campaign. It works with Mailchimp, SendGrid, Klaviyo, Customer.io, Postmark, and Amazon SES, or any provider that accepts pasted HTML.
  3. For a final check, use Test send to deliver a copy to your own inbox. Test sends are limited per user on a rolling 24-hour basis: 5/day on Free, 20/day on Starter, 50/day on Pro, and 100/day on Max.

Next steps