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:

  1. Design that is in line with their website
  2. Mobile responsive – duh!
  3. Retina images
  4. Pre header text for inbox goodness
  5. Bullet proof CTA’s
  6. Styled ALT text for disabled images view
  7. 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/