Horizontal Scrolling Emails (B2C) Best Practices

Question

A client recently asked me to look into developing a horizontal email for one of their campaigns. I've been coding their emails for a year or so now but am unfamiliar with the best practices from a user's point of view for horizontal scroll.

This website has some examples:

http://stylecampaign.com/blog/2010/04/10-horizontal-scrolling-emails/

From my beginning research, it looks like Apple Mail on iPhone will simply scale the email to fit the screen width. Outlook has a limit on 2000px for horizontal scroll bars, and hotmail may or may not display the email in its full width.

Is there any data or more relevant research on the pro's and cons of this approach?

Answer 1

Personally I think it's a bad idea to use horizontal scrolling for non-touch devices. You may use some kind of switchers (like next/previous category buttons) and animation to emulate horizontal scrolling, but modern input devices (with few exceptions, like Apple's Magic Pad, etc) still doesn't provide a good experience with horizontal scrolling unfortunately.

From: What are the pros and cons of mixing horizontal scrolling with vertical scrolling?

Jakob Nielsen argues against horizontal scrolling:.

We know from user testing that users hate horizontal scrolling and always comment negatively when they encounter it. Customer satisfaction is surely reason enough to avoid horizontal scrolling. There are two other reasons as well:

• On the Web, users expect vertical scrolling. As with all standard design elements, it's better to meet user expectations than to deviate.
• When pages feature both vertical and horizontal scrolling, users have to move their viewport in two dimensions, which makes it hard to cover the entire space. For people with poor spatial visualization skills, it's especially challenging to plan movements along two axes across an invisible plane. (Typically, users score lower than designers on spatial reasoning and visualization tests.) In contrast, one-dimensional scrolling is a simple way to move across content without advance planning: you just keep moving down.