The unfolding email experiment

Last weeks #EmailWeekly had an extra little feature, just for iPhone users. A few people spotted it, like Justin from Freshinbox:

So what is this? And how does it work? What is the story?

Well, here goes: it’s a really simple idea. When preparing for my #TEDC15 talk at Boston, it got me into thinking about the UX of opening an email. My talk was about image blocking and essentially, when images are turned off by default, it does create a strong case for the existence of “a sort of fold” as recipients are unlikely to scroll before enabling images (so put your pixel art at the top!). However, in general and on mobile, it’s clear that there is just no fold, only scroll (#EmbraceTheScroll).

whatif-v2Then I thought – what about if there was no fold OR scroll? Could I collapse the email and then get people to jump into the browser earlier? All this interactivity in email got me thinking, how do I get users into the browser quicker?  SUPER ironically on the same day as I got this working, I watch the Apple keynote about “peek and pop” which forced my hand a bit. Peek and pop means using a gesture to “peek” at the content and the “pop” right in. Will be interesting to see how this affects (and ultimately I predict won’t affect good) email design.

Before all this, I had been wondering about how conversations get “bundled up” by the iPhone, and if I could apply this concept to an email and create like a false thread. I wrapped the email in blockquote and that was it, well it wasn’t quite so plain sailing - a fair bit of good old fashioned trial and error happened – but basically that’s it. I use hide and show to reveal the footer content after the collapsed email. It was getting all rather Alice in Wonderland with the “pull me” and “read me” but the idea of an emotional transaction being added to the opening of the email; a “sense of investment” (as we were told at Direct Marketing school) was too good to miss.

As a bonus it meant we could target the pre-header to suit, hence: “go on, go for it!” This added to the fact that one might have to persevere with it a little. The reward was a strong cta to open the email right away in the browser (the best place for an email ever) just incase reading an email in reverse isn’t your thing, I appreciate it could get tiresome.

It was shipped a little rough, as proof of concept - been thinking and learning about being upfront, early, transparent & altruistic with my own work, it’s a sharing and caring community after all – but with some proper targeting and some styling, I think people could get rather creative with this concept.

We have a short window of opportunity before new iPhone comes along and probably changes everything, but it was a fun experiment anyway. Thanks for taking part one way or another. This is why making emails is great.

 

  • Niven Ranchhod

    Was a little confused when I opened on my Android. Got to work and pulled your source code and sent it to one of our test iPhones. The team and I had a little geek out over it.

    Brilliant work!

  • http://www.amelielamont.com Amélie Lamont

    This is awesome! Kind of hoping it does’t break in iOS 9 but… ¯_( ツ )_/¯

  • http://labs.actionrocket.co/ Mike Ragan

    Thank you Niven! Great to hear :)

  • http://labs.actionrocket.co/ Mike Ragan

    Cheers Amélie! I’m hoping that too so we can have a bit more fun with it… but yeah, we’ll see…

  • http://time-wellspent.com Jaina

    I was so confused when I saw everyone geeking out over this email. I just wasn’t seeing it! Now I understand.

    Attaching an emotional attachment to the act of opening an email and transferring it to an action is clever! I like the idea of bringing the physical act of opening something to the virtual. Great proof of concept, Mike.

  • http://labs.actionrocket.co/ Mike Ragan

    Cheers Jaina! I love that there’s always new stuff to do in email, it never really stands still.

  • Pingback: Email is Better—Thanks to These Email Developers – Email Marketing Vision

  • Pingback: Les ressources du Web #20 – Amine MAGDICH