Archive for April, 2010 :

31 horizontal scrolling emails

Thursday, April 29th, 2010 by Anna Yeaman

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 thirty one 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}

View Selfridges side scrolling email

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

View Selfridges side scrolling email

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

View Selfridges side scrolling email

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

View Selfridges side scrolling email

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!}

View Hugo Boss side scrolling email

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}

View Zinio side scrolling email

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}

View EEC side scrolling email

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.}

View UO side scrolling email

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}

View STYLECampaign side scrolling email

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.

View iPhone email

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}

View Icebreaker email

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)

View Icebreaker email

 

8. Canadian Tourism Commission {View}

{11/05/09 }

View Maze email

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}

View Zinio side scrolling email

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.

View Zinio vertical email

 

10. A&F {View}

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

View A&F side scrolling email

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.

View A&F side scrolling email

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.

View A&F side scrolling email

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

View A&F side scrolling email

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.

View A&F side scrolling email

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.

View A&F side scrolling email

{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.

View horizontal email

{04/20/2013 / #ABERCROMBIEHOT List: Festival Favorites ♫}

After a short break A&F just sent me a couple of horizontal emails in April and May 2013. Placing their footer text on one line would make this more legible on the iPhone. Though I like how they have placed CTA’s throughout and there’s touch friendly tweaks.

 

11. 3 Suisses {View}

View 3Suisses side scrolling email

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.

View 3Suisses side scrolling email

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.

View 3Suisses side scrolling email

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}

View AAA side scrolling email

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}

View Eddie Bauer side scrolling email

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.

View Eddie Bauer side scrolling email

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}

View Chick-fil-A side scrolling email

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}

View LeCool side scrolling email

@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!}

View Selfridges side scrolling email

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}

View Selfridges side scrolling email

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!}

View Adidas side scrolling email

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}

View Oasis horizontal email

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}

View Next horizontal email

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}

View Mobile Spinach horizontal email

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:

Designing emails for touch

 

21. Saks {View}

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

View Saks horizontal email

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}

View Holister horizontal email

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}

View Crocs horizontal email

@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.

 

24. Daily Candy {View}

{ 11/19/2012 / Looks That Stop Traffic }
View horizontal email

The iPhone’ native client scales horizontal emails to the height. So for it to still be legible, you want to keep scalable horizontal emails 300-500px tall all in. Alternatively you could make it responsive and flip it vertical on mobile like we’ve done for a few clients. This one is ~530px high, though the images hold up well on the iPhone.

 

25. StyleCampaign {View}

{ 03/29/2013 / Responsive email design }

View horizontal email

I wanted to use a big punchy image with a slightly editorial vibe. I designed this at ~1475 x 860px, so it’s quite chunky. This responsive, horizontal layout allowed me to play with a desktop, tablet and mobile view. Left hand column is for Android Gmail users. More experimental than anything, I learned a lot doing this. More recently how some 3rd party mobile apps will scale to the width causing usability issues with no zoom enabled.

 

26. JC Penny {View}

{ 02/19/2012 / Hello, Sunshine! }

View horizontal email

JC Penny sent me 15 horizontal emails between Feb-Aug 2012, this was one of my favorites. It works well on tablets and the creative fits the format. Many of JC Penny’ horizontal emails were more chunky, coming in around ~1450px wide.

 

27. Crate&Barrel {View}

{ October 31, 2012 / 20% off beer glasses. One week only }

View horizontal email

While the JC Penny one above is arguably aimed at desktop and tablet users, the shorter Crate&Barrel layout will work better on the iPhone.

 

28. Horchow {View}

{ March 17, 2012 / Get the beach-house look + great deals on lighting (20% off + free
shipping }

View horizontal email

Another chunky one, though the footer text will make the content zoomed out on the iPhone. This was sent on a Saturday, I’ve received a no. of horizontal emails on weekends. Maybe as users are more likely to be on tablets, or a slower day to test an experimental design.

I received 10 horizontal emails from Horchow between 11/28/2011 and 3/17/2012. 2012 was the year we saw many brands testing horizontal layouts. My impression is it’s been slower in 2013.

 

29. aerie {View}

{ March 21, 2012 / Take 30% Off: Say Hello To Spring! }

View horizontal email

Again the extra height will work against iPhone users, though I do like the touch friendly product images that need no supporting copy.

 

30. American Eagle Outfitters {View}

{ 8/31/2012 / Take 30% Off & get Free Shipping All Weekend Long. }

View horizontal email

This was one of my favorites from 2012, I liked the animation and disordered grid layout. I’m not sure if the images are of customers or models, though the attempt to make it more personal via the #liveyourlife hashtag is a nice touch.

 

31. Norm Thompson {View}

{ 8/27/2012 / What to wear? 6 STUNNING OUTFITS + 10% off FREE SHIP }

View horizontal email

I like how it’s numbered 1-6 with a CTA below each item. Also they used colored tables behind the images. Though the height makes it more suited to desktop/iPad than smartphones.

 

Team horizontal?

I don’t expect horizontal emails to ever outpace vertical, but only ten thirty one (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?