Definition
An email design mockup is a static or interactive visual representation of an email that shows how it will look before any HTML or CSS code is written. Mockups serve as the blueprint for email development, allowing designers, copywriters, and stakeholders to review and approve the layout before production begins.
Mockups exist at different fidelity levels from simple wireframes that show basic structure and content placement to high-fidelity designs that include colours, typography, images, and exact spacing.
Levels of Email Design Mockup
| Type | Purpose | Tools | Time Required |
|---|---|---|---|
| Wireframe | Content hierarchy and layout | Pen and paper, Balsamiq, Figma | 15-30 minutes |
| Low-fidelity mockup | Structure with basic styling | Figma, Sketch, Adobe XD | 30-60 minutes |
| High-fidelity mockup | Pixel-perfect design | Figma, Photoshop, Illustrator | 1-3 hours |
| Interactive prototype | Clickable preview for stakeholder review | Figma, InVision | 2-4 hours |
What an Email Mockup Should Include
- Header and preheader text: Show how the preheader appears in the inbox preview
- Hero section: Primary image or headline area
- Body content: Text blocks, images, buttons arranged in reading order
- Call to action: Button placement, colour, and copy
- Footer: Unsubscribe link, physical address, preference centre link
- Mobile view: How the design stacks at smaller screen widths
- Image-blocked view: What subscribers see when images do not load
Average Benchmarks
| Practice | Time Saved vs Coding Without Mockup | Error Reduction |
|---|---|---|
| Wireframe first | 15-25% | 30-50% fewer revisions |
| High-fidelity mockup | 10-20% | 20-40% fewer revisions |
| Mobile mockup included | 15-30% | 40-60% fewer mobile issues |
How to Create Effective Email Mockups
- Design mobile-first: Start with the narrow screen layout, then expand to desktop. This ensures the most constrained view is prioritised.
- Use real content: Placeholder text hides layout problems. Use actual headlines, body copy, and button text to identify issues before coding.
- Show image-blocked state: Design a version without images to ensure the email communicates its message even when images are disabled.
- Include alt text placeholders: Note what alt text each image will use. This both improves accessibility and shows content priority.
- Annotate technical requirements: Note which elements use conditional code for Outlook, which fonts are custom vs web-safe, and any interactive features like AMP components.
Was this useful?
Related Glossary Terms
A/B Testing
A/B testing in email marketing is the practice of sending two variations of an email to a small sample of your list to determine which version performs better before sending the winner to the remaining subscribers.
Abandoned Cart Email
An abandoned cart email is an automated message sent to customers who added items to their online shopping cart but left without completing the purchase. It is one of the highest-converting email types in ecommerce.
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AI Email Summary
An AI email summary is a short, machine-generated overview of an email's key points, shown by Gmail, Outlook and Apple Mail before a recipient opens the message. It is reshaping how email marketers think about subject lines, preview text and open rates.
Frequently Asked Questions
A mockup is a static visual representation of the email design. A prototype is clickable and simulates user interaction. For email, prototypes are less common because email interactions are limited to clicking links, but prototypes can be useful for demonstrating interactive AMP email components.
Not every individual send needs a mockup, but every email template does. Once a template is designed and approved, individual campaigns can use the template with content changes. New template designs, major redesigns, and high-value campaigns always benefit from mockup review.
Figma is the most popular choice because it supports collaborative editing, component libraries, and plugins for email-specific features like preheader text. Sketch and Adobe XD are also widely used. For quick wireframes, pen and paper or Balsamiq are effective.
Show both desktop and mobile views side by side. Walk through the email in reading order. Explain key design decisions. Provide context for how the email fits into the broader campaign. If possible, show a version with images blocked and an empty state.
Yes, for critical campaigns. Note how the design will handle Outlook for Windows (which uses Microsoft Word rendering), Gmail (which strips certain CSS), and Apple Mail (which supports the most modern CSS). Annotate any conditional code needed for specific clients.