Email design does not exist in a controlled environment. Every email is affected by device, email client, and user settings.
Understanding these variables is essential for consistent performance.
Dark Mode Changes How Emails Look
Dark mode can significantly alter your design.
It can:
- Invert colors
- Reduce contrast
- Change how images appear
To design for dark mode:
- Avoid relying on light backgrounds only
- Ensure text remains readable
- Test logos and visuals
Dark mode is no longer optional and must be considered. More than 1/3 of all email users have dark mode enabled, so if you are not adapting to it, you could potentially lose 1/3rd of possible users in the first few seconds.
Testing is crucial here, making the email and then actually checking how it looks on dark mode is the most bulletproof way to go.
Responsive Design Is the Foundation
Responsive emails adapt to different screen sizes and devices.
They adjust:
- Layout
- Text size
- Image scaling
Without responsive design, emails can break, become unreadable, or require unnecessary effort to consume.
Responsiveness between desktop and mobile
This is the most crucial part and also the most demanding. You should definitely make your email responsive for both since people use both of those in scale. If you were to only make it for desktop let’s say, you could potentially lose 50% of your readers who open on mobile.
Email Clients Render Differently
Different email clients behave differently.
Unlike websites, emails are not rendered in a single, standardized environment. Every email client interprets your code differently. That means your carefully crafted design might look great in one place and fall apart in another.
Why does this happen?
Email clients use different rendering engines, and many of them are outdated or heavily restricted.
Here’s what that means in practice:
- Limited CSS support
Some clients (looking at you, Outlook 👀) don’t support modern CSS. Things like flexbox, grid, or even margins can behave unpredictably or not work at all. - Automatic style overrides
Certain clients (like Gmail or iOS Mail) may rewrite or override your styles. They might adjust font sizes, invert colors in dark mode, or strip out embedded CSS. - Blocked or stripped elements
JavaScript is completely unsupported. External fonts, background images, and even some HTML attributes can be removed or ignored.
This creates inconsistencies.
Simpler designs are more reliable because they are less likely to break across environments.
Emails Should Work Without Images
Some email clients block images by default.
Your email should still:
- Make sense without visuals
- Use clear text
- Include meaningful alt text
Images should support the message, not carry it entirely.
Final Thought
Email design is shaped by constraints. Dark mode, responsive behavior, and client differences are not edge cases, but new reality.
The best emails are both well-designed and designed to work everywhere.
Because of that, Testing has become so much more important, to test every image and every client means to strive for great results nowadays.