Mobile-First, Accessible, and Dark-Mode Ready: My Email Development Checklist
Most email developers don’t get to test their work on a nice wide screen with perfect lighting and modern client support. Instead, their emails show up on:
An iPhone on low brightness in dark mode
A cracked Android screen on a 3G connection
Outlook 2016 inside a legacy enterprise VM
If your email isn’t built for those conditions, it’s not built for the real world. That’s why I don’t build emails until I run them through this checklist — one that puts **mobile-first**, **accessibility**, and **dark-mode readiness** at the top.
This isn’t theory. This is what I use in real production workflows.
1. Mobile-First Layout Strategy
Mobile isn’t an edge case — it’s the norm. More than half of email opens happen on phones, and if your layout fails there, you lose your audience instantly.
Single-column design: Stack everything vertically by default
Max width control: Limit content width to ~600px for readability
Safe tap zones: Buttons should be at least 44px tall with spacing
Responsive images: Use width="100%" and define fallback dimensions
Media queries fallback: Design must still work if they fail
Bonus: Avoid fixed heights, and make sure font sizes are readable at 320px width screens.
2. Inline Styles and Table-Based Structure
Modern layout tools like Flexbox and CSS Grid don’t work consistently across email clients. Stick to table layouts and inline styles for predictability.
Structure your layout using nested <table> elements
Inline all spacing, alignment, and color styles
Always test without <style> blocks — what gets stripped matters
3. Accessibility Checks
Email accessibility isn’t optional. It’s what makes your message available to all readers — including those using screen readers or reading in noisy environments.
Use semantic HTML: Headings (<h1>, <h2>), paragraphs, and lists
Include alt text for every image, including logos and buttons
Readable contrast: Test background/text contrast ratios
Minimum font size: 14px or higher for body text
Meaningful link text: Avoid “click here” — give context
Pro tip: Use tools like VoiceOver or NVDA to check screen reader output.
4. Dark Mode Readiness
Dark mode is no longer a fringe feature. Gmail, Apple Mail, Outlook, and mobile apps all support it — and each in its own quirky way.
Set background colors explicitly:bgcolor and style="background-color:"
Avoid transparent PNGs if they rely on light backgrounds
Test light logos on dark backgrounds — or provide alternatives
Don’t rely on black text alone: Force text color to dark gray if needed
Use meta tags for system-level dark mode if supported by your ESP
Dark mode is tricky, but manageable. Just don’t assume your “white background, black text” email will stay that way.
5. Fallback Fonts and Rendering Stability
Custom fonts are great — if supported. Many email clients ignore web fonts. Always set font stacks with graceful degradation.
Also: test your line heights, padding, and alignment with both your primary and fallback fonts to ensure spacing doesn’t break.
6. ESP and Device Testing
Before sending, test in:
Apple Mail (Light and Dark Mode)
Gmail Web and Mobile
Outlook 2016/2019
Yahoo Mail
Samsung Mail
Use tools like Litmus or Email on Acid for previews — and always test live in your own inboxes too.
7. Final QA Checklist
✅ Images load with alt text
✅ Buttons are tappable and work
✅ Mobile version stacks cleanly
✅ Dark mode doesn’t break layout
✅ Content reads well with screen readers
✅ No broken links or placeholder copy
Final Thought: Email Is Its Own Medium
Too many developers treat email like a mini web page. But it’s not. Email is its own medium — with its own rules, quirks, and powers. And if you respect those quirks early, your message stands a better chance of getting read, clicked, and remembered.
I made this checklist because I got tired of re-fixing the same bugs over and over. Now it’s part of my standard workflow — and I hope it becomes part of yours too.
Still thinking it through? Contact me here and I’ll help you get it right.