While Bex is away, the dev team are taking over for the week.

We could have uploaded the usual articles we found for the email industry, but we’d like to add something extra to the email this week! We decided to try and tweak the layout so it scrolls horizontally…The idea sounds simple enough and it has been done before, but several years ago.

We took the opportunity to revisit this technique of displaying email content.

The results were quite unexpected.

The code we used for the scrolling was simply applying a fixed width on a container with overflow set to scroll.

The content in the container was stacked horizontally and was wider than the container.

This enabled the content to be scrollable.

For Apple iOS For Gmail Webmail Another method we tried was to apply transform rotate and translate styles to the content but this was only supported in iOS devices and Mac Outlook.

We found that the overflow technique only worked in iOS devices, Gmail webmail and Outlook for Mac.

The overflow technique didn’t work for Apple Mail despite it working on iOS.Back when they were first sent, circa 2010, they appeared to be useful, stylish and innovative.

But that was 9 years ago.

The tech has moved forward quite a bit and users experience of reading emails on devices has also changed.

This is due to the fact that most of our browsing occurs vertically rather than horizontally.

But also because the devices we use favour vertical over horizontal scrolling.

For instance, Gmail for Android, swiping left and right switches between previous and next emails.

Switching between emails has precedence over scrolling left and right in the email body.

On desktop, unless you use a trackpad or an Apple Mighty Mouse, you’re limited to using a typical vertical scroll wheel.So in the end, horizontal scrolling emails will work mostly on iOS devices only.

The code is supported in other devices, but generally there are hardware and software limitations that prevent the email from working as intended.

Check out our example of the email working horizontally where it is supported here .

Jay Oram Coder