Email Design Best Practices: Build Emails That Look Great Everywhere
Why Email Design Is More Complex Than Web Design: Email Design Best Practices
⠀
Designing an email looks deceptively simple — you're working with a smaller canvas than a website, and the interaction options are limited. But in practice, email design best practices are far more technically complex than web design because of one persistent challenge: email clients.
Unlike websites, which render consistently in modern browsers, emails render differently across dozens of email clients — Gmail, Outlook, Apple Mail, Yahoo Mail, and hundreds of mobile clients. Outlook on Windows uses Microsoft Word's rendering engine, which ignores much of modern CSS. Gmail has its own CSS quirks. Apple Mail supports features that no other client does. A design that looks perfect in one client can be completely broken in another.
This fragmentation means that email design requires a different approach: building with the lowest common denominator in mind while progressively enhancing for clients that support more advanced features. It means testing across multiple environments before every send. And it means understanding the specific technical constraints of the medium rather than applying web design principles directly.
Beyond technical complexity, email design affects business performance in measurable ways. Clear layout, strong visual hierarchy, mobile responsiveness, and well-placed calls to action directly influence click-through rates. Poor design doesn't just look bad — it costs money in missed conversions.
⠀
Layout and Structure Fundamentals ve Email Design Best Practices
⠀
The foundation of effective email design is a clear, consistent structure that guides the reader from subject line through call to action without confusion or friction.
Use a single-column layout as your default for content emails. Multi-column layouts look professional on desktop but require careful responsive design work to stack correctly on mobile. A clean single-column layout renders reliably across all clients and devices and forces you to prioritize content rather than filling horizontal space.
Set your email width to 600-640 pixels. This has been the standard for many years and ensures full visibility across desktop clients without horizontal scrolling. On mobile, your CSS media queries should cause the layout to reflow to 100% of the device width.
Organize each email around a clear visual hierarchy: header/logo, hero section (main message or image), body content, CTA section, and footer. Every element should serve a purpose — remove anything that doesn't contribute to the email's single primary goal.
Use white space generously. Cramming too much content into an email creates visual overwhelm that causes readers to skim and miss key messages. Padding of at least 20-30 pixels around content blocks, generous line height (1.5-1.7x font size), and breathing room between sections all improve readability.
⠀
Typography That Works in Email
⠀
Email typography is constrained by the same cross-client reality as layouts. Web fonts — custom typefaces loaded from a font service — are not supported in all email clients. Gmail, the world's most popular email client, has limited web font support. This means you need a fallback font strategy.
System fonts — the fonts already installed on a user's device — render reliably everywhere. The most reliable email-safe fonts are: Georgia and Times New Roman (serif), Arial, Helvetica, and Verdana (sans-serif), and Courier New (monospace). Choose your primary and secondary fonts from this list, or load a web font with a system font fallback.
Set body text at a minimum of 14-16px. Anything smaller becomes uncomfortable to read on mobile without zooming. Headlines should be 22-28px minimum, with enough weight (bold or semi-bold) to stand out clearly from body text.
Line height should be 1.5-1.7x the font size. Text set at 16px should have a line height of 24-27px. Compressed line height makes text feel dense and discourages reading; generous line height creates breathing room that encourages engagement.
Limit your type hierarchy to two or three levels: a headline, a subheadline or section header, and body copy. More levels create visual complexity that slows comprehension.
⠀
Image Best Practices in Email
⠀
⠀
⠀
Images significantly affect both the visual quality and the technical performance of emails. Getting them right requires balancing design impact with load time and alt text accessibility.
Use images to support content, not replace it. A common mistake is building emails that are entirely image-based — because images are easier to design in visual tools. The problem: many email clients block images by default, meaning image-only emails display as blank white to a significant portion of recipients. Always ensure that the email's key message is communicated in HTML text, not only in images.
Optimize image file sizes aggressively. Email images should be compressed to the smallest file size that maintains acceptable visual quality. Large images increase load time, particularly on mobile data connections, and can trigger spam filters. Aim for under 1MB total for all images in an email, with individual images under 200-300KB where possible.
Always include descriptive alt text for every image. Alt text serves two purposes: it provides context when images are blocked, and it improves accessibility for subscribers using screen readers. Descriptive alt text ("Customer testimonial from Sarah J., small business owner") is far more useful than generic alt text ("image") or no alt text at all.
Use a maximum of 2-3 images per email. Image-heavy emails can feel like advertising spam and are more likely to be filtered. They also load slowly. Reserve images for the hero section and one or two supporting visuals, then use HTML text and well-designed layout elements for everything else.
Consider using background colors and CSS styling rather than images for decorative elements. Colored dividers, section backgrounds, and visual accents created in CSS render faster, scale better, and are more accessible than image equivalents.
⠀
Calls to Action That Get Clicked
⠀
The CTA button or link is the single most important element in most marketing emails — it's where the click that drives revenue happens. Design and placement of CTAs deserves careful attention.
Button design. HTML buttons (styled with CSS rather than image-based) render reliably across all clients. Use a high-contrast color for the button background that stands out clearly against the email's background color. Button text should be specific and action-oriented: "Get the Free Guide," "Start My Trial," "Shop the Collection." Minimum button size: 44x44px to be comfortably tappable on touchscreens.
Placement. For short emails (under 300 words), a single CTA near the end of the content is typically most effective. For longer emails, consider placing a primary CTA both within the content and again at the email's end — some readers will reach the CTA point before finishing the email, while others prefer to read completely before acting.
Single primary CTA. Every email should have one primary action you want the reader to take. Multiple competing CTAs split attention and reduce overall click rates. Secondary actions (social follows, reply options) can be included but should be visually subordinate to the primary CTA.
Button padding. Make buttons generously sized with significant padding (at least 15px top and bottom, 25px left and right). Small, difficult-to-tap buttons are one of the most common mobile email UX complaints.
⠀
Mobile Email Design Requirements
⠀
⠀
⠀
More than half of all email opens occur on mobile devices. An email that isn't optimized for mobile is creating a poor experience for the majority of its readers.
Responsive design. Use CSS media queries to adjust your email layout, font sizes, and image dimensions for mobile screens. The minimum recommended implementation: on screens below 600px wide, switch to a single column layout, increase font size by 1-2px, and resize all images to 100% width of the container.
Touch-friendly targets. All clickable elements — buttons, links, image links — must be large enough to tap accurately with a finger. Apple's Human Interface Guidelines recommend a minimum tap target of 44x44 pixels. Closely spaced links create frustrating tapping experiences on small screens.
Legibility at a glance. Mobile email is consumed in environments with high visual noise — on public transport, in queues, between other tasks. Design for the skim: short paragraphs, clear section breaks, bold key phrases, and a CTA that's immediately visible without scrolling past the fold (visible screen area).
Test on real devices. Preview tools like Litmus or Email on Acid show how emails render across dozens of client/device combinations. Use them before every send, but also test on physical devices periodically. The color and contrast characteristics of OLED versus LCD screens, for example, can make a significant difference in how your email appears.
⠀
Pre-Send Quality Checklist
⠀
Before every email send, run through this checklist to catch common design errors:
Does the email render correctly in Gmail (web and app), Outlook, and Apple Mail?
Do all links point to the correct destination and open correctly?
Do all images have descriptive alt text?
Does the email display correctly with images disabled?
Is the primary CTA visible above the fold on mobile?
Are all buttons at least 44px tall and easily tappable?
Is the total email file size under 100KB (HTML only, excluding images)?
Is the subject line and preheader text pair compelling and correctly previewed?
Are unsubscribe links present and functional?
Is the physical address included in the footer?
⠀
At Blakfy, this checklist is part of the standard email deployment process for every client campaign — because catching a broken link or missing alt text before a send to 50,000 subscribers is far better than discovering it after.
⠀
Frequently Asked Questions
⠀
Should I use HTML or plain text emails?
Most marketing emails use HTML for design flexibility and the ability to include images and styled buttons. However, plain text emails have a role — they often perform very well for personal-feeling relationship emails (win-backs, re-engagement, CEO messages) where the goal is to feel like a human sent the email, not a marketing system. Many email platforms allow you to send multipart MIME emails containing both HTML and plain text versions, which is a good default.
How do I ensure my emails don't end up in Gmail's Promotions tab?
The Promotions tab is Gmail's way of organizing marketing emails, and it's not necessarily bad — many users check it regularly. However, if you want to land in the Primary tab more consistently, use a more conversational plain-text or minimal-HTML format, write subject lines that feel personal rather than promotional, and encourage subscribers to move your emails to Primary. Note that Gmail's categorization is based on many signals and can't be fully controlled.
What email testing tools do you recommend?
Litmus and Email on Acid are the two leading email preview and testing platforms. Both offer screenshots across 50+ email clients and devices, link checking, spam filter testing, and accessibility analysis. For teams sending high-volume campaigns, these tools pay for themselves by preventing costly deployment errors.
