Use Image Maps to Create Interactive Emails
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). You could just drop in your logo and call it a day. Or 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 web page using more advanced methods, this old-school implementation is more successful in emails. You can create them by using web editors such as Dreamweaver or Front Page, online tools or coding them by hand.
Why Use Them
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. 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.
How We Use Them
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 emails does take a little practice, but the results are worth it. Keep your eye on our blog for a future how-to on coding them by hand.
