Email Design Best Practices for E-Commerce Stores

Design Drives Conversion

A well-designed email can double your click-through rate compared to a poorly designed one with the same offer. Design is not about making emails pretty. It is about making them easy to scan, easy to understand, and easy to act on.

The best e-commerce emails follow a simple principle: guide the reader's eye from the hook to the offer to the call to action with zero friction.

Layout Fundamentals

Single Column vs. Multi-Column

Use a single-column layout for almost all e-commerce emails. Reasons:

Mobile-first: Over 60% of emails are opened on phones. Single-column layouts scale perfectly to small screens without requiring a separate mobile design.
Scanability: Single-column forces a linear reading flow. The reader's eye moves from top to bottom through your content in the order you intended.
Simplicity: Fewer layout decisions means faster email creation and fewer rendering issues across email clients.

Multi-column layouts are acceptable for product grids (showing three to four products side by side) but should still stack into a single column on mobile.

The Inverted Pyramid

The most effective email layout follows an inverted pyramid structure:

Attention (top): Hero image or bold headline that communicates the core message instantly.
Interest (middle): Supporting details, benefits, or social proof that build the case.
Action (bottom): A clear, prominent call-to-action button.

This structure mirrors how people read emails: quickly scan the top, read more if interested, and look for what to do next.

White Space

Generous white space between sections makes emails easier to read and feel more premium. Cramming content edge-to-edge overwhelms readers and reduces click rates.

Between sections: 30-40px of padding
Between text and images: 20-30px
Margins: 20px minimum on left and right

Typography

Font Selection

Email clients have limited font support compared to websites. Stick to web-safe fonts:

Sans-serif (recommended): Arial, Helvetica, Verdana. Clean, modern, and readable on screens.
Serif (for specific aesthetics): Georgia, Times New Roman. Good for luxury or editorial brands.
System fonts: Using system font stacks ensures fast rendering and consistent appearance.

Avoid custom fonts unless you have tested them across Gmail, Outlook, Apple Mail, and Yahoo. Many email clients will substitute them anyway.

Font Sizing

Headlines: 24-32px. Large enough to grab attention at a glance.
Body text: 16-18px. Anything smaller is hard to read on mobile.
Secondary text: 14px minimum. Use for captions, fine print, or metadata.
Line height: 1.4-1.6 for body text. Tighter line height makes text feel cramped.

Text Formatting

Keep paragraphs short: Two to three sentences maximum. Long paragraphs get skipped.
Use bold for emphasis: Highlight key phrases, prices, and deadlines.
Limit font styles: Use one or two fonts maximum. More than that looks chaotic.
Left-align body text: Centered text is harder to read in blocks longer than two lines.

Images

Image Best Practices

Optimize file size: Keep images under 200KB each. Total email size should not exceed 600KB. Large images cause slow loading, especially on mobile data connections.
Use alt text: Many email clients block images by default. Alt text ensures your message communicates even without images. Alt text for a product image should be descriptive: "Blue wireless headphones — now 25% off."
Width: Set images to 600px wide maximum (the standard email width). Use percentage widths for responsive scaling.
Retina-ready: Upload images at 2x resolution but display at 1x size for sharp rendering on high-DPI screens.

Image-to-Text Ratio

Emails that are entirely images (image-only emails) have two problems:

They land in spam more often because spam filters cannot read image content.
They display nothing useful when images are blocked.

Aim for at least 60% text and 40% images. Use live text for headlines, body copy, and calls to action. Use images for product photos, lifestyle imagery, and brand visuals.

Hero Images

Your hero image is the first visual element in the email. It sets the tone and communicates the theme instantly.

Product-focused: Show the product in use or in an aspirational context.
Lifestyle-focused: Show the result or feeling the product delivers.
Text overlay: If adding text to your hero image, ensure it is readable on both desktop and mobile. Large, high-contrast text works best.

Call-to-Action Buttons

Your CTA button is the single most important design element. It is where engagement converts to action.

Button Design

Size: Minimum 44x44px (Apple's recommendation for touch targets). Bigger is generally better for mobile.
Color: High contrast with the surrounding content. Your brand's primary color usually works. The button should be the most visually prominent element in the email.
Shape: Rounded corners (4-8px border radius) perform slightly better than sharp corners in most tests.
Text: Action-oriented, specific verbs. "Shop Now," "Claim My Discount," "Complete My Order" beat generic "Click Here" or "Learn More."

Button Placement

Above the fold: Place your primary CTA where it is visible without scrolling.
After key selling points: Repeat the CTA after sections that build desire.
End of email: Always include a final CTA at the bottom for readers who scroll through the entire email.
One primary CTA per email. Multiple competing CTAs reduce click rates. It is fine to have the same CTA button repeated, but avoid having "Shop Shoes" and "Shop Bags" and "Read Our Blog" all competing for attention.

Bulletproof Buttons

Some email clients do not render CSS-styled buttons properly. Use "bulletproof buttons" coded with HTML table cells and background colors instead of relying on CSS alone. Most email builders handle this automatically, but verify in your testing.

Mobile Optimization

With 60%+ of opens on mobile, designing for phones is not optional.

Mobile-Specific Guidelines

Touch targets: All clickable elements (buttons, links, images) should be at least 44x44px with 10px spacing between them.
Font size: Never go below 14px on mobile. Body text at 16px is ideal.
Image stacking: Multi-column product grids should stack vertically on mobile.
CTA prominence: Buttons should span the full width of the content area on mobile.
Preview on real devices: Email rendering varies between iOS Mail, Gmail app, and Samsung Email. Test on at least two.

Responsive Design

Use media queries to adjust your email layout for different screen sizes. Most email builders provide responsive templates, but verify these key behaviors:

Images scale down without breaking layout
Text remains readable without horizontal scrolling
Buttons are large enough to tap accurately
Spacing adjusts so content does not feel cramped on small screens

Dark Mode

An increasing number of email clients support dark mode, which inverts colors automatically. Prepare for this:

Use transparent PNGs for logos so they do not display with white boxes on dark backgrounds.
Avoid pure black (#000000) text. Use dark gray (#333333) which displays well in both light and dark modes.
Test in dark mode on at least one email client (Gmail and Apple Mail both support it).
Add a white outline to dark logos so they remain visible on dark backgrounds.

Accessibility

Accessible emails reach more people and often convert better for everyone:

Alt text on all images: Descriptive text that communicates the image's purpose.
Sufficient color contrast: Body text should have a contrast ratio of at least 4.5:1 against its background.
Semantic HTML: Use proper heading tags (h1, h2, h3) for screen readers.
Do not rely on color alone: If a sale price is shown in red, also include text like "Sale" or "Was $X, now $Y."
Link text: "Shop the sale" is better than "Click here" for screen reader users.

Key Takeaways

Use single-column layouts for reliable mobile rendering and easy scanning
Follow the inverted pyramid moving from attention to interest to action
Keep body text at 16-18px and paragraphs to two or three sentences
Optimize images under 200KB each with meaningful alt text
Design CTAs as the most prominent element with high-contrast colors and action-oriented text
Test on mobile devices because the majority of your subscribers are reading on phones