Creative Navigation Patterns in Email Design
Our second Community Contest has officially drawn to a close. Like the first one, which asked people to push the limits of ALT text in email, we wanted to see what email designers could do when thinking outside the (in)box.
While we’re all familiar with simple navigation bars and links in a campaign, this latest contest challenged Community members to explore creative navigation patterns in email. We were absolutely floored by the entries that came in. Although we’d love to crown multiple winners, we had to pick just one entry to take home the prizes from Litmus and our friends over at Code School.
The winner is…
The Community didn’t make it easy, but we had to award this month’s prize to Justin Khoo for his excellent Reader Mode email.
Reader Mode – Click ‘Edit Email’ to see it live in Builder
With this technique, Justin provides a solution for a common complaint on mobile devices: too much scrolling. Although scrolling is a natural and commonplace interaction on mobile, too much scrolling can get frustrating. Justin alleviates this frustration by enabling a “reader mode” in email. When enabled, a fixed top bar provides navigation between articles in an email. Those articles are then beautifully animated when sliding in and out of the reading pane.
Justin makes use of a number of interesting techniques. He uses the checkbox hack to add interactivity to the email and relies on CSS transitions for animation. Digging into his Builder example, you can see that he even uses some cutting edge CSS in the form of viewport sizing (vw) and the calc() function. He even wrote a blog post on his website detailing the process.
While these properties and techniques don’t work everywhere, the email falls back to a simple newsletter that is easily scrolled when reader mode isn’t supported. Techniques like this are perfect for progressively enhancing your campaigns, though.
The Prizes
For his efforts, Justin will be getting 2 free months of both Litmus and Code School, along with some goodies from both of us. Be sure to join in next month’s Community Contest for your chance to win some cool stuff.
Stunning Examples
There were a number of other entries, all with great navigation examples. From gooey navigation buttons to sliding menus and creative mobile sharing options, it’s hard to convey the smiles on our faces when reviewing all of the excellent ideas being shared. Here are a few of our favorites: Rémi Parmentier, one of our previous winners, crafted a beautiful gooey navigation button.
Josh Wayman shows off a great sliding menu for mobile devices.
Finally, Dane Robbins gives mobile users some extra options for taking action in an email.
Head on over to the official Community Contest thread to see all of the entries. Dig around in the Builder examples to understand what’s going on and, even though the contest has ended, feel free to share your own navigation examples by leaving a comment.
Thank You, Code School
A special thank you to Code School for sponsoring this month’s Community Contest.
Founded in 2011, Code School is an online learning destination for existing and aspiring developers that teaches through entertaining content. With more than 40 courses covering JavaScript, HTML/CSS, Ruby, Git, and iOS, Code School pairs experienced instructors with engaging, high-quality content that’s been inspired by its community and network of partners. More than one million people around the world come to Code School to improve their development skills and learn by doing. For more information, visit www.codeschool.com.
Join the Community
Not a Litmus Community member? Join the best minds in the email industry as they discuss the latest email news, cutting-edge techniques, and solutions to even the trickiest email design problems. Don’t forget to check back for next month’s Community Contest and enter for a chance to win more great prizes.
Jason Rodriguez
Jason Rodriguez was the Community & Product Evangelist at Litmus
Blog 