EN
Email campaigns play a major role in modern marketing. And Assemble is well aware of the impact it can have — when it’s done the right way. This is why we love collaborating with clients to design and deliver effective email campaigns to achieve their business goals.
Assemble’s email experts create beautifully captivating emails that incorporate engaging text, images, and links, all while ensuring consistency in your branding. By using templates and responsive design, we ensure that emails are optimized for every client or device, helping you increase the reach and impact of each campaign.
So we’ve compiled a guide with valuable advice and best practices to use during your email design phase that will make the workflow more efficient to get the best outcome possible. Each tip is designed to minimize development time, enhance the quality of your emails, and prevent common mistakes in the design process.
And don’t worry, we’ll continue updating this guide to reflect the latest and most relevant information according to the newest technical and creative trends in the market, so you’re always in the know. (Research is kind of our thing.)
First Things, First: The Most Important Things to Remember
- Background images with overlay elements like live text, CTAs, etc. are supported BUT not recommended. Making these work will require special coding that will increase the overall file size.
- Regular Web Fonts only work on a limited number of email clients, so they’re not the best choice. Try to use Web Safe Fonts that are supported by most email clients. More to come on this later.
- Even though media queries are supported by most modern email clients, it’s still not supported by traditional clients like Outlook on PC. Plus, their behavior varies from client to client.
- Using animated GIFs in emails can increase file size, so it’s best to use them sparingly — especially since some clients like Outlook might only display the first frame. You shouldn’t use them for important content or text, but if you have to, consider placing it in the first and last frames of the animation to ensure it won’t go unnoticed.
- Email clients can drop support for features without notice and that can cause major headaches for email designers, leaving them scurrying to fix broken emails resulting from unannounced changes. Because of this, email templates that once worked perfectly, could now look completely different (and distorted).
- Rendering is inconsistent across desktop, webmail, and mobile inboxes, so a feature that worked in Outlook’s mobile app might not work in Outlook.com. Plus, your email service provider (ESP) can make changes to your code that impact rendering as well (i.e., removing code that they consider malicious).
- Considering all email clients, operating systems, ESP’s, and other factors impacting how an email displays, we estimate that every email has more than 15,000 different potential renderings.
- Email testing helps you tackle the challenges of inconsistencies across environments. But depending on when emails are tested, they can break differently. Ideally, you should provide enough time to regularly preview the email code across the most popular email clients and devices.
- In design, make sure you’re organized, and always create a folder with the assets like font files, vector logos, or any other important file needed.
Other Helpful Tips
1. Design for Simplicity
Make your life a lot easier by keeping your email design simple. Use grid-based layers, avoid complicated elements that require HTML floats or positioning, and limit the use of multiple columns as much as possible. Single column designs are sufficient for most emails and will help the design look good on mobile devices. It’s also easier for your readers to scan a single column of material.
Also keep in mind, some email clients don’t support opacity. Always have this setting at 100%, avoid transparency to create lighter tones on colors, and use solid hexadecimal colors.
2. Know Your Max Email Width
We recommend keeping your email’s maximum width close to 600-640 px as it will fit nicely on most web and desktop clients, while giving you plenty of space for content. It can also be scaled down to fit better on mobile screens using media queries and fluid design. For a mobile version of your email, we recommend a width of 320 px.
3. Think about Mobile
Many email designers are now embracing the “mobile first” design; meaning that the email is designed to prioritize mobile clients, while also making sure it looks good on desktop. The intention of putting mobile users first is to increase engagement and click-throughs on mobile devices. So if this is one of your primary goals on your marketing campaign, then consider having a mobile design done first.
Pro Top: When we create an email, we can use HTML and CSS only. By default, ALL clients will block JavaScript because it has some security vulnerabilities (aka it can be used to hack a computer).
4. Consider Image Resolution
Most emails are 600-640 px wide, but to keep your image crisp on high-resolution displays, you need to make your image 2x the size (i.e., 1200 px) and use the image attributes and CSS to keep the image at the width you want.
If you are working on an artboard with 2x the final size and using a design tool to create an email, such as Adobe Photoshop, keep the resolution at 144 dpi. This way the font type size and line height will not be affected when converted to the final size. If you keep the document at the default resolution of 72 dpi, then any change in document dimensions will make those elements look smaller.
And don’t use external linked images on your file — always use embedded images. Or even better, “SmartObjects” on their original resolution and size. This will help maintain the image quality when exporting the asset at 2x and allow the developer to make quick fixes if needed.
5. Don’t Rely on Images to Communicate Your Message
Images are a great way to enrich the design of your email but try to use HTML text to tell the actual message. Otherwise, your subscribers may miss out completely if images aren’t downloaded.
Some clients will block images by default, while some users will change their settings to block images to use less data. If possible, avoid round corners, gradient backgrounds, drop-shadows, or any unnecessary use of images.
And avoid image-only emails at all costs!!
Why? Well, if a subscriber has turned on image blocking, your whole message may be lost. If you must use text in an image, your developer needs to use alt text to ensure your message is conveyed even if the image doesn’t load.
Image-based emails are also very hard on your recipients’ data plans and can be very difficult for the visually impaired. Use HTML text where possible. And if your email is heavy on images, consider adding a link to open it outside of the email client in case the subscriber uses an image blocker.
6. Avoid Using Stock Images
Stock imagery can often remove your audience from the messaging and create a disconnect. Keep your images on brand and as authentic as possible. Allocate some time and budget to create custom imagery for your email campaign.
7. Plan for Dark Mode
Dark mode inverts the colors displayed on a device to decrease the amount of light emitted by the screen. Most commonly, a white background with black text is inverted to a black background with white text. The main goal is to reduce the effort your eyes have to exert to read the content, especially at night or in dark environments.
This mode has been steadily adopted over the past few years, and although it is not fully supported by most email clients (currently, less than 10%), it can’t be ignored or avoided. Not only do many users appreciate this feature, but many email clients activate it by default.
But keep in mind that this mode is not standardized across the clients that support it z— meaning each one uses different color settings, which result in the email appearing differently from one client to another and is impossible to handle from the development standpoint.
To leverage dark mode to the fullest, it must be taken into consideration during the email design stage as it helps prevent certain elements of the emails from becoming unreadable or difficult to see.
For example, if you have a white logo placed over a dark background, include a dark glow or stroke around the logo. This ensures that the logo is still readable even when the background changes to a lighter color.
8. Don’t Forget File Size
It’s easy to overlook file sizes when creating an email, but to ensure your images are optimized, you really can’t. More than 50% of emails are opened on mobile devices, and these users have data plans with limited internet speed or extra charges for excess downloads.
The bigger the email, the longer it’ll take for mobile subscribers to view, which creates a bad user experience. Check out the maximum average email size limit per provider below:
Non-mobile optimized emails:
Note: Mobile optimized emails tend to be heavier than non-mobile optimized email. This is because you need to add more code to build a mobile-first email.
- Average HTML Weight: 45 KB
- Average Image Weight: 2.2 MB
Mobile optimized emails:
- Average HTML Weight: 53 KB
- Average Image Weight: 2.7 MB
While their exact values are restricted due to security reasons, all email service providers have a maximum email size. Oversized emails will break, or bounce off the user.
Some items that can increase file size are:
- Images (the more product images the heavier the email)
- Animated GIFs
- Coding style
- Custom Fonts
The best way to decrease your email file size is to compress your images, or you can consider using fewer images. And when using animated GIFs, remove any unnecessary frames.
Here are some good tools to do that:
- ImageOptim
- JPEGmini
- TinyPNG
- Compressor.io
- Kraken
Keep in mind that emails are ‘clipped’ due to size. For example, Gmail clips at 102kb.
9. Keep Buttons Recognizable
Buttons allow us to direct the user to do a specific action — like visiting a web site, opening an important document, or applying for a promotion, etc. So to avoid any issues with your buttons across email clients, try to keep buttons as simple as possible. Avoid using background images, using border radius, or adding custom graphics like icons. Instead, try to find a HTML/CSS alternative, so you can keep your buttons as consistent as possible.
In design, try to use short and simple sentences so the user can easily recognize the element as a button and know that it will execute an action once clicked. Keep in mind the color contrast of the text and the button background, as well as the font weight and the text padding to avoid touching the border of the button.
10. Consider the “Inverted Pyramid”
The Inverted Pyramid is a helpful framework for structuring the elements of your email campaigns (e.g., headers, imagery, buttons, etc.) to ensure they work together seamlessly to grab people’s attention, convey your main message, and get a click-through.
11. Know the Facts about Fonts
When using custom fonts or adding Google Fonts, there’s a good chance you’ll find that most clients don’t support them. For this reason (like previously mentioned), we always recommend using web safe fonts which are supported universally. Some of these fonts are:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
- Σψμβολ2 (Symbol)
- Webdings
MailChimp also has an excellent list of web safe fonts.
The recommended minimum size for text in emails is 10 px. Any smaller than that will make the text hard to read. And avoid using decimals on the font-size or line-height for text — stick to integer numbers. Lastly, don’t change the character tracking, kerning, and leading from the default value. These are hard to match during the development phase.
12. Give your Footer More Focus
Even though the footer is last to be seen on the email, it’s actually one of the most important parts. An ideal email footer should not only include your organization’s contact details, but also links to main segments of your website, key services or products, social sharing, and/or “forward to a friend” buttons.
Another important footer addition that most marketers miss is a “Why are you receiving this email?” line that will diminish chances of your emails getting sent to spam.
13. Always Add an Unsubscribe Link!
An unsubscribe link is a must — and don’t try to hide it. A commercial email is required to always show an unsubscribe link by law. But you don’t want your email going to people who aren’t interested in it anyway.
This unsubscribe link usually appears in or below the footer, but if you’re going for extra credit, set up a preference center on your email marketing platform. This allows subscribers to select the type and frequency of emails they receive. This can help reduce the number of unsubscribes you have with each send.
How the Email Experts at Assemble Can Help
Assemble’s creative team can easily transform your ideas into stunning visuals. Our designs capture eyeballs, strengthen brand identity, and convey messages effectively — for both digital and print applications.
If you’re seeking a successful email marketing campaign, Assemble can support you throughout the entire email design process. This means that we can not only develop, implement, and put your email into production, while collaborating with you to craft the visual elements. [Contact us](https://www.assemblestudio.com/get-in-touch) today to learn more.