15 Best Practices for Email Design & Coding
Email marketing is an amazing channel. But it can also be a complex operation. After dreaming up grand designs and engaging graphics for your campaign, you have to answer: How will this look as an email? Will it work for every mail provider? Look good on any device? Load properly?
This is where design and coding meet. We’re here with 15 best practices to help your design not only look fantastic but enhance the user experience. Let’s get started!
General Guidelines to Follow
Many of the best practices we’re about to cover can be summed up in three words: keep it simple. Remember, an email is not a landing page. You cannot design emails with the same level of complexity you design your website. With that in mind, let’s cover our basics with a few golden principles to hold on to when creating a marketing email:
Mind the width: Your email width maximum should be between 600-800 pixels. Try to create a single-column layout.
Establish templates: Define some brand design rules and styles for desktop, mobile, and other devices, to ensure clean responsiveness.
Be Dark-Mode Friendly: Accessibility is extremely important. Optimizing for dark mode is one way to make your emails more accessible. For in-depth assistance, check out our full guide on Designing Emails for Dark Mode.
Provide clear CTAs: Keep your UX clean and CTAs effective by including an appropriate amount of buttons and links in your design.
Mind your fonts: Use email-safe fonts. In many situations, live text is the best solution, and you’ll have to break from brand guidelines and be okay with Arial or Times New Roman.
Utilize breaks: When customizing your subject line and preheader, don’t forget to add a break between the lines so the message in your user’s inbox is clear.
The hover method: This is the simplest method to enrich your email and make it interactive. You can change a CTA color when the user is moving over the button or change the product view of an image.
Note: Make sure the content that hides the hover is not essential for the email, since this functionality does not exist in mobile.
GIFs 101
GIFs are a fun and engaging way to communicate with our recipients. But like any good tool, they are useless when not used correctly. Here’s what we recommend to ensure your GIFs load and can be viewed properly:
The right size: Export your GIFs at a size no larger than 1MB. Don’t lose subscribers simply because they didn’t want to wait for a GIF to load. To reach a smaller size, limit your color palettes by considering a monochrome theme, keep your GIF short, and reduce the number of frames as much as possible.
The right height: Keep your GIF size small, cutting out any unnecessary dead space in the frame. Introduce the height of your GIF so it doesn’t get stretched in some devices and use a height auto class for mobile.
Remember your alt text: As always with visual elements, do not neglect your alt text. This is essential for any recipients using screen readers. Keep your emails accessible.
Remember your Microsoft Outlook users: Outlook will only display the first frame of a GIF’s animation. With this in mind, design your GIFs such that the first frame is enough to convey your message even if the full GIF does not play.
Preventing Clipping
The last thing you want to happen after working hard on a marketing email is for it to be unreadable due to clipping. Clipping happens when an email’s code is too large. For example, Gmail will automatically clip messages 102 kB and larger. Here are our top tips to avoid clipping:
Keep it simple: Focus clearly on what this one email’s purpose and style is. Don’t get lost in the design; this is not the time to creatively explore every opportunity. Often all it takes is the right hero image, straightforward copy, and a clear CTA to make a big impact.
Keep it clean: In the same vein, clear the clutter. Look at your emails and ask what looks unnecessary and crowded. Getting rid of what you don’t need will serve both the efficiency of your message and the size of your email.
Use text when possible: Although images can be incredibly impactful, they can also make your email cluttered and full of extra code. Instead of leading with images everywhere, use text instead. Use text links for your CTAs instead of buttons. Lead with headlines instead of an image with text.
Remove any extra code: Minimize your code wherever possible. Use styles in your code so it can transition smoothly from desktop to mobile easily. Remove any double spaces, line breaks, comments, and so on.
Design & Code Effective Emails Today
Do you need guidance or specific assistance to design and code emails for your brand? We’re here to help. Reach out today to speak with one of our design and development consultants.
Let’s start crafting campaigns that not only stand out in the inbox but also drive the results you want to see.
