Fixing Common Email Template Problems
If you’re an email developer, you’ll know that your job is never over. Clients wanting to make changes, unhappy clients, problems rendering designs in browsers, email clients or across different devices – all contribute to one big headache.
Professional email templates are only good to go once they have been checked across every single email client. So that’s Outlook, Gmail, Apple Mail, Lotus Notes, iOS Mail, and Windows Live Mail, to name but a few. Of course, savvy designers out there will know to only check those client’s that are most popular with your existing contacts. But there may be some that slip through the net.
The reason behind this is because every combination of device, browser and email clients produces a slightly different result. For example, Outlook supports stylising the email in the tags, Gmail does not. Gmail supports vertical alignment of content, Outlook does not. If you’re using heavy background images Outlook supports these in versions 2000 and 2003 but not in 2007, 2010 or 2013.
The main issue with coding problems is that one tiny fault has the potential to ruin the entire email template. To help identify the problem, we have outlined some common issues and solutions as well as some top tips.
Common problems
The most common complaint is that things just don’t work in the same way as they do in a browser. Video, Flash, Javascript and even simple surveys have limited support in email.
There are a number of reasons why images may not display as required:
1. Text is on top of an image
Background images aren’t supported in Outlook versions 2007 and later. Avoid using background images, instead use a back ground colour as a backup when the images wont display.
2. Link and hosting issues
Images should be hosted on a publically accessible server and referenced in your HTML, to ensure they are displayed correctly.
3. Blue borders surrounding images
Sometime this happens around images that include a link. This can be changed by entering code which removed the blue border.
4. Incorrect file formats
Some email clients are picky about which type of file they will support. If you’re experiencing issues with a PNG, BMP or TIF file, consider replacing it with a GIF or JPG instead.
5. Images are blocked
The majority of email clients block images automatically. Unfortunately there’s not a great deal you can do about this. Consider asking contacts to add you to their Safe Sender list to ensure images are displayed every time.
6. Gaps appearing under images
This tends to happen when the layout consists of several images sliced apart and placed together in a table based design. Add a small amount of inline CSS to each of the images that are causing trouble.
7. Font aren’t displaying correctly
If font is not displaying in the correct way, it could be for two reasons:
- The font you’re using isn’t installed on the computer you’re using to view the email. Stick with web-safe fonts to ensure they render.
- If fonts were specified in the <head> of your email, Gmail will remove them. Move your font styling to be inline.
Still having trouble? Here are our Top Troubleshooting Tips:
- Override any default settings. Some email programs will have a default setting for how they assume elements should be displayed. Include values for everything, even if it’s 0. Stating colours and sizes can also prevent any issues.
- Troublesome tables. If rows are not appearing in a table, add a border to understand the table structure.
- Double check your calculations. If you find your layout is out by just a few pixels, add up all the table cells, and make sure they equal the width of the parent table. Some email clients include padding and margins in their ‘width math’, but others disregard it.
- Isolate the problem. Find the source of the problem by removing the HTML. Reintroduce it bit by bit, and you should see where the problem occurs. Alternatively test the HTML alone to see if other elements are affecting it too.
- Text isn’t aligning properly. If the text isn’t aligning in the way you’d like it to, make sure you’ve included properties such as valign and align in <td> cells and <p> tags.
If you’re STILL having problems, consider borrowing someone else’s eyes. It’s hard to spot your own mistakes, and someone else may be able to spot it.
Amy is our Campaign Manager and works with our clients to ensure all campaigns follow an effective campaign strategy and produce results.
Comments