.svg)
Email design is a specialized discipline, one that not every digital designer has experience with. There are unique considerations – font compatibility and the limitations of email editors, to name two – that can present hurdles to designers new to email development.
Below we’ve outlined some of the high-level considerations for design teams that are newer to email.
General Considerations
Custom Fonts & Typography Styles
Email clients may not support web fonts, and they often substitute them with default fonts, which can affect the intended typography and branding. Designers often resort to using web-safe fonts to maintain consistency. Similarly, typography styles, like tracking and kerning, may not be customizable in code.
Client Compatibility
Different email clients have varying degrees of support for HTML and CSS standards. While some clients like Gmail and Apple Mail have robust support, others like older versions of Outlook may have limited support. This means that complex layouts, advanced styling, and interactivity may not work consistently across all clients.
Responsive Design
Responsiveness, which allows an email to adapt to different screen sizes, is challenging to achieve uniformly. What looks great on a desktop computer may not work well on a smartphone or tablet. Designers often use media queries to create responsive designs, but some email clients may not fully support them.
Image Blocking
Many email clients block images by default for security and privacy reasons. This can affect the visual impact of an email. Designers need to ensure that the message and call to action remain clear even if images are not displayed. Marketers must add "alt text" to the image data once it is inserted into the email to help account for this as well.
Dark Mode: Designers must consider dark mode in their designs. Nearly 80% of all users enable dark mode. Some email clients, like Apple Mail and Outlook, offer dark mode themes. Dark mode theme settings inverse the colors normally displayed in the emails, and each client has its own way of choosing and rendering that inverse color. Use a tool like Coolors Contrast Checker to ensure that your color scheme has enough contrast so that it is not affected by the inversion of colors using. Additionally, consider creating a white glow or thin outline around dark, transparent images, i.e. your logo.
Email Client-Specific Quirks
Different email clients have their quirks and rendering engines. For instance, Outlook relies on Microsoft Word for rendering, which can lead to inconsistent results, especially with complex designs.
Testing Challenges: Due to the vast number of email clients and devices, thoroughly testing an email design is challenging. Marketers should know which email clients are priorities for their audience (create a dynamic segment!) so they know which clients to defer too.
Limit of Control: The key challenge in email design is the limited control designers have over how emails will be displayed. Unlike web design, where standards are more consistent, email design must account for a wide range of variables and client-specific behaviors.
Drag-and-drop Design Guidelines
If you want to better understand drag-and-drop vs HTML email development and how this impacts design, check out this article.
Work Within The Row Structure
Drag-and-drop emails are built in rows, divided into predefined columns
Images cannot extend across two rows unless the image file is split into two. Avoid text boxes with rounded corners. Also avoid gradients and background images. These are not supported by all email clients.
Use Web Safe Fonts
Custom fonts are only supported by a very small portion of email clients, so they will not show up in most emails even if we add them. However, adding custom fonts is a process that requires engineering and development resources if they are not already set up, so it is generally best to avoid them.
Image File Types
In email marketing, marketers need to optimize for smaller file sizes in images. Typically, PNG works better for graphic images like logos, illustrations, and wordmarks. JPG works better for real-life photos and more complex images. Only PNG files may have transparent backgrounds.
GIF images are supported by email clients and are a great way to embed movement into otherwise static emails. GIFs can be large in file size, however, so a good rule of thumb is to keep them under 200kb.
Image Widths
For non-background images: Images placed within <img /> tags in HTML should be at least 2x their intended viewing size. This is due to how images appear on high-definition screens, like Retina Displays. Otherwise, they will appear blurry.
For background images: background images cannot be constrained to a desired size in email, so they must be uploaded in the final size you wish to display them in.
CTA Buttons
CTA buttons in the drag-and-drop editor have specific limitations as well.
- They support only solid-color or transparent backgrounds. They can have borders as well.
- There is no hover state.
- They cannot include background images or gradients.
- They do not support icons, but you may use text characters like “→”. These characters are not supported by all clients, however.
Pixel Perfection
Drag-and-drop editors are wonderful and powerful tools, but they often require compromise. Do not expect pixel perfection for a given design. Being flexible allows marketing teams to iterate and improve on their campaigns while still maintaining the essence of the brand.
Jon Uland is Modular’s Senior Director of Operations. As a marketer and developer, Jon has spent his career creating sustainable marketing ecosystems for major brands and tech startups and was previously on the lifecycle and email teams at Peloton, Teachable, and Warner Music Group.
