Email Design Best Practices for Ecommerce
Mobile-First Design Is Not Optional
Over 60% of email opens happen on mobile devices, and for younger demographics that number reaches 75%. If your email does not look good on a phone screen, the majority of your audience sees a broken experience. Mobile-first design means building your email for the smallest screen first, then ensuring it scales up nicely on desktop, rather than the other way around.
The practical implications for ecommerce emails are significant. Email width should be 600 pixels maximum, which displays well on most devices without horizontal scrolling. Body text should use 14px to 16px font size because anything smaller is unreadable on mobile without zooming. Buttons need to be at least 44px tall with generous padding so they are easy to tap with a finger. Product image grids that show 3 or 4 items across on desktop should stack to 1 or 2 columns on mobile.
Every email platform, from Klaviyo to Mailchimp, includes a mobile preview mode that shows how your email will render on different screen sizes. Preview every email on mobile before sending. What looks perfect on your desktop monitor may have overlapping text, tiny buttons, or invisible CTAs on a phone. If you discover design issues, fix them for mobile first, even if it means slightly less visual polish on desktop.
Layout and Structure
Single-Column vs. Multi-Column
Single-column layouts are the safest choice for ecommerce emails because they render consistently across every email client and device. The content flows from top to bottom in one stream: header, hero image, text, products, CTA, footer. There is no ambiguity about reading order, no risk of columns collapsing awkwardly on mobile, and the design process is simpler.
Multi-column layouts (typically 2-column product grids) work when you need to display multiple products side by side. Use them for product recommendation sections and category showcases, but make sure the columns stack vertically on mobile rather than shrinking to unreadable widths. Set a responsive breakpoint at 480px where columns collapse to full width.
Visual Hierarchy
Guide the reader's eye from the most important element to the least important. The typical hierarchy for an ecommerce email is: logo/brand header (recognition), hero image or headline (grab attention), supporting text (build interest), product section (present options), and CTA button (drive action). Each section should be visually distinct through spacing, background colors, or divider lines so the reader can scan quickly and find what interests them.
White space is your most powerful design tool. Dense, cluttered emails feel overwhelming and get closed immediately. Generous padding between sections (20px to 30px), around product images, and between text blocks makes the email feel clean and easy to read. Do not try to fit everything above the fold because mobile users scroll naturally.
Product Images and Photography
Product images are the primary conversion driver in ecommerce emails. Use high-quality product photography with consistent sizing and styling across all products in the same email. If you show four products in a grid, they should all have the same background treatment, similar lighting, and identical image dimensions so the layout looks cohesive rather than cobbled together from different product pages.
Lifestyle images (products in use, on a model, or in context) outperform plain product-on-white images in email by 15% to 25% in click-through rate. A candle company showing their candle in a cozy living room setting creates more desire than the same candle on a white background. However, the product itself must be clearly visible and identifiable in lifestyle shots. If the product gets lost in the scene, the image fails its purpose.
Always include alt text on every image. Many email clients, particularly Outlook and some corporate email systems, block images by default. Your alt text becomes the only representation of your product until the subscriber clicks "display images." Write descriptive alt text like "Blue linen summer dress, $89" rather than technical names like "product-SKU-1234.jpg." Add a visible text fallback below critical images so the email makes sense even without any images loading.
Call to Action Buttons
Your CTA button is the element that converts engagement into revenue. Make it visually dominant through size, color contrast, and placement. The button should use a color that contrasts strongly with the email background and surrounding content. If your email has a white background with black text, a bright blue, green, or orange button draws the eye immediately.
Button text should be specific and action-oriented. "Shop Now" is the standard but is so common it can feel generic. Test more specific alternatives: "Shop the Collection," "Get Yours," "See the New Arrivals," or "Claim Your Discount." Specific CTAs tend to outperform generic ones by 10% to 15% because they tell the subscriber exactly what happens when they click.
Use HTML-coded buttons rather than image-based buttons. Image buttons do not display when images are blocked, making your CTA invisible to a significant portion of recipients. HTML buttons render as clickable elements regardless of image settings. Every major email platform's drag-and-drop editor creates HTML buttons by default.
Place your primary CTA within the first 300 to 400 pixels of the email (above the fold on mobile) and repeat it near the bottom for subscribers who scroll through the full content. Two instances of the same CTA is usually sufficient. Adding more creates a pushy, over-commercialized feel.
Typography and Readability
Email client font support is more limited than web browsers. Stick to web-safe fonts like Arial, Helvetica, Georgia, or Verdana for body text, with your brand font used only in image-based headers where rendering is guaranteed. Custom web fonts can be specified with fallback stacks, but expect them to display correctly in only about 50% of email clients.
Body text should be 14px to 16px with 1.5 line height for comfortable reading on all devices. Headlines can range from 22px to 30px depending on length. Preheader text should be at least 13px. Never go below 13px for any visible text because it becomes unreadable on mobile screens without pinching to zoom.
Keep paragraphs short, ideally 2 to 3 sentences maximum. Long blocks of text get skimmed or skipped in emails. Use bullet points for feature lists and product benefits. Bold key phrases that a scanner should notice, but use bold sparingly because overuse makes everything equally emphasized, which is the same as nothing being emphasized.
Dark Mode Compatibility
Over 30% of email users now read in dark mode, where email clients invert backgrounds from white to dark and text from dark to light. If your email is not designed with dark mode in mind, logos on transparent backgrounds become invisible, light-colored text disappears, and product images with white backgrounds look like floating squares on a dark canvas.
To handle dark mode: save logos with a transparent background and include a subtle outer glow or use a logo version with a visible border. Add a background color to image containers so product images do not float on dark backgrounds. Test your emails in dark mode preview before sending, which is available in Litmus, Email on Acid, and some email platform preview tools. Avoid using very light colors for important text because they may become invisible in dark mode inversions.
Testing Before Sending
Every ecommerce email should go through a pre-send checklist. Preview on desktop and mobile. Check all links to make sure they go to the correct pages. Verify that product images load correctly and match current inventory. Read through with images disabled to ensure the email is understandable from alt text alone. Send a test to yourself and open it on your phone.
For high-stakes campaigns like product launches and major sales, use a tool like Litmus or Email on Acid to preview your email across 50+ email client and device combinations. These tools reveal rendering issues in Outlook, Gmail, Yahoo, Apple Mail, and various mobile clients that you would not catch by testing on your own devices alone.