Boxed In: Next Goes Horizontal and Plays With Color0
I collect tons of screenshots of emails I find interesting for one reason or another. It could be a beautiful design, a rendering problem, a change to a standard template, or something that just happens to catch my eye. “Boxed In” will be a blog series that showcases great examples of email design, discusses challenges that face both marketers and designers, gives the occasional critique, or highlights awesome email programs. Why “Boxed In”? The titled was suggested by our integrations manager, James. It’s a fun play on the word “inbox” and a nod to all the designers out there that find themselves challenged and inspired by the constraints of designing “in the box” for this unique medium. We’ll also be modifying our blog to accept comments for a more interactive discussion soon. In the meantime, feel free to email me at firstname.lastname@example.org with feedback and suggestions. Enjoy!
First up is an email from UK retailer Next. The first thing I noticed about this email was the very prominent alt text in my preview pane: large white text on a bright pink background. The language was also different from most descriptive alt text, asking me to “please download the images to view this email.” Nice touch!
After downloading images, the email’s intent became clear: a horizontal scroller! This email featured new arrivals for boys and girls clothing, using a layered photo montage to create interest and encourage scrolling.
Only after opening the email in a new window to get the full effect did I see the rest of the preheader text: “Shop the fantastic range of new arrivals for Girls and Boys – Scroll right to see more…” Next’s usual email template is 700px wide, and this text (along with some of the text and calls to action near the bottom left) is located outside of that threshold. It may have been wise to try to confine the preheader text and main call to action to their normal template dimensions to capture conversions from those not inclined to scroll.
Some other things I noticed about this campaign:
- While this email featured both boys and girls clothing, it definitely gave prominence to the ladies. Girls were featured on the left side of the email, and the background colors and preheader text were both pink.
- The footer copy was constrained within their normal template size of 700px.
- No hints were dropped in the subject line (“New in – come and see our summer new arrivals!”)
- This particular campaign clocks in at 1962px. Outlook 2007/2010 does have a maximum scroll width of 2110px (something to keep in mind if you decide to give a horizontal email a try).
It’s also worth pointing out that Next’s campaigns are usually colorful and engaging even with images off. Their header area takes a refreshing approach, placing emphasis first on a preheader message with click-through call to action, followed by a branding bar containing the logo and either navigation or a secondary message, and ending with the usual links to a hosted web version, text/mobile version and whitelist request.
This predominantly blue campaign featured men’s summer suits:
The green here gives a nod to the “festival” theme:
Interested in giving horizontal emails a try and need some inspiration? Take a peek at the 23 horizontal emails featured on the StyleCampaign blog, this trio from Abercrombie & Fitch, or a unique design for AAA Ohio that helped lift revenue from membership renewals.