Coding for the web has evolved massively in the last 3 decades, while coding for email has moved at a snail’s pace by comparison. In some ways coding an HTML email design has remained stuck in the 90’s.
If you want to be sure that your HTML email design looks as good when it lands in the recipient’s inbox as it did when you sent it, you’re going to need to understand a bit about how the various email clients render your carefully crafted content.
Alternatively, you could trust the experts to take care of it for you.
What is HTML email?
So, let’s start at the beginning. What exactly is an HTML email?
There are plain text emails, and HTML emails. HTML allows for design elements. This means you can add branding, colours, text formatting, and images to an HTML email. Whereas you can’t do any of that with plain text.
HTML email design allows you to create the brand awareness that you want from a marketing campaign.
What Are The Challenges?
When we say email coding is stuck in the 90’s, we’re not joking. And we should know, we were coding websites back in the 90’s.
In order to give a (relatively) consistent experience across the myriad of email clients, email today still follows the old convention of coding in tables with inline CSS.
Some of the most popular email clients (Outlook and Gmail) throw up serious roadblocks, which can place big restrictions on what can be done with HTML email design. This can be incredibly frustrating for graphic designers.
Some of the most common challenges include:
1. Mobile Responsiveness
More than half of all emails are opened on a mobile device, which means that emails need to look good on a smaller screen. Responsive coding is completely non-negotiable in this day and age. That’s why Tagpair designs for mobile first.
2. Fonts
There are only a limited number of web safe fonts that work in email. If you are using a custom font, you may find that it defaults when it lands in certain inboxes. That means you lose control of the overall look and impression your message is giving.
3. Background Images
As nice as they look, background images don’t render in every email client, and may look different on a mobile. They should be used sparingly to enhance the design, using progressive enhancement. This means you can give each user the best possible experience their email client will allow.
4. Image Sizes
Larger image files will take longer to load, which can mean you lose the attention of your reader. However, if the image isn’t high enough quality, it will appear pixelated or blurry, which gives the wrong impression of your brand.
A good design will be optimised for all devices, and images will look sharp on retina displays.
5. Interactive Elements
Interactive elements in email can present challenges, but it’s not impossible to include them. When they are used correctly and with purpose, they can improve engagement.
Adding motion to your email with a GIF is a great way to grab your subscribers’ attention. As with almost everything email, some applications don\'t like them and will only show the first frame so it is important to use them to enhance the design.
AMP (Accelerated Mobile Pages) emails provide app-like interactivity directly in the email inbox. Email clients that don\'t support AMP will fallback to the HTML version.
6. Testing HTML Email Design
Every single email client is different. That means that while one may render your email perfectly, it might look awful in another. The only way to know is to test across all clients.
How Can Tagpair Help?
Ultimately, if you’re sending an HTML email, you want it to do a number of things:
- It needs to look attractive, and draw attention for all the right reasons.
- It needs to have clear calls to action.
- It needs to get your message across.
Badly designed emails can damage the perception of your brand. Likewise, poorly rendered emails could do the same.
Here at Tagpair, we design and build on-brand, striking designs that help you to stand out in a noisy inbox.
We understand the restrictions of HTML email design, and we know exactly how creative we can get within those restrictions. And we’ll make sure your email looks great in every inbox, by testing it across every client for you.
