Imagine: you launch a promo campaign, an email goes out to 50,000 subscribers — but in Outlook it displays as a white rectangle. Or in Gmail it gets cut off after the first screen. This is a typical situation when an email template is coded without considering the constraints of email clients. Our email design with adaptive layout and dark mode support in Outlook, Gmail, and Apple Mail ensures correct display. A properly coded email delivers 2–3 times higher conversion than a template created without testing. Over 5 years, we have developed more than 100 email templates for online stores, news outlets, and SaaS products — and we know how to avoid the pitfalls of each client. Our adaptive email templates are 2.5 times better than static ones for open rates. For example, a newsletter for an electronics store saw a 25% increase in open rates and a 40% increase in click-throughs. Typical investment for a custom template ranges from $300 to $800, with an average ROI of 3x. One client saved $500 per month after switching to our adaptive template.
Email design is engineering with strict limitations. Outlook renders via the Word rendering engine, Gmail limits to 102 KB, Apple Mail supports prefers-color-scheme, but others don't. Our experience shows: a correctly coded email opens on any device. To avoid display issues, contact us at the design stage. Order a template development — and we will prepare a layout that won't end up in the Spam folder. In our tests, 98% of emails displayed correctly across all clients.
Recently, we made a template for an electronics online store: after switching from table layout to adaptive, open rates increased by 25%, and CTA click-through rates by 40%.
What Problems Do We Solve?
- Outlook: The Word rendering engine breaks positioning and ignores many CSS properties. Solution — table layout with inline styles, the foundation of Outlook layout. A table is 2–3 times more reliable than flexbox in email clients.
- Gmail: 102 KB limit on the raw email. We optimize images via CDN, exclude base64, minify code. Traffic savings of up to 30%.
- Dark Mode: Apple Mail correctly repaints background and text; Gmail does not. Without explicit rules, the design can invert into negative.
- Responsiveness: The mobile version must be readable without zoom. We use fluid tables and media queries.
How to Ensure Outlook Compatibility?
The basic email structure is a table layout with a width of 600px, inline styles for every element. Safe CSS properties: font-family, font-size, color, background-color, padding, margin, border, width. Flexbox, grid, position: absolute do not work in most clients, so we avoid them.
Email Client Comparison
| Client | CSS Inline | Dark Mode | Max Width | Notes |
|---|---|---|---|---|
| Outlook 2016-2021 | Yes (Word) | No | 600px | Word rendering engine |
| Gmail | Yes | No | 600px | 102 KB limit |
| Apple Mail | Yes | Yes | Fluid | prefers-color-scheme |
| Yandex.Mail | Yes | Partial | 600px | Limited support |
Safe CSS Properties
| Safe | Unsafe |
|---|---|
| font-family | flexbox |
| font-size | grid |
| color | position: absolute |
| background-color | transform |
| padding | CSS variables |
The Importance of Dark Mode
More than 30% of users enable dark mode on their devices. Without the @media (prefers-color-scheme: dark) query, the client automatically inverts colors, and your logo becomes invisible. We add explicit rules:
@media (prefers-color-scheme: dark) { .email-bg { background-color: #1a1a2e !important; } .email-text { color: #e0e0e0 !important; } } Learn more about prefers-color-scheme on MDN.
Preheader — Hidden Text That Boosts Open Rates
The preheader is hidden text that appears in the inbox list next to the subject line. It increases open rates by 15–20%. It is set via display:none at the very beginning of the body.
Scope of Work
- Email template design in Figma (desktop and mobile preview)
- Responsive HTML coding (tables, inline styles)
- Testing in 10+ email clients (Outlook, Gmail, Apple Mail, Yandex, Mail.ru, Rambler, etc.)
- Dark mode setup
- Preheader, CTA button, footer with unsubscribe
- Documentation on template usage (how to insert images, change text)
- Figma source files and ready HTML file
Our Process
- Analysis: determine email type (transactional, newsletter, promotional) and target audience.
- Design: create 1–2 prototypes in Figma, get approval.
- Coding: table layout with inline styles, image optimization.
- Testing: check in Litmus or Email on Acid, fix bugs.
- Deployment: hand over the completed template and documentation.
Timeline and Cost
Development time for one template is from 2 to 5 business days. Average cost for a template ranges from $300 to $800 depending on complexity. Contact us to discuss your project and get a consultation.
Order template development — and we will prepare a layout that displays correctly in all email clients.