2

I have to create an email template that will be read in Outlook 2002 and above, Thunderbird 3.0 and above, gmail+yahoo+hotmail+aol on chrome+firefox+IE, modern androids devices, and iPhone 5 and above.

The email template will have one animated GIF of the world map where all the continents start off grey. Two seconds later, all the continents fade in at the same time and each continent will have different color.

A user should be able to click on each continent, which takes them to the corresponding wikipedia article.

My question is, what is the best approach to satisfy all these requirements? I already have some ideas, but there are drawbacks to each. Some ideas I was considering were:

  • splice up the continents into rectangles and load each animated gif separately. But the problem is that each image might finish loading at a different time, and therefore, the continents might fade in at different times.

  • keep the animated gif as one whole image. Then position several on top of each continent, where the img is a transparent image that force a suitable width and height. The problem is that I will probably rely on position:absolute, which supposedly don't play nicely with some email clients.

Does anyone have suggestions?

John
  • 32,403
  • 80
  • 251
  • 422
  • can you use image maps? – Pedro Estrada Feb 11 '14 at 19:40
  • @PedroEstrada I don't know how well image maps work in the different email clients I mentioned. Do you have experience in this matter? – John Feb 11 '14 at 19:41
  • I don't have experience in the matter, but I'm here to help. I came across this link: https://www.campaignmonitor.com/blog/post/3475/image-maps-in-html-email/ and this one: http://www.campaignmonitor.com/blog/post/2432/do-image-maps-work-in-html-ema/ – Pedro Estrada Feb 11 '14 at 19:42
  • thanks, those links make it seem like a promising approach. So it's something we could research – John Feb 11 '14 at 19:46
  • theres a difference of 4 years between the links, and the most recent one is 2011. So there should be improvement as well since we're in 2014 now. – Pedro Estrada Feb 11 '14 at 19:47
  • Sounds like you really ought to be using JavaScript, which is pretty much universally disabled in email clients. Why don't you serve them a link to a web site which does the fancy stuff? – tripleee Feb 11 '14 at 19:51
  • @tripleee i can't do as you suggest because the sales and design team already agreed to all the items above to the client (replace continents with fancy products they want to sell) – John Feb 11 '14 at 19:53
  • @PedroEstrada Unlike the web, email doesn't evolve as quickly. Most people are still using the same old versions of Outlook. Imagine the web where 40% of people still use IE7. Web email clients, that can update in the cloud for the most part haven't bothered developing past that limited level of compatibility. – John Feb 11 '14 at 22:07

1 Answers1

1

Besides image maps, which is mentioned in the comments, you could also try setting the GIF as a background image and have transparent PNG's hyperlinked in front.

There are two methods for backgrounds in html email, assuming you want 100% support (particularly of Outlook). Outlook only accepts background="" in the body tag. Here are the two methods to get around this: VML and in the body tag. VML is the only way to put a background on a specific element.

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60