Hamburger 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://www.jmweb.net/code/hamburger-in-email/