- Details
You worked really hard on creating beautiful email templates, but they didn't render properly? That's not an isolated case, as HTML email developers around the globe face renderability issues due to the fact that there's absolutely no standardization for emails. All email clients go by their specific rules for rendering messages. So, it becomes compulsory for us to tweak the HTML code to meet their individual requirements. If you are just getting started with email marketing or looking to brush off the renderability basics, you are at the right spot. Today I will share my top nine tips to overcome rendering issues in emails. Follow this quick rendering troubleshooting guide to benefit from the low effort; high return hacks on the topic.
#1 Use Preheader Text To Aid Mobile Users
Smartphone users see a shorter version of your subject lines, and including preheader text helps them get an insight into the message. Given the fact that 85% of people use their smartphones to check emails, this tactic will help increase your open rates to a large extent. It helps the recipient in making the decision whether to open your message or not. Have a look at the below diagram to understand how preheader text supports the rendering of the outer shell of your message:
#2 Use Alt Text To Fight Back Image Blocking
Images have become part and parcel of modern email marketing, but there is a significant number of people who choose to read emails with images turned off. Also, many email clients choose not to display images unless the users ask them to do so. It can be a disheartening reality if you overly rely on images, and hence you should add alt text. It helps recipients make sense out of the empty spot, and you can also add contrasting background color to make it more homogeneous with the rest of the template.
#3 Go For Hardline Breaks
Email developers are advised to use hardline breaks <br> instead of "Float" and "Clear" tags due to lack of support by many rendering engines. This way, your message will render in a seamless manner without any sort of distortion. Unfortunately, CSS properties don't fare well for mailbox providers like Microsoft Outlook, and hence you will need to include such tips in your coding best practices.
#4 Don't Use JavaScript For Email Design
It is no secret that JavaScript is a powerful technology that improves your email template design significantly. But it falls under the category of approaches that lack technical support from all inbox providers. Scamsters and cybercriminals use it to hide malware, and hence it is blocked by most email clients. It will be in your best interest to skip JavaScript altogether and try other ways to instill interactivity.
#5 Include Table Tags In Your Template Design
Email designing works exactly opposite to web design, and hence it is recommended to use <table> tags instead of <div> tags. It will give your template an aesthetic appeal similar to that of old-school websites, but you can do away with it using your color palette, content blocks, and design language smartly. It helps improve the mobile responsiveness of your emails, and it also makes your email easy to consume.
#6 Use Inline CSS Over CSS Styling Sheets
CSS styling sheets are another element that didn't find a spot in the good books of email clients, and thus, as an email developer, you need to skip them. You can go with inline CSS as it is a more feasible alternative. Again, this is required to optimize your messages for Microsoft Outlook as its rendering engine adds spaces in your email when you use CSS styling sheets.
#7 Keep Your Emails Up To 600 Pixels Wide
Limiting your emails' width to 600 pixels is an unspoken rule in the email designing fraternity as it helps render your messages seamlessly across all device types. Most email clients support emails designed with this aspect across all OS-browser-screen size combinations, making it a perfect fit for your email design strategy. While it is perfectly suitable for single-column templates, it may require you to be smart if you are using two or more columns.
#8 Don't Use Images For CTA Buttons, Go For HTML Text Instead
It is a common mistake to use images interchangeably with the HTML text, and it is a perfect recipe for disaster. Remember, I just discussed the importance of ALT tags due to rendering troubles with images? That's exactly why you should not use images as CTA buttons and go with HTML text instead. You should add a background color and use organic hyperlinks since many users hover their cursor over the button before clicking on them. On the flip side, keep the text height around 13-14 pixels, and the button size should be somewhere between 47 to 50 pixels since we tap on them when using smartphones as opposed to clicking them with cursors.
#9 When Designing Use Pixels As Reference
One should not design their template using a percentage as responsiveness references as it will skew your messages in ways unimagined. Especially when you have a lot of content blocks, designing becomes too complicated, and there's no way one can ensure that all recipients will have a pleasant experience reading the email. Using pixels as a standard for reference can help improve rendering as it allows you to manage design aspects like padding in a much better way.
Wrap Up
Email rendering issues are a big challenge for any brand, but by all means, they are manageable. It will require you to analyze the features supported by all email clients and the ones supported by most of them. This mini-guide covers the most important tips that will help you in the process and render your emails flawlessly.
Author:Kevin George is Head of Marketing at Email Uplers, one of the fastest growing custom email design and coding companies, and specializes in crafting professional email templates, PSD to HTML email conversion and free HTML email templates. He loves gadgets, bikes, jazz and eats and breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on his blog.