Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
“Have you checked it in Outlook?”
For email developers, this is like asking “Have you turned it on/off again?” No matter how many times you check images, alt text, responsiveness, and fallbacks… something is wrong with one email client or another.
Unlike web development, HTML email development is subject to the whims of email clients. Inconsistent support (or random bugs from software updates – trust me, I've seen it happen) can cause templates and one-off campaigns to fail.
That's why it's so important to have a defined email code review process. With so many moving parts to any given email campaign, you want to have the confidence that you're, metaphorically speaking, dotting all the i's and crossing all the t's.
We have put together this comprehensive checklist that we use for every single campaign that Sinch Email on Acid sends. Read on or download a free digital or printable version for your desk.
What to check during the email code verification process
Short answer: everything.
It doesn't matter how many times you've used the template before or how many emails you've sent, test everything every time, especially when it comes to code development. Regardless of the message, design or style, it's up to you to make sure your emails are readable no matter where your audience opens them.
These checks are also useful if you are conducting an email marketing audit that includes a review of the email code.
Get your email code verification checklist
Would you like to refer to this list? We can help you. Get an interactive PDF of our email code verification checklist to make sure you have all the bases covered before launching the next campaign.
Here are some things you should always check when verifying your email code:
1. The basic examinations
First, do a quick rundown of the basics. Obviously, start at the top with the header code to make sure you have the right DOCTYPE, language settings, and meta tags for responsiveness, dark mode, and the right character set. This code rarely changes from email to email, but you never know if some weird copy/paste is going to happen.
Email header code snippet
For a detailed explanation of the email header, see GoodEmailCode.com.
Since the header code controls the rest of the email, it is important to first make sure everything there is correct. This includes:
- Make sure the email has the correct width (max. 700 pixels)
- The code does not refer to an external CSS stylesheet
- There are no unsupported elements such as Javascript or Iframes
- The styles follow email code standards, e.g. 6-digit instead of 3-digit hex codes are used for colors.
- The images are optimized for high-resolution displays
This is also where you can make sure you have properly coded your tables and ghost tables in Outlook. And don't forget to check for other common Outlook display issues like unwanted white lines, background images, and alignment issues when using columns.
This is where the classic 80/20 rule comes into play: you'll probably spend 80% of your time looking at only 20% of your clients, and Outlook is the most problematic client you'll encounter… but you have to work with it because it's still the third most popular email client on the market.
2. Is the email code optimized for mobile devices?
On average, Americans check their phones 344 times a day. With over 6 billion mobile users in the world, the second most important check you can make is to make sure your email displays correctly not only on desktop clients, but also on mobile devices.
Whether you use a mobile-friendly, responsive, or flexible hybrid email design, you should check the following:
- Button height of at least 44px
- Correct font size for good readability
- Columns and stacks work perfectly
Code snippet for a min-max width query:
@media screen only and (min. width: 400px) and (max. width: 600px) {…}
3. How clean is your email code?
When you build on older emails or reuse templates, email code can quickly become confusing. That's because you often need to create workarounds or hacks for specific email clients or features.
However, it's important to optimize your email code as much as possible. Unnecessary code will weigh down your emails and increase their size, making them slower to load. Clients like Gmail truncate emails at 102 KB, so keep that in mind.
You should also clean up whitespace, padding, and your tables to make sure everything is working properly. There are a few tools you can use to consolidate your code to reduce file size. I use Email Comb or Parcel to remove unused CSS.
Get advice from Avi Goldman, founder of Parcel, on preventing Gmail clipping.
4. Have you set up fallbacks?
Today, emails are more personal and customized than ever before, which creates headaches for email developers. Fallbacks act as placeholders when data is not available or supported. For example, there are font fallbacks (also called font stacks) when you use a custom font that an email client does not support.
Example code snippet for a font stack
A sans serif inline style font stack might look like this:
Style = “Font family: Helvetica, Arial, sans serif;”
You should double-check that you have fallbacks in place so that your audience can still interact with your email even if something isn't supported:
- Animations or other dynamic content: Although most clients these days support GIFs, it's still important to make sure any animations you're working with have a still image you can display instead.
- Personalization fallbacks: Nobody wants to receive “Hey, $%FirstName%$”! Make sure you have a copy handy in case there is no first name or other type of personalization in the file.
- Plain text version or a “View in browser” link: I'm still surprised how few brands send a plain text version alongside their HTML version. I always include a “view in browser” link to ensure emails are accessible and it's a last resort in case something goes wrong with the HTML.
For help with interactivity and dynamic content, check out some of the interactive email fallback strategies we recommend here on our blog.
5. Have you checked the email code for accessibility?
If your audience can't read or interact with your emails, why bother? That's the essence of email accessibility: making sure every member of your audience can actually receive the content of your message. That means checking:
- Alternative text for all images
- Table roles set correctly (role=”presentation”) so that screen readers can process your code correctly when reading it
- By using semantic code, especially
Tags for headings and Tags for paragraphs so that screen readers can distinguish them
- That dark mode works correctly in all email clients and the styles are not washed out (we'll talk more about that in a moment).
