Good email design makes one action obvious on a phone. Use one column, large readable text, a big button, real text rather than words inside images, and enough contrast to read in light or dark mode. Then test it in the inboxes your customers use.
Email is not a small website. Inboxes strip some code, block some images and change colors, so the safest designs are simple ones. Plain doesn't have to mean dull. A strong photo, good words and one clear button can carry a lot.
What does a good marketing email layout look like?
- One column: It reads the same on any screen. Save side-by-side blocks for product grids that still work when stacked.
- Top: brand and the point: A small logo, then the headline. Don't spend the top of the screen on a navigation bar.
- One main action: If a reader remembers one thing, what is it? Make that the first and largest button.
- Generous space: Thumbs need room. Space between sections helps people scan.
- A useful footer: Your address, unsubscribe link, and a way to change preferences or contact you.
How do you design for mobile?
Assume the first read is on a phone. Check the following before sending:
- Body text large enough to read without zooming. About 16 pixels is a common starting point.
- Buttons large enough to tap, with space around them. Apple's design tips ask for controls of at least 44 by 44 points, for apps, and that's a useful guide for email too (checked November 1, 2026).
- Short paragraphs. A paragraph that looks fine on a laptop becomes a wall on a phone.
- Images that scale to the screen, with key words kept outside them.
How do you design for dark mode?
Some apps invert or adjust colors in dark mode, and they don't all do it the same way, so you can't control it fully. You can make it survive:
- Save logos as PNGs with a transparent background and add a light outline or padding, so a dark logo doesn't vanish on a dark background.
- Avoid text baked into images with a white background. It becomes a bright box.
- Don't rely on color alone for meaning.
- Test in the apps your customers use most, in both modes.
How do you make emails accessible?
| Do this | Why |
|---|---|
| Keep text contrast at 4.5:1 or more (3:1 for large text) | The WCAG level AA minimum, and easier for everyone in bright light |
| Write alt text for images that carry meaning | Screen readers read it, and it shows when images are blocked |
| Use real text instead of images of text | It can be resized, translated and read aloud |
| Use descriptive link text | "See boots" helps; "Click here" doesn't tell a screen reader where it goes |
| Use real headings and a logical order | Screen reader users navigate by them |
| Avoid fast flashing animation | It can distract, and it can harm people with some conditions |
How should you handle fonts and images?
- Fonts: Web fonts don't load everywhere. Pick a fallback you're happy with, such as Arial or Georgia, and check how it looks.
- Image size: Compress images so the email opens fast on a phone. Very big files are slow on cellular data.
- Blocked images: Some people see your email with images off. Would it still make sense?
- Email length: Keep code light. Gmail clips very large messages, around 102 KB of code according to Litmus (checked November 1, 2026), which can hide your footer and unsubscribe link.
- Animated GIFs: Fine in moderation. Make sure the first frame works on its own, since some apps show only that.
How should a product email differ from a newsletter?
| Layout | Main action | |
|---|---|---|
| Sale | Headline with the offer, then a small product grid | Shop the sale |
| New product | One large image, a few details, one button | See the product |
| Newsletter | A consistent header, one main story, smaller links | Read the story |
| Cart reminder | The product, the price, a button; few distractions | Return to cart |
| Order update | Plain and factual; order details first | Track the order |
What should you check before you send?
- Send a test to yourself on a phone, on a laptop and in dark mode.
- Click every link, including the logo and the footer.
- Read it with images off.
- Check the merge tags with a real customer and a customer with missing details.
- Confirm the unsubscribe link works, and that your business address is there.
- Set the preview text and subject.
Designing emails in SmartyTap
SmartyTap's email editor is built from blocks, with saved templates, versions and brand styles, so your next email starts from your own design rather than a blank page. Preview an email with sample data before you send. Marketing emails include one-click unsubscribe, and links can carry UTM tracking for your reports. Launched campaign emails stay editable too: what's been delivered stays delivered, and "Update scheduled sends" moves anything still waiting to your new version.
Frequently asked questions
How wide should a marketing email be?
About 600 pixels has long been the common width, and a single-column layout scales down well on phones. Check your emails on real devices.
What font size should I use in emails?
Around 16 pixels for body text is a common starting point, with larger headlines. Readers on phones shouldn't need to zoom in.
How do I make emails look good in dark mode?
Use transparent logos with a light outline, avoid text inside images with white backgrounds, and test in the apps your customers use. Each app handles dark mode differently.
Should an email be all images?
No. Image-only emails can break when images are blocked, can't be read by screen readers and are harder to read on phones. Keep key words in real text.
Written by
Claire Mitchell
Lifecycle Marketing Writer, Chargezen
Claire Mitchell writes about lifecycle marketing, customer engagement, and the growing role of AI in customer retention. She explores how businesses use email, SMS, messaging platforms, and behavioral data to deliver more relevant customer experiences throughout the customer journey. Her coverage focuses on marketing automation, intelligent segmentation, personalized campaigns, and the strategies that help brands increase repeat purchases and customer lifetime value.
