23 horizontal scrolling emails

Horizontal emails inspire strong feelings among designers. Depending which side you come down on, horizontal emails are either cutting edge and artistic or counter-intuitive and pretentious.

Horizontal emails tend to be image based, favored by B2C rather than B2B. The side scrolling layout breaks convention, so navigational cues and intuitive design will determine if your email frustrates or delights.

Here’s twenty-three rare, outside-of-the-box, experimental horizontal emails.

Click images to view emails.

1. Selfridges {View}

{03/30/10 / New arrivals - Buy online at Selfridges.com}

{04/15/10 /Spring loaded - Go neutral this Spring at Selfridges.com}

{04/22/10 / New in - This season’s latest looks at Selfridges.com}

{04/29/10 / See our picks for the perfect bank holiday weekend wardrobe}

UK retailer Selfridges, sent me four horizontal emails in the last 30days.

All 2000 pixels wide, they increased the height from 536px to 716px, to accommodate social media links in the footer. Though the key content is still around 550px in height.

2. Hugo Boss {View}

{05/07/09 / Summer hits - find out more!}

The maximum horizontal scroll in Outlook 2007 is 2110 pixels. This Hugo Boss email is 5227px wide, resulting in rendering issues.

3. Zinio {View}

{08/06/08 / Check out the latest in Digital Publishing News}

The majority of horizontal emails are image based, this rare text based example was designed by eROI for zinio.

Horizontal templates can be limiting for B2B. You need to place the same amount of text in each column. Although the template does not break - it expands downwards - the design looses its symmetry.

4. EEC {View}

{12/17/09 /Happy Holidays From the EEC & Smith-Harmon - 2 Gifts Inside}

This EEC newsletter, is the only side scroller I’ve seen with animation. At only 1577px wide, the designers have clearly done their homework, and tested maximum scroll widths under different email clients.

The text is HTML, including a prompt to, “Scroll right for your holiday gift —>”. Creative and well executed by Smith-Harmon.

5. Urban Outfitters {View}

{10/06/08 /Right on.}

Urban Outfitters brand is bold and edgy, likewise their subscribers expect bold email creative.

This example highlights how the horizontal format works well with photo galleries. Thanks to Chad White of the RetailEmailBlog, for sending me this example.

6. STYLECampaign {View}

I designed this iPhone friendly side scroller, I’ll start using it next month. It’s 980 x 356, around 20K in size, 90% HTML and on a PC all the content sits above the fold.

You can play with scale, which alters how it appears by default on the iPhone. Learn more about this email here, it’s the 1st in a 4 part series on designing for the iPhone.

7. Icebreaker {View}

In this vertical vs. horizontal A/B test by eROI, the horizontal design won. The use of anchor tags, viewable in the preview pane is a nice touch.

(Though note anchor tags are not supported by all email clients e.g. Outlook 07)

8. Canadian Tourism Commission {View}

{11/05/09 }

Not just a horizontal scroller but a maze…

Bronto called it, “The coolest email we’ve ever seen“.

Chad White of the Retail Email Blog named it, “One of the most interesting emails I’ve seen all year“.

And eROI called it, “Wild“. You can check out more on how it was made here.

I spoke with BJ Vicks, Community Manager at Radar DDB, he kindly forwarded my questions to the design team.

I think it’s safe to say that we’re thrilled with the response to the whole Locals Know program…I hope this helps illuminate the campaign a bit. The numbers outside of the newsletter speak for themselves.

9. Zinio {View}

As you scroll right the previous, “GET IT NOW>>” button is obscured. So eROI added extra call to action buttons throughout the horizontal layout.

Compare this to the Hugo Boss example, which has only one CTA far left

In their last three horizontal emails, Selfridges added two deals, far right. No doubt realizing as eROI did, the need for additional CTAs off the first screen.

 

10. A&F {View}

{10/01/09 /Young and Sexy, Vintage Hoodies}

These two, “Young and Sexy” emails show some of A&F’s horizontal experiments. Placing the copy flush left, (ideally in HTML) is the preferred layout.

Between July 09 and Jan10, A&F sent me 20+ horizontal scrollers. The widths vary from 1161 up to 2609, heights are between 524 and 889px.

The email above is 889px tall. I’d keep heights under 550px, otherwise people have to scroll in both directions, which defeats the purpose.

The email above is 2609px wide. We tested the maximum horizontal scroll, in various email clients. Keep widths under 2110px for Outlook 2007.  Feel free to use our horizontal test email yourself.

After taking a break from side-scrollers for over 6mths, A&F sent out this 2342px wide email in Sep 2010. The Facebook link (top-left) is a key difference.

It’s never a good idea to overuse certain design elements, so taking a break is a good call.

{02/18/11 / Ready to get all your favorite jeans on sale?}

A&F are still sending horizontal scrollers as of March 2011. This 2415px wide email sent Feb 2011, is the most striking to date.

11. 3 Suisses {View}

Thanks to @EmmanuelleSaal for sending me this example from French retailer 3 Suisses. It’s one of the widest at 2730px, it differs from many of the other examples, in that its made up of 5 tables rather than one.

It uses arrows as visual cues and pre-header text, though some HTML copy would have been nice.

3 Suisses sent a second horizontal email, this time with a touch of animation. At 1741px wide, it’s narrower than the previous one and works for Outlook 07 users.

Like Eddie Bauer, they hedged their bets with a second vertical section for users who miss the visual cues to scroll right.

I really like the animated visual cues, in this third horizontal email from 3 Suisses. They also extended the black bar under the main graphics, adding extra arrows to scroll right.

12. AAA {View}

This email was designed by ExactTarget, as part of the Connections Extreme Makeover: The Email Design Competition.

“Out of the three redesigns tested in the competition, our design outperformed the control CTR by 26% and outperformed the projected revenue of the 2nd place finisher by 4%.”

Here’s what AAA’s email looked like, before the redesign.

13. Eddie Bauer {View}

{08/09/10 /All-New Denim! Introductory Offer - Save Up To $20 On All Jeans}

I nearly missed this horizontal email, as there are no visual cues to prompt users to scroll right. It’s 1890 wide and 1425 in height.

This is a two-for-one side scroller, though the additional height forces you to scroll vertically as well as horizontally.

This is Eddie Bauer’s second side-scroller (around 1mth apart). Its 1450px wide, slightly narrower than the previous one. They stuck with a secondary vertical section (like 3 Suisses above).

14. Chick-fil-A {View}

This horizontal email was designed by BrightWave Marketing. It’s 1,100 wide, with plenty of HTML text and visual cues to scroll right.

I like how they repeat the CTA to share with your network at the start and end.

15. LeCool {View}

@becskr shared this email on her emailfail blog, and was kind enough to forward it to me. It’s the widest I’ve seen so far at 15,196 pixels!

While the design is gutsy and uses plenty of HTML,  it has some rendering issues…

16. Bra Smyth {View}

{09/12/10 / Chantelle Ships Free!}

This email was designed by Bryan Boyd. Its 2027px wide, which works well for 07 users.  It’s missing visual cues to scroll right , so some users may miss the extra content.

{09/15/10 / Shop By Price Everything Under $45}

Bra Smyth’s second side-scroller- sent 3days later - has clear visual cues to scroll right, up in the pre-header area. It’s 1666px wide. When I asked Bryan how the emails performed he told me:

@stylecampaign so far so good. Changed some things on second one. Like visual to scroll. These were firsts, so will evolve with testing - @brymw

17. Adidas {View}

{10/31/10 / Gorefest!}

Here’s the vertical email so you can compare the two. The horizontal layout features a vertical navigation (though image based whereas the vertical is HTML) and an extra product shot.

I like how the orange shipping tab up top and black address tab below, break up the boxy horizontal layouts we’ve seen so far. Continuing the diagonal elements within the hero shot/logo, is a nice touch.

18. Oasis {View}

{11/28/11 / 4 Weeks To Go - Christmas Party Dressing}

Looking to mix things up during the 2010 holiday season, UK retailer Oasis,  started sending a horizontal “Sunday Supplement”. The few I received contained a lot more editorial content than their usual fare. Written by Karen Dacre, Fashion Writer from the Evening Standard (a UK newspaper) the last one I received was 19th Dec.

The one above is 2897px wide, exceeding the maximum horizontal scroll in Outlook, which is 2110 pixels.

19. Next {View}

{01/27/11 / You’ll love the new cotton and chambray collections from Next}

This horizontal email from UK retailer Next, is 1326 x 873 pixels, so users will have to scroll in both directions.

Placing the navi at the bottom is unique, as is centering the hero copy. The three stacked tables in peach, gray and white ensures the pre-header text (in HTML) pops.

20. Mobile Spinach {View}

I designed this horizontal mobile template for Mobile Spinach in 2010.  I added the gray bar with arrows as a visual cue, when viewed on the iPhone 4 you can also see teaser content to the right:

21. Saks {View}

{04/10/11 / Celebrate Marc by Marc Jacobs 10-Year Anniversary}

Like Eddie Bauer above, Saks did not alter their navi bar when they went horizontal. The light gray arrow on the guys shoulder is a - too? -  subtle visual cue.

I’ve only received two horizontal layouts from Saks,the one above at 1677px wide and another on Mon, May 2nd at 2911px.

22. Hollister {View}

As you’d expect this horizontal layout is the same as A&F’s above, just a different color palette. It’s 2621px wide…

23. Crocs {View}

@trendlinei shared this 1779px wide Crocs email on Twitter, it’s similar to the Hugo Boss one top of the page.

The animated arrows are strong visual cues, along with the line along the bottom, demonstrating how the shoes change color depending on the available sunlight.

Team horizontal?

I don’t expect horizontal emails to ever outpace vertical, but only ten twenty-three (I’ll keep updating this post) in the last 3 years?! Savvy retailers like A&F and Selfridges are happy to exploit this creative void.

What do you think, should more brands be testing horizontal emails?