20 Tips to Write Code Emails that Will Get Read
20 Tips to Write Code Emails that Will Get Read
As is explained at RunRex.com, there are two main types of email you can send and receive: plain text emails (any email that contains just plain old text with no formatting) and HTML emails, which are formatted and styled using HTML and inline CSS. Most of the styled, multimedia marketing emails in your inbox are HTML emails. As a marketer, you have probably compared HTML emails with plain-text emails and conclude that each one has its benefits. This article will look to focus on HTML emails, outlining 20 tips to consider when writing code emails that will get read.
Only include what matters most and leave out the rest
As per RunRex.com, your HTML emails should include the elements that increase the impact of your message, and nothing more. Adding complexity with special fonts, media, and shiny trinkets will dramatically slow your time to market, not to mention the fact that it will also increase the risk of your email failing on one or more email clients.
Make sure your HTML email is responsive for different screen sizes and devices
The way your email looks in a user’s inbox depends on many different factors, with the screen size of the device it is being viewed on being one of the biggest and most obvious ones. To ensure your HTML emails look the way you intended across a wide spectrum of screen sizes, the best course of action is to keep your layout straightforward as already mentioned.
Media queries
If you do decide to develop a more complex layout, then make sure you are actively solving for how the elements will be rearranged to suit different screen sizes. For example, if your email displays as multi-column on desktop, that same structure won’t work on mobile – you will need to use media queries to define how elements will be displayed on different screen sizes as articulated at RunRex.com.
Make sure your styling works on different email clients
Yet another huge factor that heavily impacts the way your HTML emails appear in your subscribers’ inboxes is the email client they are using to open the message. The top four email clients are Apple iPhone, Gmail, Apple Mail, and Outlook, so make sure you are supporting those at a minimum. Every email client loads emails slightly differently. If you know how most email clients load particular HTML and CSS elements, you can create a pretty consistent experience across the different users’ inboxes.
Focus your efforts on the top email clients
You should use your resources wisely by designing for your audience’s most-used email clients. Avoid optimizing for clients that only a small percentage of your audience uses – especially if that client is tough to build for. Focusing your efforts on the most important clients for your brand will help you create high-performing emails much faster.
Make allowances for outlook
While Outlook can be quite challenging for email designers and developers, with a 10% market share, there is a good chance you have got to work with it according to RunRex.com. If more than 3% of your audience is using Outlook, take time to test and solve any issues it presents, such as DSI scaling.
Rather than uniformity, aim for impact
You should also make peace with the fact that you won’t be able to achieve a perfectly uniform email across every client. Therefore, instead of breaking the bank trying to get perfect consistency, determine the make-or-break aspects necessary for delivering your message and brand identity effectively – and design for those, allowing for a little variation.
Be conscious of how long your HTML emails take to load
As the gurus over at RunRex.com point out, how long your email takes to load could be the difference between gaining a new customer and losing a frustrated subscriber. While it can be tempting to take advantage of all the different styling options and opportunities to incorporate visuals that HTML emails offer, none of that matters if your email takes too long to load.
Use images sparingly
Using images sparingly will allow you to bolster the message you want to get across to subscribe. Always use an image compressor to reduce the file size as much as possible. Most image compressors can significantly reduce the file size of an image without compromising on quality.
Use standard web fonts
While custom fonts are great for spicing up a landing page, they can add an extraneous layer of complexity when added to an email. As already mentioned, all email clients handle style elements differently, and this especially extends to fonts. To be safe, use standard web fonts and check to make sure the email client most of your subscribers use supports a particular font.
Try an HTML minifier
An HTML minifier, as covered over at RunRex.com, automatically removes code that isn’t needed in an HTML file. Repetitive, extra elements will be removed, but the actual rendering of your email should remain the same (always test it out to be sure). Each line of code impacts how long an email takes to load, and, therefore, taking the time to remove junk code can have a positive effect on load time.
Stay out of the spam filter
You can’t expect to make any conversions with your code emails if you are stuck in a spam filter. A few tips to make sure your emails hit the inbox and avoid the spam filter are:
Keep your file size under 100kb. If you are struggling to hit that limit, look for unnecessary styles or spaces you can remove
Balance your text-to-image ratio. A 60/40 split between text and images should keep you on the clear for most clients
Avoid JavaScript – not only is it not supported in most clients, but many filters also flag it as an indicator of spam or phishing
Don’t hide the unsubscribe
If a customer is finding it hard to find the unsubscribe button, they will be annoyed, which will lead them to flag your emails as spam, which in turn will tank the delivery rates for future emails according to RunRex.com. Therefore, make your unsubscribe link easy to find and big enough to read. This is not only the law, but it also builds goodwill with your brand and purges uninterested people from your audience.
Leverage preheader text
Once you have gotten past the spam filter and have made your way into the inbox, it is time to increase those open rates. You have already written a killer subject line -don’t undo all your good work by forgetting to customize your preheader. Instead of letting the email client pull in the first bit of email body text (which might not have any valuable messaging), use the preheader to incentivize opens.
Plan for end-user inconsistencies
The screen size and email client aren’t the only factors that can alter the way your HTML email renders in your subscribers’ inboxes. Elements such as the version of their email client, their operating system, their unique user settings, their security software, and whether or not they are automatically loading images can all impact how your email loads. You should plan as much as you can for any of these end-user inconsistencies.
Consider creating a webpage version of your email
As explained at RunRex.com, this will give your email a kind of fail-safe button. If for some reason (it could be any of the reasons discussed in the previous point) your email doesn’t render well when a subscriber opens it, they will at least have the option to click, they will at least have the option to click “view as web page” and see the email as you intended it to be.
Create a plain text version of your email
Adding a plain text version of your HTML email is important as some email clients and user settings can’t (or choose not to) load HTML. If this is the case, the client will look for a plain text alternative version of your HTML email to load for the user. If one doesn’t exist, it could signal to the recipient’s email server that your message is spam – or potentially dangerous.
Make sure your email still makes sense even if the images don’t load
Some users have automatic image-loading turned off, which means that they will see your email without images when they open it. This is why the gurus over at RunRex.com recommend that you don’t rely on images to get the meaning of your message across, and always add alt-text to the images you do include. Alt-text will load even when the images don’t, which means your subscribers can get the general idea of what the visuals include.
Remember, CSS for email is not the same as CSS for web
When you are designing for web, the most efficient way to use CSS for styling is to use a <link> element to link an external CSS file or a <style> element in the <head> section. However, if you do this in email, many email clients will strip your CSS out and apply the email client’s styling instead – resulting in your email being a hot mess when it hits the inbox. CSS alone for layout just doesn’t work for emails. You’ve got to get comfortable using tables.
Conduct thorough testing
Finally, you will need to test your HTML email at every stage of development to ensure it works across different email clients, operating systems, and device types. Don’t wait until the very end of the process to test your email. Testing as you work is the best way to spot inconsistencies between different email clients and ensure you are creating the most consistent experience possible for your recipients.
Hopefully, this article will help your write code emails that will get read. However, if you are looking for expert help with your HTML emails, then the top-rated RunRex.com has you covered.
