woman with cell

HTML Email Image Map Support and Suggestions

Given current conditions in which images are very often blocked in email messages, image maps seem to be an odd technique to pursue. Because, when your source image is blocked, your links are no longer functional.

 

HTML Email Image Map Support and Suggestions

That’s a fundamental accessibility issue. However, the CM Group of brands receive frequent inquiries about image maps, so we decided to test them out for people who are curious.

What is an image map?

An image map includes a graphic with a series of code. This code contains special coordinates for links so that clicking on different parts of the image takes you to unique links.

For example, you could take an image that contains multiple plates of food from your restaurant. Clicking on each dish might take the user to unique landing pages designed to list the ingredients of each meal.

When should you use an HTML image map?

Although they can look nice when done right, it takes a long time to design and code an HTML image map when there are so many other options available.

Image maps come with another significant drawback where email marketing is concerned: they aren’t responsive.

Over half of all emails are opened on mobile devices now, so it’s important to design emails that look great on every device and in every email client. Image maps rely on a static set of code for both the image and the links to work in unison. Your email might function as intended on a desktop browser, but, if someone opens it from their phone, the links probably won’t match up in the right places.

There are so many possibilities for incorporating beautiful graphics and links into your email campaigns that there’s really no need to use image maps.

This email from Toms, for example, contains an interactive yet responsive image.

This email from Toms, for example, contains an interactive yet responsive image.

Source: Really Good Emails

If you must use an HTML image map, do your homework to figure out which devices subscribers use to open emails. Once you have that information, you can design a series of image maps that are specifically coded to function correctly on each email client and device.

HTML email image map support: How do you make an image map?

It’s pretty easy to make an HTML image map with minimal coding knowledge.

You need a static image (the size cannot change at any point once you get started), links to landing pages, and invisible shapes to lay over the image which will contain the links.

The most challenging part is figuring out the coordinates of where to place the link’s invisible shape or click-zone. You can figure this out manually by opening something like Microsoft paint, hovering your mouse over different areas of the image, and jotting down the coordinates. Or you can plug your image into this free generator.

Don’t forget the most crucial aspect of HTML email image map support: testing to make sure your campaign looks perfect with every email client.

What are HTML elements used to make an image map?

Once you figure out the coordinates, the coding is pretty simple. You’ll just use these three basic elements:

  • Img: the URL of the image
  • Area: the code for clickable space and shapes
  • Map: the link map containing various clickable shapes

HTML email and image map support: the results

Remarkably, email clients offered good support for image maps. Moreover, what’s more surprising is that many clients retain the functionality of the links, even with images off. Following is a table which exhibits how popular email clients handled the image maps.

 

Client

Functions With Images On  

Functions With Images Off
.Mac Yes Yes
Yahoo! Mail Yes No
Yahoo! Mail Classic Yes No
AOL Webmail Yes Yes
Gmail No No
Windows Live Hotmail   Yes No
Apple Mail Yes Yes
Thunderbird Yes Yes
Penelope (Eudora 8) Yes Yes
Outlook 2007 Yes Yes
Outlook 2003 Yes Yes
Outlook Express Yes Yes
Windows Live Mail Yes Yes
Lotus Notes 8 Yes Yes
Entourage Yes No

 

Our recommendation

The results indicate that it’s not a good idea to use image maps. Specifically, because of the following issues:

  • The frequency in which images are disabled
  • Image maps and their respective images don’t marry well and pose accessibility issues for those visually impaired
  • Gmail—a very popular email client—doesn’t support them consistently (they do not work when using Safari)
  • They aren’t responsive.

If you really want to try it, do your research on HTML email image map support across different clients and design unique image maps for specific apps.

 

Are you ready to design stunning emails with images and links that look beautiful on any device? Get in touch with our team today to see how Delivra can level up your email campaigns.

Woman writing on whiteboard

Increase Automation and Control

Send Frequency Control

Knowing the right frequency for sending emails to customers can be difficult. As an email marketer, how many marketing emails should you send a month? And as a consumer, at what number of emails do you become annoyed and unengaged? 

The goal should be to touch base with customers/prospects enough to keep them interested and committed to your brand, but in the least overbearing way possible recipients want to receive updates on relevant offers and information at a rhythm that is valuable to them and respectful of their time. 

So how do you find the right balance? Testing is always your best bet. 

A/B test varying frequencies for your campaigns to find where you see the most engagement. This number will be different for every sender, so it can be helpful to look at some industry benchmarks to help you understand how you are progressing.

Finding the right number of emails to send is something that will take trial and error but the one thing you want to make sure to avoid in the process is communication fatigue from your customers/prospects. When people receive too many emails from one company they can become overwhelmed and stop engaging, or even worse,  they could unsubscribe.

Making sure that your customers aren’t being overwhelmed by the number of emails you are sending should be a top priority. Our new feature, Send Frequency Control, makes it easy to put a limit on how many emails each of your contacts should receive in a given timeframe.

Setting these limits will not affect certain triggered campaign types, such as Welcome, Confirm Opt-In, and Lead Alert, that way you can make sure that your customers are still receiving the most important communications from you.

Delivra send frequency preferences

*Available for accounts on B2B license 

CNAME Set-Up Automation

Rebrand Delivra links as your own.

We know how important it is for you to maintain a consistent brand experience, which includes your webpage links. We’ve automated the process that allows you to re-brand all Delivra links as your own, saving you time and coordination. This process ensures brand consistency when subscribers click on your links and see your domain name instead of Delivra’s. The way to do that is by using a field called CNAME (Canonical Name). CNAME allows you to rebrand your tracking links and domains. 

A little more on CNAME form the technical side of things: 

CNAME is a Canonical Name record used in the Domain Name System (DNS) to create an alias from one domain name to another domain name. A common example is the www subdomain which is provided as a pseudonym to the root domain name – users accessing “www.ExampleDomain.com” are referred to the root domain (or DNS zone apex) “exampledomain.com”.

Our CNAME set-up process has now been automated, so that you can have complete control of the setup. You can now create different CNAMEs for tracking assets, landing pages, and forms. Automating the CNAME setup reduces the coordination between multiple teams, saves time, and eliminates the waiting period for set up. The setup can be completed as soon as your IT team enters the CNAME in your DNS records and you authenticate it in Delivra.

*Available for Professional license, Enterprise and Enterprise Plus

 

Publishing Forms

You asked us to make it easier to push/publish form changes, and we listened. We have now added the ability to automatically publish form updates to your websites. We’ve added this additional option so you can now choose to embed a snippet of code right on your website instead of only from the form’s HTML. The snippet of code will retrieve the latest form version from Delivra each time updates are published. 

Automatically publish form updates to your websites with Delivra.

*Available for Professional license, Enterprise and Enterprise Plus