Use Image Maps to Create Interactive Emails

 In Email Marketing

It’s no secret that images are an important part of a successful email marketing strategy. Email newsletters with images have a higher click-through rate than those without (Vero). But instead of just dropping in your logo and calling it a day, you can use image maps to create interactive graphics.

 What’s An Image Map?

An image map is an HTML element that allows you to link different parts of one graphic to different web locations by defining clickable areas on your image. While this same result can be achieved on a webpage using more advanced methods, old-school image maps are more successful in emails. You can create image maps by using web editors such as Dreamweaver or Front Page, online tools or coding them by hand.

Image Map HTML Code Example | Fiore Communications

With image mapping, you can create interactive images that do double – or triple – duty by directing readers to multiple online locations.

You could send readers a picture of your product with a link to the product page, or you could send them a dynamic graphic that explains multiple facets of your business and your product. For example, a statewide association could link a map of Florida to its different chapter homepages. Starbucks could use an image map to link an image of multiple coffee flavors to their respective product landing pages.

Image mapping can also save your design. If you’re sending out an email newsletter, chances are you’re trying to highlight your content, and nothing distracts from great content like poor or broken design. Image maps allow you to do more with your design without distracting from your content.

Blog Post Title over Paris Map | Fiore Communications

We started using image maps when a client wanted an ad in their email newsletter to lead to two different pages on their site. Our first thought was to cut the image into two pieces and link them separately, but this method can be clumsy and cause spacing issues. (Dear Outlook, please start respecting my padding values.) The last thing we wanted was whitespace between the two image halves or two halves that didn’t align properly. An image map ensured that readers were directed to the right page and that the ad design remained intact.

Creating image maps for HTML newsletters does take a little practice, but the results are worth it. Keep your eye on our blog for a future how-to on coding image maps by hand.


Recommended Posts