If you are not sending marketing emails to your clients yet, do your brand a favor and start doing it right now. Seriously!
Email marketing has been around for a reason. People engage with emails. Emails are an effective form of communication to reach your leads and customers. Your subscribers have explicitly told you they want to hear from you. On average, email drives an ROI (Return on Investment) of $36 for every dollar spent, higher than any other channel.
Are you convinced yet? Good.
Email strategy and design are essential to a strong campaign, but email development is at the core of any email campaign. Developing emails to display reliably and perform well across different devices and clients can be frustrating for the inexperienced. A fix for one client might break your email in others. But don’t worry. Today we will give you some tips on what to look for when creating your email so that your subscribers can see them as you intended.
Why broken emails are a problem
Emails are only effective if seen as you intended them to be. Because each client uses a different rendering engine, not all clients offer support for current code features.
Broken alignment, bad links, simple typos, and images that don't display, can render your email worthless as a marketing tool because these errors make your brand seem unprofessional in the user's eye.
Caniemail.com is an awesome tool for developers. It shows what features from HTML and CSS each email client supports, and it gives a score for each client depending on what number of features it supports.
Currently, Apple has the highest score for the most support of features for Apple Mail, while Microsoft's Outlook has the least support on windows machines.
Something as simple as positioning your content can be difficult. According to Can I Email, CSS properties like left, right, top, bottom work fine inside Apple Mail for both desktop and iOS, but don't work at all for Gmail apps and webmail.
Don't feel bad if you are having trouble with your email. Broken emails are a common mistake that even the most prominent brands are guilty of doing at one point or another.
Recently I had the opportunity to work with Facebook, now Meta, on a project. Most of my time was spent fixing email templates and how they appeared in different client inboxes.
There is so much that goes into developing the code for your emails. If you hire someone inexperienced to code them, someone is likely not seeing your layouts as you intended them to appear.
Tips to prevent your emails from breaking
Here are some tips to prevent your email from breaking:
- Keep your design simple
- Implement responsive design
- Keep your design at 600px max
- Use a one-column design
- Avoid relying on images
- Know your audience
- Test, Test, Test
Keep your design simple
While simple is a matter of opinion and might not work for every case, remember that in most cases - simpler is better. Avoid overlapping images and text, or consider creating one visual with overlapping elements. Simplifying will make it easier for your layout to scale to different screen sizes without breaking the structure of the elements.
Implement responsive design
Responsive design will change the format of your emails and ensure your email fits on the screen, whether users view your email on laptops or smartphones, creating a better user experience.
If you create the code for your emails, there are plenty of coding instructions out there to make responsive emails. Otherwise, some automated tools and email marketing services have responsive templates available.
Keep your design at 600px max
We have come a long way with screen sizes. It seems intuitive to use all that space to optimize our content. However, more people read their emails on their phones than on their laptops. According to 99firms, 85% of users use smartphones to access email. Some smartphone designs are even smaller, giving around 400px of display space.
And yes, your emails might look better on desktops, especially when using multiple columns. But trust me, as soon as you start your tests, you will see that numerous columns are a terrible idea.
This brings me to my next topic.
Use a one-column design
One-column layouts are simple, easy to scan, and quickly adapt to various screen types.
Not only does it feel less cluttered when you are viewing it on smartphones, but it is way easier to make just one column responsive. One of the best ways to make sure your email doesn't break on some clients like Outlook is to use tables in your code, and it will be hard to make your table columns responsive and work for different clients simultaneously.
Avoid relying on images
Slicing is a common technique that works around client support inconsistencies by having most email layouts as images. Unfortunately, this technique is used by many designers and developers, and even the most prominent brands send out HTML emails that are nothing more than a collection of images.
Now here is why this is a bad idea.
Some popular clients like Gmail and Outlook block images by default if they don't come from a known sender, so your beautiful email might show up as a bunch of empty squares.
Unless you know that all your subscribers use Apple Mail, you must assume a good amount of people are not going to see your images. To help with that, you want to ask your subscribers to add your email to their trusted contacts list.
Know your audience
There are various ways to track and have data on where your subscribers are reading your emails. If you are using an email marketing service, they are already tracking it for you. However, if you are starting, you can have overall statistics for email usage. However, there is no guarantee that these overall statistics will reflect your audience. It is essential to know where your clients are reading your emails to test and make sure that they have the experience you intended them to have.
Test, Test, Test
And to be sure, test one last time.
Testing can be time-consuming, so you may want to skip this part, but trust me, there is an awful feeling you get from spotting a typo just after you click the send button.
While it is easy to update a website, emails are beyond your reach once they hit the subscriber's inbox.
You know your audience by now if you're paying attention to the data. Make sure to test all the apps, mobile, desktop, and different browsers that your analytics tell you your subscribers are using. Keep in mind that people use Dark and Light Modes on both smartphones and desktops, so be sure you test for those too.
If you learn just one thing from my post, I want it to be this: Always test your emails before sending them.
Only by viewing your email inside the different clients will you see what is breaking. Once you identify the problem, it is easy to inspect the code and determine what changes are needed.
An excellent developer tool is CanIEmail.com. You can check which clients offer support for the code you want to use.
Testing can be quite a long process. But when you have a working template, you can reuse it repeatedly for your future campaigns and automated emails.
In conclusion
As you can see, creating emails is not a quick process and developing a client-proof layout is a work of art. But this whole process can be very straightforward when you use all the best practices.
Luckily, you don't have to go through all the headache that comes with email development alone.
At Underbelly, we have some of the most experienced developers available to do all the hard work for your brand.
Whether it's the strategy, designing, developing, monitoring results, or even gathering data for your next campaign - we'd love to help. And instead of broken emails, you will break records for your sales.
Visit our contact page and send us a line, or call our sales team and let Underbelly help you with new strategies to increase conversions and grow your sales.