Image maps tend to be considered the "black sheep" of web design by many, but do they in fact have a place in HTML for email? The answer is yes and no – but mostly no.
When desiring to link multiple areas of one image to different locations, a coder may choose to use an image map to overlay a custom link map on an image; this allows one image to be linked in unique ways (including non-rectangular regions such as circles and polygons) without having to slice, code and link multiple smaller images. Utilizing image maps reduces the effort involved, but how successfully do they function in major email clients? Overall, image maps work pretty well, but there are enough exceptions that they should probably be avoided (unless of course you have data showing your subscribers use email clients that support image maps).
In our testing, we found that Internet Explorer (7 and 8), Firefox 3.6 (Windows and Mac), Outlook 2007, and Entourage 2008 all work perfectly across the board. However, Chrome and Safari only reliably recognize the links in image maps when:
Our advice? Try to avoid using image maps for high-priority calls-to-action, and reserve image maps for secondary and tertiary content below the fold. Instead of relying on image maps, we recommend slicing your images carefully and purposefully into multiple linkable images. This in fact has an added benefit: with additional slices you can include area-specific ALT text, which adds to your email's usability, even from the moment it appears in the preview pane with the images still off.
Check out our other Design Tip of the Week posts for more ideas to improve your email design and performance.
Michael Thom
ExactTarget Campaign Solutions Team
When desiring to link multiple areas of one image to different locations, a coder may choose to use an image map to overlay a custom link map on an image; this allows one image to be linked in unique ways (including non-rectangular regions such as circles and polygons) without having to slice, code and link multiple smaller images. Utilizing image maps reduces the effort involved, but how successfully do they function in major email clients? Overall, image maps work pretty well, but there are enough exceptions that they should probably be avoided (unless of course you have data showing your subscribers use email clients that support image maps).In our testing, we found that Internet Explorer (7 and 8), Firefox 3.6 (Windows and Mac), Outlook 2007, and Entourage 2008 all work perfectly across the board. However, Chrome and Safari only reliably recognize the links in image maps when:
- Emails are opened in Yahoo! and Hotmail/Live Mail
- The view as a webpage link is clicked (from any email client)
- Work upon initial open, while images are still off
- Do not work once "display images" is clicked, and
- Work again once the email is closed and re-opened.
Our advice? Try to avoid using image maps for high-priority calls-to-action, and reserve image maps for secondary and tertiary content below the fold. Instead of relying on image maps, we recommend slicing your images carefully and purposefully into multiple linkable images. This in fact has an added benefit: with additional slices you can include area-specific ALT text, which adds to your email's usability, even from the moment it appears in the preview pane with the images still off.
Check out our other Design Tip of the Week posts for more ideas to improve your email design and performance.
Michael Thom
ExactTarget Campaign Solutions Team
Comments for Design Tip of the Week: Image Maps in Email
blog comments powered by Disqus