An experiment with CSS Overflow in Email
By using the CSS Overflow property we are able to create a image carousel that works in the majority of email clients and plays nicely in clients without support. This could be a better path if you are considering a horizontal email but can also be used for product sliders and swipe to reveals.
The carousel works by having four images positioned horizontally. The user is able to scroll through the images using a scroll bar or with touch. On clients and devices where this isn’t fully supported it falls back to showing the first two images with no scroll bar. On mobile the user sees one image and is able to scroll through all four. This test has only tested scrolling left to right, although initial tests show right to left working too by using the DIR attribute. Using additional code it’s possible to show mobile only versions, desktop only versions and outlook only versions.
See it action:
For this to work well on mobiles its important to consider the width of the email on both desktop and mobile. To make things easy I’d recommend using 640px on the desktop and 320px on the desktop, ensuring each image is 320px wide. This way the desktop version would initially display two images and the mobile would display one.
|Microsoft Outlook 2000||X|
|Microsoft Outlook 2002||X|
|Microsoft Outlook 2003||X|
|Microsoft Outlook 2007||X||Falls back to a stacked table|
|Microsoft Outlook 2010||X||Falls back to a stacked table|
|Microsoft Outlook 2011||X||Falls back to the first two images|
|Microsoft Outlook 2013||X||Falls back to a stacked table|
|Microsoft Outlook 2016||X||Falls back to the first two images|
|Mozilla Thunderbird 31||X|
|AOL IE||X||Falls back to the first two images|
|AOL Chrome||X||Falls back to the first two images|
|AOL Safari||X||Falls back to the first two images|
|Yahoo! Mail IE||X|
|Yahoo! Mail FF||X|
|Yahoo! Mail Chrome||X|
|Yahoo! Mail Safari||X|
|Apple Mail 8||X||Falls back to the first two images|
|iOS iPhone 6||X|
|iOS Gmail App||X||It works, but clashes with the native UI. It’s best to assume it has fallen back to the first two images|
|Android Native App||X||Works, but clashes with the native UI|
|Android Gmail App||X||It works, but clashes with the native UI. It’s best to assume it has fallen back to the first two images|
Known Issues & Caveats
- On some versions of outlook it’s possible to use mso code and show all images stacked 2 x 2, other versions will fall back to the first two images.
- Android Native app, this works well but users may find it clashes with the native UI whereby swiping left to right moves between emails.
- The Gmail app shows the desktop version. Scrolling does work but clashes badly with the native UI, it would be best to assume that the Gmail app is only showing the first two images.