When designing your email, it’s important to keep in mind that mailbox providers (such as Gmail, Outlook, and Apple Mail) interpret HTML in a restrictive way. While our email editor accounts for style restrictions imposed by these providers, it’s important to follow the best practices below for optimal outcomes.
Structure your email
The internet has come a long way since it first began: on nearly any website, simple HTML tables that structure each page have been superseded by flexible layouts, creative styling, and eye-catching animations. Email is a different story. Each mailbox provider interprets the HTML code of an email differently and supports a limited degree of customization, so we're left with the basic building blocks that everyone supports.
Attentive’s editor focuses on styling options that are supported by a large majority of mailbox providers to ensure that the code is readable. Per the standard for email, our builder is centered around HTML table-based layouts. This is the only layout type that’s widely supported across mailbox providers. Don't be discouraged, though: there's still plenty of exciting customization that email allows to fit any brand.
When structuring your email, separate content into individual rows. For instance, putting the logo in its own row allows you to change the background color of the entire row without affecting the styling and spacing of other content, like header text or images below it.
Apply responsive design
Responsive design is an approach to web design that adapts to device type (i.e., desktop or mobile) and window size. For example, a responsive design might use a smaller text size on mobile devices than on desktop.
If you want your emails to appear differently on mobile devices, we recommend creating two versions of the elements that you want to be responsive. You can design one element for mobile and hide it from desktop, then design the other element for desktop and hide it from mobile.
Design your email for dark mode
Dark mode is a feature that many people enable on their devices, browsers, and email clients. It changes the color scheme of the screen to a dark background with light text and elements. Dark mode can reduce eye strain, improve readability, and save battery life. It’s also sometimes preferred by people with disabilities or in situations that require dimmer lighting. Optimizing your emails for dark mode helps you respect your subscribers’ preferences by delivering emails that look good in both light and dark modes.
For more information about designing emails for dark mode, see Optimize email for dark mode.
Learn more about Attentive Email
If you're interested in learning more about Attentive Email, please submit your information here.