How to Create an Image Carousel for Email – Part 2 [Web & Desktop]

In Part 1 we saw how we can create a thumbnail driven image carousel for mobile email. This article will go over how to add support for Web & Desktop email clients such as Yahoo! Mail, Outlook.com and Outlook 2003.

Try out the Image Carousel for Email Builder
The tool uses a slightly different technique


Hotel

Unlike the mobile version, supporting web and desktop is a bit more involved, so if you just want to see an example, enter your email below to send yourself an example or skip to the end for the complete code.




Lack of absolute positioning on Web Clients and Outlook

One of the main challenges when attempting advanced layouts on webmail and desktop clients are that certain kinds of CSS are not supported. A key style that we used in the mobile example that isn’t available to us is absolute positioning (position: absolute).

Absolute positioning allows us to position elements at arbitrary locations in the document. We used that in the mobile example to stack the images on top of each other at the same location and to display them by simply moving images on top of each other using z-index.

In the case of web and desktop clients we would need to find alternatives.

Pushing elements out of the container

In this example although the order of our HTML elements (thumbnails and images) would remain the same, instead of stacking we would simply “push” the elements to the right out of the container (the <DIV> that holds the elements) when the user hovers over a thumbnail. This works by setting the dimensions of the <DIV> container large enough to only accommodate the thumbnails and a single picture and then set the container’s “overflow” property to hidden so that any element that exceeds the dimensions of the container will be hidden.

In our markup we have the elements in this order:
[thumbnail 1]
[thumbnail 2]
[image 2 - initially hidden]
[thumbnail 3]
[image 3 - initially hidden]
[thumbnail 4]
[image 4 - initially hidden]
[image 1]

See the animation here to follow along ( <DIV> container is outlined in blue):



Situation #1 – Initial State
When the elements are first displayed, all the thumbnails are displayed horizontally, with image #1 being the first displayed.

Situation #2 – Mouse over on Thumbnails 2,3,4

When the user’s mouse hovers over the second thumbnail, the sibling selector (+) is activated and the second image becomes visible. This causes the elements to the right of the image to be pushed out of the container including thumbnails 3 and 4.

This same example happens when thumbnails 3 and 4 are moused over. As you can see the first image is always displayed but because it has been pushed out of the container, it is not visible.

Thumbnail pictures as background

If thumbnails 3 and 4 are pushed out of the container when the user hovers the mouse over thumbnail 2, how do we keep thumbnails 3 and 4 visible?

Instead of making the thumbnail pictures as individual elements, we place all four next to each other as a single image in the background. We create four “virtual thumbnails” that appear on top of the respective thumbnail images. These virtual thumbnails are just <DIV> elements that contain an image that is transparent. So when the virtual thumbnails are pushed out of the container, the thumbnail pictures are still visible.

This is where the main difference between the original carousel for mobile and this example; web and desktop use.

Outlook 2003

As a final note, this also surprisingly works in Outlook 2003 – as long as you supply a valid doctype (the stuff that appears before the <html> tag for example:<!DOCTYPE html …>

Leaving out the doctype will display the carousel on Outlook 2003, but it will not respond to :hover events.

Final Markup

So here’s the final markup of the image carousel that supports both mobile and non-mobile.

Recap

1) Building a carousel that works just on mobile is a lot simpler.
2) With some extra work, you can build a carousel that also works in Yahoo! Mail, Outlook.com, AOL and Outlook 2003

Now if only Gmail would hurry up and support embedded style tags, more users would be able to benefit from your interactive email efforts!



Latest Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">