JMHamburger in Email
This past week was a whirlwind of refactoring! I was working on (and finished) a mobile responsive email template for a credit union. The goals of the email included:
- Design that is in line with their website
- Mobile responsive – duh!
- Retina images
- Pre header text for inbox goodness
- Bullet proof CTA’s
- Styled ALT text for disabled images view
- Hamburger menu – WTF?!
Items 1-6 were expected and implementation ran smoothly as I worked off of a boilerplate from a previous project. The Hamburger request, however, was something that I had never done before.
The initial challenge was figuring out how to bring user interaction into the email world. Using a checkbox and styling off of its :checked pseudo selector seemed like a good idea and so I went with it.
Initial testing showed solid support by the email clients I was actually targeting – those supporting CSS3 media queries. Hiding the checkbox from non-media querying clients was not so easy and forced me to refactor the markup numerous times.
Fast forward through a week of hair pulling, desk banging and numerous litmus tests ... and I think I got it just right.
So if anyone is interested in going hamburger in your emails, or would like to improve upon the technique, check out the email here: http://code.jmweb.net/hamburger-in-email/
Jerry, this is really awesome! The hamburger menu is such a great usage of the checkbox technique.
I blogged about your example here: http://freshinbox.com/blog/hamburger-collapsible-menu-in-email/
That is very cool Jerry, hands down a great feat to fit that into an email from a coding perspective.
I'm wondering about your take on the ROI of a menu in the email. It seems like the menu incorporated here has 3 items, and from a marketers perspective all those items could have been incorporated into the body of the email as CTA buttons. What was your thought process in that regard?
Would you kindly update link to hamburger in email code? Many thanks
This looks amazing. Thank you for sharing!
Very clever! Be interested in seeing some litmus tests from this to see how well it performed in all the email clients available.
Here you go https://litmus.com/pub/6fff936/screenshots
The email is broken in Lotus Notes 6.5 and 7 because it is Lotus Notes. Gmail App (android) is less broken but due to how I marked up the nested tables in the header. With the exception of BlackBerry 5 OS, everything else is solid.
Support for the hamburger menu expanded is identical. I would share but I do not know how to publish version 1 of the test.
This would be awesome if you shared the email via Litmus Builder. It will automatically create a Litmus test for you and an embed link that you can embed right here in the Community. Here's a video tutorial on how to do that.
I didn't know that - thanks!
Mate, that is awesome.
Thanks for sharing!
Great work on the menu Jerry!
However, was having issues with hamburger menu content disappearing on desktop in Outlook.com and Office 365. Once I removed the <input> that triggers menu visibility the content shows up again. Thoughts on how to get those email clients not to freak out over the <input> tag?
I think this is what you are experiencing. http://freshinbox.com/blog/outlook-com-alters-styles-of-elements-next-to-checkboxes/
Yes indeed, thanks for the quick response!
This is awesome! I used the checkbox hack to create an interactive tour for our Litmus Builder launch email. Great to see others using this method for other purposes. It's a pain and complete hack, but lets you create click events in CSS. I'm writing up a blog post on it soon.
One thing that might help you in the future for non-media querying clients is to hide the by default (which you did) but turn them on only for clients that support it. For instance, you might want to use
@media screen and (-webkit-min-device-pixel-ratio: 0)to just turn it on for WebKit clients or similar. There's a lot you can do with targeting that way and not having to rely on simple width breakpoints. I wrote more about that technique here.Here's the email showing off the checkbox hack we used:
WOW - I do not know how you survived that email. Good job!
It appears like you moved the check boxes offscreen as opposed to hiding them like I did. It's nice to see multiple implementations to accomplish the same. With that said, I am looking forward to your blog post.
Jerry, is it possible to add in something other than the hamburger? Maybe "Menu" for instance? I found that it adds extra padding at the top in outlook clients.
I don't see why it would not be possible. Just replace the
<b></b>tags inside the<label>with your choice of text or element. The label itself is padded 25px. To remove, look for the*[id]#mobile-labelselector in the media query. If you share your code via Litmus Builder I can take a look at it.I removed the padding. It still shows up in outlook. Also for my code, I was able to use the hamburger menu twice in the email. One for the menu and another to hide disclaimers in mobile (which comes in handy if you don't want to scroll too far).
I pulled your code and sent myself a test email to Outlook 2010. The email looks fine to me. Are you referring to the black space above the white header where the logo and phone numbers sit? If so, I think that is out of our control as Outlook hard codes that in. I am certainly not an Outlook guru so someone else may be able to help you out here. It's not a 'hamburger' issue :)
On another note, I noticed that you are using a background image for the menu link. I would try to use pure text/html.
Good idea for the disclaimers! I work with Credit Union's and disclaimers are always stuffed in the footer of their emails. I may roll out this technique for that use case.
I tested it to myself in Outlook 2010. At the top there's a white bar above my header. Right above the nissan logo. I don't mind the black bar.
Hey Alyssa,
It looks like the label is adding the whitespace. Remove it using conditional comments;
Thank you so much! I've been trying to figure out the cause for months! Didn't get rid of it in yahoo but I'm going to try out the new media query for yahoo and see if that works.
Ah Yahoo! removes inline display:none put this in the style block
Let me know if that works!
I actually tried that same yahoo display:none; fix today and it worked. Thanks for the reminder Justin!
Jerry this is an amazing build and I bet you put a lot of hours in it.
Displays perfect in the native email on Android, BlackBerry and iOS, terrific job! However I noticed it breaks in OWA (Outlook Web App) and eventually you may want that covered especially for corporate emails - the client may open it in browser. My guessing is that the bug is related to some hidden content.
Curious to see if Kevin's solution (moving the hidden content out of the visible area) it's fixing it. Again, terrific job, congrats.
Hey Vic,
Just curious what you're seeing. I tested it as well on OWA (Office 365) on Chrome/Firefox/IE and it looked fine to me.
-- Justin
"Start the new year right and get..." this is the text that shows from top to bottom on the left side in OWA, Chome, Win 7:
http://oi57.tinypic.com/sp9pb8.jpg
UPDATE: it seems what is showing in OWA is the preheader DIV. I removed it and it all looks great now except the APPLY NOW blue button - can be replaced with an image. What interests me is the drop-down mobile menu and that works absolutely great. WOW, this is an amazing job! Thanks again for sharing with us Jerry!
Thanks for taking a screen shot.
The email has been tweaked since I first posted and the leaking pre-header was patched. I discovered similar behavior while testing on a few webmail clients using IE7! Could you retest using the most recent codebase?
The pad less Apply Now button is a design decision that I am sticking with. I decided to pad the A tag instead of the parent TD to give mobile clients a larger tap area. A few non-conforming clients (i.e. Lotus) do not honor padding on the A tag and display the button as seen in your screen capture. Litmus also follows this design in their emails.
Hey Vic,
How exactly is it breaking? I have a hunch that it is unrelated to the hamburger menu implementation and due to the way I marked up the top menu options. Android kitkat dropped support for display:block on TD elements which forced me to use side-by-side tables with the align attribute. Outlook Desktop didn't approve so I had to hack in TD elements via conditional statements.
This is clearly a shot in the dark here. I guess it's time for me to install and test on OWA to see it for myself.
Jerry, this is fantastic. VERY nice work.
Thanks for sharing it!
Has anyone tested a drop-down menu such as this, vs a standard static navigation bar?
I'd be interested if anyone has any results.
Hi Jerry,
This is great, but is it possible to get it working outside of email Apps, so in desktop email clients? I can't get it working in outlook or Gmail on Safari and Chrome.
I retested Jerry and the preheader still shows up. I know what the issue is, you cannot hide content in OWA - I researched and did everything I could for my emails and I'm yet to find a solution. However Kevin's proposal (moving the content we need hidden outside of the visible area of the email) sounds promising if works - will have to test that.
My experience with Outlook 365 is that it messes up the use of visibility: hidden, but not display: none. So I use display: none to hide content
Thank you for sharing all your hard work. This just became my new favorite email hack.
Have any of you found a workaround on this little issue in androids native email client?
When collapsed the email looks like I expect. Look at this: https://www.dropbox.com/s/3su4g2u5sp0fi85/Screenshot_2015-08-25-11-11-59.png?dl=0
When open the email hides behind the client frame, which I think is an issue because often the unsubscribe is hidden. Take a look at this: https://www.dropbox.com/s/eu63usinsnrdkcv/Screenshot_2015-08-25-11-12-08.png?dl=0
Only workaround I've found is to make padding in the bottom of the email in order for the content to expand properly.
Where would I find the code sample for this? All the links in the comments are broken.
Here you go: https://github.com/jmwebservices/code-hamburger-in-email
Hi,
I've been successfully using the hamburger menu in emails since the start of the year, but in the last week I've noticed that it no longer displays correctly in the default Mail app on a Samsung Galaxy S5, instead displaying the same as on desktop.
Anyone else encountered this problem? Or know a workaround for it?
Thanks!
I'm seeing my hamburgers just fine. Tested on Samsung Galaxy S7 running Android Marshmallow (6.0.1)
Hi, what Android OS do you have? By chance is it Android 4.4? If you had a link to your code, that would be helpful as well. :)
Hi,
Thanks for the replies. I don't have the code handy, but it's been working for the past year. I've noticed that there's a few other emails arriving that aren't displaying correctly, so perhaps media query support has been affected.
I'm running Android 5.0.
Cheers
Hi Geoff,
I believe starting with Android 5, there was no longer a native email client included, and Android suggested using the gmail app.
Is that what you're using?
If you could provide the code, it would really help to troubleshoot (I'd love to help). You can use either http://codepen.io/ or http://jsfiddle.net/ to host your code online so we can all take a look. I've done a few emails at work that use a hamburger function and it currently works for iOS devices while defaulting to a non-hamburger email on gmail.
EDIT It also looks like there was a temporary problem with gmail and interactive email techniques that has since been reverted. Not sure if that is what is occurring, but it's worth checking out: http://freshinbox.com/blog/gmail-reverts-interactive-email-disabling-change/
Hi guys,
Thanks for the replies. I'm running what I thought was the native Android Mail app, although it might be the Samsung Mail App, basically the Email app that's shown here: https://www.dropbox.com/s/49rnbf3jg7ui484/Screenshot_2016-07-18-08-36-18.png?dl=0
I don't think this is an issue with the Hamburger menu anymore, as the majority of emails that I'm receiving that used to be responsive are displaying as if on Desktop (https://www.dropbox.com/s/c9lc8n7btibc080/Screenshot_2016-07-18-08-36-35.png?dl=0 & https://www.dropbox.com/s/dugdrbxzec8ai5z/Screenshot_2016-07-18-08-36-38.png?dl=0), so think this is more an issue with the app itself.
If anyone does know what's causing this that would be great, but looks like Android or Samsung have made changes.
Code can be found here: http://codepen.io/TheGeoff/pen/xOYObV although images are normally added as a .zip so aren't displaying.
Thanks!
Hi Jerry,
http://www.jmweb.net/code/hamburger-in-email/ doesn't work. Can you please repost?
Here you go https://github.com/jmwebservices/code-hamburger-in-email
Just updating the URL as the destination has moved: https://github.com/jmwebservices/code-hamburger-in-email
That's brilliant - Very good work Jerry! Quite impressive. I recently checked out how many companies are taking a step further to incorporate menus in email and I found this blog from EmailMonks which might be useful to you - http://www.emailmonks.com/blog/email-marketing/we-make-impossible-possible-introducing-menus-in-email/ Having interactive CSS navigation in email will certainly be a value addition to many industries. Stacking up content is one major challenge in the old fashioned emails which now gets eliminated with menus.
Have you followed up on your email to see if it works on iOS9? I'm having problems with collapsible panels that I created from modifying your code for the hamburger menu. I'm in the process of troubleshooting (waiting for iOS9 to download on my iPad) but thought I'd check here first.
Are you using the general sibling selector(~)? There's a bug in iOS9 that comes with a wierd fix.
http://freshinbox.com/blog/android-css-general-sibling-selector-bug/
Yes, good guess! I should have been more specific.
Thank you for the bug link!
My fix also worked (instead of general sibling selector, I chained about 3 adjacent selectors "+") but I'll play around with that suggested fix.
I have not. I have devices with iOS7 and iOS8 but I have been stalling on the iOS9 update. Let me know how it works out. It may entice me to update.
Thanks, I'll give it a go later today to see how iOS handles it. My problem came up with using general sibling selectors (~).
Here's my codepen with collapsible panels if you wanna take a look/use for any projects: http://codepen.io/WebDevJoshB/pen/qOmZRx
Caveats: I don't have the Outlook app on android nor iPhone to test on it (it's not a platform we support so was told not to worry about it), so I can't guarantee it works on it. And I won't be able to test on Android 4.4 (Kitkat) to see if it works there either.
We have super, super long emails (newsletters) that on mobile have almost endless vertical scroll, and I wanted to come up with a way to reduce that. The closest I'd gotten it to work was using a series of :hover, :active, :focus and adjacent sibling selectors, but a) you could only have one panel open at a time, b) you couldn't have a panel opened as a default, and c) it proved a UX issue when you opened the email in a browser.
Your hamburger menu helped immensely! It never occurred to me to try using a checkbox.
Does anyone have a current link to the code? The site referenced in the article seems to have been hijacked by a credit reporting company.
Hi all! I'm wondering how I would go about making this button appear for all screen sizes, not just mobile. Can anyone help?
Try inlining all embedded rules associated with
#mobile-labeland its children (the<b>elements). Since you want to show the button in all clients, you probably want to move the#mobile-checkbox:checkedrule outside of the media query. Keep in mind that the displayed button will not be functional in clients not supporting embedded stylesheets.