Sam Johnston - Interactive Email Developer

Sam Johnston

I design and code responsive websites and emails, specialising in interactive email and CRM workflow optimisation.

An experiment with CSS Overflow in Email

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.

Usage

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:

http://codepen.io/iamsamj88/pen/JogVZb

Design Considerations

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.

Test Results

Email Client  YES  NO NOTES
Microsoft Outlook 2000X
Microsoft Outlook 2002X
Microsoft Outlook 2003X
Microsoft Outlook 2007XFalls back to a stacked table
Microsoft Outlook 2010XFalls back to a stacked table
Microsoft Outlook 2011XFalls back to the first two images
Microsoft Outlook 2013XFalls back to a stacked table
Microsoft Outlook 2016XFalls back to the first two images
Mozilla Thunderbird 31X
Gmail IEX
Gmail FFX
Gmail ChromeX
Gmail SafariX
AOL IEXFalls back to the first two images
AOL FFX
AOL ChromeXFalls back to the first two images
AOL SafariXFalls back to the first two images
Yahoo! Mail IEX
Yahoo! Mail FFX
Yahoo! Mail ChromeX
Yahoo! Mail SafariX
Outlook.com IEX
Outlook.com FFX
Outlook.com ChromeX
Outlook.com SafariX
Apple Mail 8XFalls back to the first two images
iOS iPhone 6X
iOS Gmail AppXIt works, but clashes with the native UI. It’s best to assume it has fallen back to the first two images
Android Native AppXWorks, but clashes with the native UI
Android Gmail AppXIt works, but clashes with the native UI. It’s best to assume it has fallen back to the first two images
*Windows MobileX

Known Issues & Caveats

  1. 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.
  2. Android Native app, this works well but users may find it clashes with the native UI whereby swiping left to right moves between emails.
  3. 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.

Comments