JRCommunity Contest: Creative Navigation in Email
Update: This contest has officially ended.
Last month, we launched our first Community Contest and received some amazing entries showing off creative uses of ALT text. Well, we’re back at it with our second contest…
Here’s the challenge:
Design an interesting approach to navigational elements.
A while back, member Jerry Martinez posted an epic Hamburger Menu for Email. Now, we want to see what else people can come up with for taking people places straight from the inbox.
We’ll be judging based on creativity, overall design, code implementation, and email client support. The contest ends March 18th. The Litmus team will then judge the entries and announce the winner a few days later.
Prizes
We’re thrilled to have partnered with our good friends at Code School to bring you even more prizes this month. The winning entry will receive the following:
- 2 free months of Code School
- 2 free months of Litmus Plus
- A care package full of Litmus and Code School goodies
About Code School
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
Requirements:
If you want your entry counted, make sure to follow these guidelines:
- Entry must be built for this contest. While you can use a concept you've sent before, don't just post the web link to something you shipped last month.
- You must be a member of the Litmus Community.
- You need to fill out your Community profile so that we can get in touch easier.
- You must submit your design as a Builder embed in a comment on this discussion thread. Here’s how to do that.
- All entries must be submitted on or before Wednesday, March 18, 2015.
And the winner is...
First, a huge thank you to everyone that entered this month's contest. We were truly impressed with the entries. Second, congratulations to Justin Khoo and his reader mode email. We loved the idea and execution, so he'll be taking home the prizes from Litmus and Code School.
Don't worry, though, we'll be back early next month with another Community Contest and more great prizes!
Hello everyone !
Here's my attempt for this new contest : Gooey Navigation.
The Gooey Effect is an original effect using SVG filters created for the Web by Lucas Bebber. He wrote an excellent article on CSS-Tricks and made wonderful demos on Codrops. I loved this effect so much that I wanted to see how it would work in an e-mail. And I was really surprised by how well this was supported, considering the advanced techniques used.
The gooey effect requires support for SVG and the CSS
filterproperty. This works well in Thunderbird 31, the default Mail app on Android 4.4 and below, the Outlook app on Android, and even french webmails like Orange and SFR. Apple Mail supports thefilterproperty, but unfortunately disables it during a transition, so the gooey effect won't be visible in Apple Mail.The navigation in itself uses the CSS
transitionandtransformproperties. On top of all the clients cited above, turns out that this work well in… Outlook.com ! This was a huge discovery for me, as I always thought Outlook.com didn't support CSS Transformations. It also works in Windows Phone 8.1 (using the requiredX-UA-Compatiblemeta tag and a standard@viewportdeclaration).Here are a few more details about some hacks and techniques I used to make this work :
.ExternalClassselector to target Outlook.com and a.moz-text-htmlselector to target Thunderbird. This way, clients that support checkboxes (like Apple Mail or french webmail SFR) can still have the navigation appearing on click (and not on hover in desktop).translatetransformations can be a bit jerky on Apple Mail. So I usedtranslate3dinstead.pxunits in it. Sotransform:translate(-90px, -30px)will be filtered, but nottransform:translate(-150%, -50%). Outlook.com also filters anytransformwith atranslate3dvalue. So I ended up writing both atranslateandtranslate3dversion.<input>tag into a<noinput>tag. This is non standard, thus browsers interpret this as a block level element, and wrap the rest of the adjacent tags inside it. This was problematic as I used adisplay:noneon the<input type="checkbox">. Thus, it would hide all the content of the navigation. In order to prevent this, I added a bunch of rules dedicated to hack around this and make the navigation appear on hover.aria-labelledbyattribute hack for Gmail and the@media yahoomedia query hack for Yahoo, to have a simple fallback render.If you want to learn more about the gooey effect, make sure to read the articles by Lucas Bebber above. They're very in depth and easy to read. And please make sure to give him all the credits regarding the creation of this effect, as I simply copied his SVG filter.
If you have any other specific question, feel free to ask me.
Very cool effect and some great notes too. :)
I noticed you're using
aria-labelledbyfor the gmail hack. That does look like a more "proper" attribute to use than lang :)OK guys here's my last minute entry: Reader Mode Nav.
I was hoping to get it to work with Android but some last minute bugs came up so this version unfortunately only works on iOS although it should work in the browser (you need to narrow it to see the "Reader mode button"). Its an attempt at a solution to the long scrolling we normally experience on a mobile client.
Basically you wrap multiple pieces of content in the email within a container and when the button is clicked, a fixed position toolbar is shown at the top of the content and you can navigate the content of the email by clicking on arrows in the toolbar. You can also navigate with an index menu.
Will post an update with more information soon. Let me know what you think!
This is really cool, I publish a weekly article newsletter that I think this would be perfect for. Thanks heaps Justin!
This is awesome. My colleagues response when I showed him - "what sorcery is this?"
Haha thanks Josh!
Very cool :)
I really like this! Great idea!
Thanks Mark and Angela!
I posted a bit more details on my blog here: http://freshinbox.com/blog/reader-mode-email-pagination/
Hi community! I thought I would share something I have been working on. Funnily enough it is also a travel related email, however this isn't from a travel agent/company. It is about visiting your sponsored child (I work for Compassion Australia).
The navigation in this email is very subtle on desktop, however on iOS and mobile devices that support media queries it blows out into a menu button with an expanding nav. I am not normally a fan of navigation in email as I think it can be distracting, but I thought it would be useful here as this email is quite long. Still working out a few things with Gmail, however I am pretty happy with it so far.
I would love your feedback.
Wow. Beautiful artwork and I love the hero image. This is a very clean looking e-mail. On the mobile devices, what does the expanding menu contain? I think e-mails on a mobile device are much more interactive - really "hands on" pardon the pun. For me, anything that makes the message look, feel, and act like an application, all the better. So in that regard, I think the menu bar is a good idea (as long as it doesn't come at the detriment of your call to action or main purpose). Would be great to connect with you via LinkedIn if you're interested. I enjoy having a network of peers to share with and bounce ideas around. http://www.linkedin.com/in/danerobbins
Thanks! I have some awesome designers to work with so it isn't all my doing.
The menu just links to sections within the email through anchors. The expanding one contains the where, when and cost. Nice and simple. I definitely agree with the menu bar not being detrimental to the CTA. I've seen too many emails that look like a website jammed it an email with no clear CTA that it has put me off them. I think your email the menu works really well as it really complements the content, whereas if I did something similar here I think it would be distracting.
I'll find you on linked in, sounds good!
Hi Josh,
This is really cool. I was messing with the code and wanted to know what should happen when the 'Menu' button is clicked? I believe the three options should drop out.
I was testing through my email software and sent to iPhone 5s running iOS8 using Yahoo Email and Gmail (know you were still working on that client), but nothing happens.
Were you able to get the anchors to work across all clients?
The classes are on hover and active, so on click on iOS the three options should drop down. I got it working on an iPhone so I was pretty happy there. Yeah I expect nothing to happen in Gmail. The whole thing is based on media queries which the Gmail apps don't support (yet - hopefully). I gave up in the end trying to get it to work in Gmail apps. I've never tried with the Yahoo app though. That is good feedback - thank you.
Gmail strips IDs in emails which is what I am using for the anchors. So in Gmail the nav won't work. I was a bit lazy and didn't update my code so it supported Gmail. Gmail doesn't strip name attributes on links so you can use <a href="#name-attribute-of-destination-link"></a> and send down to the destination link which would look like this <a href="#" name="name-attribute-of-destination-link" id="name-attribute-of-destination-link"></a>. Note with anchors they normally jump down to the element with that ID, so for all other clients the id will have to be the same as name.
I haven't tested it well, but that is how it is done in the Smashing magazine newsletter so I would assume it would work. Does that help? I can post another version with it working if that would help.
Travel marketing is highly experiential and we've found with e-mail marketing that some functions are more important during a mobile experience than when viewing on a desktop. For this mobile experience, we wanted thumb-friendly navigation that allowed a mobile user to Call Us, view the Brochure, or Share the message in social media, but only on the mobile version. Since it took a great deal of effort to suppress these navigation features on web and desktop clients, we thought it was worthy of sharing for the navigation category.
That is really clever Dane. Great job! Question - how do you find people sharing things directly from email? It is something I have been meaning to try but have never got around to it.
Hi Josh - thanks a million for the compliment and right back at you! Looking at your work, I'm in great company. Very nicely done. I particularly like the hero photo. Stunning with emotion. For the sharing, I'll need to work with the marketing manager to view the stats. My guess is that it isn't shared frequently, but we're hoping the gesture is itself a call to action. We are experimenting with a method to track the in-phone call action through a redirect, but haven't perfected it yet. We do have the tracking telephone number, but I'm interested in learning the number of guests who click the call button but do not complete the dial. We are learning as we go.
Thanks Dane. Yeah I would love to know if you have any success with the share stuff. Abandoned call tracking, that is interesting. Good luck with it
This is a great example Dane, especially identifying the key buttons 'needed' on mobile.
Thank you Paul - I appreciate your kind words. It would be great to add you to my LinkedIn network if you're interested. I'm always looking to learn from and share ideas with my peers. Don't worry I'm not a sales guy ;-)
Yeah for sure Dane: http://ae.linkedin.com/in/paulparsons1981
Thought I'd play around with some cool CSS stuff.
3D hover functions on desktop and hamburger menu for mobile.
The animation is a bit heavy for mobile, but I think a lot of that can be fixed with better coding (e.g. using transform:scale instead of height and width).
Ha ha, well played. I love the animation of the icon on mobile. It's kinda cheesy, but I guess an hamburger icon with a cheesy animation makes something delicious !
Haha, glad you liked my cheese burger :)
Nice! Who can make all the menus go all dark green in the shortest amount of time? Mines 5.5sec :)
Hi, everyone! I design and build all of the emails that the Ohio branch of AAA sends out. When we moved to responsive design, I experimented with a few ways to incorporate navigation. I weighed some of the pros and cons of existing methods and got some inspiration from this article.
The solution that met the needs of the client best was a top to bottom approach. At full width, there are 5 navigation links in view. As the viewport shrinks, the least important links shift to the bottom, and on the smallest device we test for, the three most important nav links remain at the top.
With this approach, we know the navigation will look and function well at any viewport size. I tested and tested and refined and refined, and am happy to report the nav looks consistent across all the email clients and devices Litmus tests for… except Blackberry (which, based on their subscriber analytics, AAA doesn’t support).
Here’s a link to all the test previews.
Hi folks!
This is our contribution for the Creative Navigation contest.
You can see our own company's newsletter. Because the campaigns are built using a custom CMS, we are very much limited in fancy features. Everything has to be solid. Our clients are expecting professional work and the best experience in all major clients either Desktop, Mobile or even Web. This is why our main goal is to maintain the best cross-client compability when trying out new features. In this example we integrated a simple CMS managable navigation menu which transforms into a drop down list with some transitions on mobile devices.
We are very much looking forward to your feedback.
Nice job on the delayed fade out effect of the About Emersys text when the menu is triggered. Looks polished.
This is my take on creative navigation...
Not something I've seen anyone doing (might be a reason for that!), but to have horizontal scrolling within a container so header/hero image/footer's etc stay static apart from the content you want to scroll through.
I came up with the idea a while back and implemented it to a point but at the time didn't know how to hide stuff on desktop (as it looks terrible).
I've got this far for now but after some quick testing my 'hide' code fails in Gmail and the horizontal scroll didn't seem to work on android because of the 'swipe for next email' functionality.
Anyway, take a look and feel free to criticise...
This is my email with sticky navigation and it works on devices.
Another email where the position of the navigation changes on mobile devices.
Can I get an iPhone 6+ instead? :)
Only if you can replicate the Minority Report interface in Lotus Notes.
You sir, made me laugh!
"The contest ends Friday, February 27th." - OR - "All entries must be submitted on or before Wednesday, March 18, 2015."
Which one is it?
Sorry about that! Updated to reflect that it ends the 18th.
No problem :) Thanks!
Does the navigation need to be a menu, or can it be the actual navigation of the email itself?
I think navigation has a pretty wide definition. You can experiment with a menu, links throughout the email, or even some creative uses of CTAs. Just mess around!