When determining which email is best for coding, it helps to realize there are a lot of email clients out there, and it can be tough to make sure your emails look great in all of them. In this blog post, I will give you 10 tips and considerations for coding your emails so they look great no matter which client your recipient is using!
Code Email for the Most Used Applications
When determining which email is best for coding, it really boils down to which email applications have the widest usage! Litmus provided a study where they posted their findings. As you can see below, there are several email clients that we need to consider (in addition to the lesser known or used applications).
While I’m no uber expert on the numbers, my personal experience does not quite match the above – However, it’s a good place to start! Statistics are subject to numerous factors, and change depending upon circumstances. Before determining which email is best for coding, it might help to conduct a survey among your email subscribers, to get a better understanding of the applications your audience uses.
Code for Common Display Issues
Coding for email messages can be difficult because there are different email clients with different display rules, this is what complicates things when figuring which email is best for coding. It can be helpful to create and use email templates – Creating those templates after working out bugs.
Part of the coding issue has to do with “rendering”. A rendering engine is a software program that determines how an email will be displayed. Different rendering engines will display HTML and CSS code differently, which is why it’s important to test your emails in multiple browsers and email clients (so you’ll have a better picture of which email is best for coding).
In addition to different applications rendering in different ways, they commonly apply their own styling to email as well – Which can make the issue more challenging.
To kick-start your path for which email is best for coding, consider the following “standards” (recommendations), that are most useful:
- Avoid CSS shorthand.
- Use tables instead of Div’s.
- Use the CSS “color” style instead of images for backgrounds.
- Stick with HTML4 (avoid HTML5).
- Similarly, use CSS2 instead of CSS3.
- Use inline CSS styles and blocks.
- For style spacing, leverage the “padding”, avoid “margin”.
- Avoid custom fonts, opt for standard system fonts.
Consistent Font Display
One way to ensure consistent font display across devices is by using web-safe fonts. These are fonts that are installed on most devices, which will help to ensure your email looks the same, no matter which device is being used. Additionally, you can use the “font-family” CSS style to specify which web-safe font you would like to use.
You can find more about system font stacks in the post: Email Marketing Coding: 2 Critical Email Considerations for a Good User Experience.
Use Optimized Images
Images can help to break up your email content and make it more visually appealing, but they can also be a major cause of slow loading times. Be sure to optimize your images before adding them into your email content! You can use an online tool like TinyPNG to help with this (so that the file sizes are smaller). Again, try to avoid using images as backgrounds, since they can cause issues with some email clients.
But… Here’s the rub: Some email clients will display your email images, and some will not. Often this is a result of improved privacy. This is why, when determining which email is best for coding, you need to ensure the use of image alt tags; that email applications can display instead.
The alt tags will display, and if you code descriptive text in your alt tags, it will provide meaningful information to your readers (and let them know the value of allowing your images to be displayed).
Use Image Coding that’s Responsive
When coding your images, be sure to use responsive image code. This will help your images to look great on all devices, no matter the size of the screen!
Responsive images are images that resize according to the device on which they’re displayed. This helps to ensure that the image looks great on all devices, no matter the size of the screen. To create responsive images, you can use the “srcset” and “sizes” attributes in your image code.
Code for Mobile Usage
In addition to coding your images to be responsive, you also need to code your email content to be responsive. This means that your email will resize and rearrange itself according to the size of the screen on which it’s being viewed.
To code a responsive email, you can use media queries. Media queries are a CSS technique that allows you to create different styles for different screen sizes. This is helpful because it means that you can have your email look one way on a desktop and another on a mobile device, this is a key issue is resolving which email is best for coding.
Leveraging Flexible Layouts
Another way to create a responsive email is to use a flexible layout. A flexible layout is one that uses percentage-based widths instead of fixed widths. This means that your email will resize according to the size of the screen on which it’s being viewed.
To create a flexible layout, you can use the “max-width” CSS property. This property allows you to set the maximum width of your email content. Then, your email will resize according to the size of the screen, but will never exceed the max-width that you’ve set. It’s a much better way to address the issue of which email is best for coding as flexible layouts (gracefully) cover a lot of issues.
Two Common Coding Implementations
There are two common coding implementations that you can use to code your email. when determining which email is best for coding:
- Inline CSS and,
- Embedded CSS.
Inline CSS is when you code the styles directly into the HTML of your email. This is the simplest way to code your email, but it can be difficult to maintain if you have a lot of styling.
Embedded CSS is when you code the styles into a separate CSS file and then link to that file from your HTML email. This is a more complex way to code your email, but it’s easier to maintain because all of your styling is in one place.
Plain Text Alternative
In addition to coding your email for different devices and screen sizes, you also need to code a plain text alternative. This is because not all email clients will be able to display your email correctly.
A plain text alternative is simply a version of your email that only contains text, no HTML or CSS. This ensures that everyone can read your email, even if their email client doesn’t support HTML or CSS.
To code a plain text alternative, you can use the “text/plain” content-type. This will tell email clients to display your email as plain text.
Using Preheader Text
Another way to use coding to improve the deliverability of your email is to use preheader text. Preheader text is the text that appears in the preview pane of an email client. This text can be used to give your recipients a preview of what’s in your email.
To use preheader text, you can code it into the “head” of your HTML email. This will ensure that all email clients display the preheader text.
Conclusion
Coding your email is an important part of email marketing. By coding your email, you can ensure that your email looks great on all devices and is easy to read. In addition, you can also code a plain text alternative and use preheader text to improve the deliverability of your email.
You can learn much more about which email is best for coding, by visiting our Small Business Email Marketing posts. As well as find out more about email coding.