Description

Inspired by the types of tabs which are becoming more commonplace in web-design, the Tabs condenses information from a number of elements into a single element on a mobile device (iOS).

Functionality

A desktop will display a set of rows and columns of information. A mobile will refactor these elements into what is essentially a small carousel, allowing the user to control the view of the content, and toggle through appropriately.

Benefits

The Tab increases engagement with content on a mobile device because it invites the user to interact with it. It also has a practical advantage of reducing the length of an email significantly, wherein a number of items of content is reduced to the space of just one. Support is currently only in iOS. The current breakpoints set-up means that it does not currently activate on iPad. Desktops show the desktop version, without any complications.

It works in

Outlook 10/13+	Android (Galaxy S6)	iPhone/iPad	Windows (Nokia Lumia)	Outlook.com	Yahoo! Mail	Gmail

Known issues

Location	Requires fallback?	Fallback
Outlook 10/13+		Shows desktop view.
Android (Galaxy S6)		S6 does not support the absolute positioning required, and so causes the carousel to break. The email flows like the content usually would without the carousel functionality.
iPhone/iPad		None. The current functionality does not extend to an iPad, but may be modified to include tablet sizes. Fully supported
Windows (Nokia Lumia)		The control of siblings and child elements in CSS has support, but is inconsistent in application. The email flows like the content usually would without the carousel functionality.
Outlook.com		Shows desktop view.
Yahoo! Mail		Shows desktop view.
Gmail		Shows desktop view.