80% of success is showing up: Coursera’s brilliant re-engagement emails

Coursera Philosophy Course Email

I adore this re-engagement email from Coursera. Everything about it is great: the subject line and heading, the simple layout, the short copy, the awesome call to action. I found myself clicking Show up when I had barely finished reading the email.

The best thing about this email is how they frame their call to action: they make the cost of clicking through so incredibly low. All I have to do is show up? That’s so easy! I can definitely do that right now!

It’s a great reminder of how important it is to give people a super low bar to jump over in order to engage with your content, no matter what it is. If you ask a lot of someone in a call to action, their mind very rapidly calculates the cost in effort to be too high and will abandon the task. If you give them the world’s simplest task to do, you are giving them a quick win.

Coursera use similarly excellent tactics in a second follow-up email. Again, being asked simply to give up ten minutes of my time is a no-brainer. Coursera know full well that the most difficult part about re-engaging is actually getting started, so they are making it as easy as can be.

Needless to say, I am now all caught up on my course :)

 

Creating a two-column layout that is stacked and centred on mobile — WITHOUT media queries

While working Canvas, the beautiful new email builder from Campaign Monitor, we experimented with a truckload of different ideas and strategies for creating responsive emails. One method that I discovered was a solution for a problem that has really annoyed me for some time — how to create a two-column design that stacks to a single, centred column on mobile, all without media queries so that it works in the Gmail, Yahoo and Outlook.com mobile apps.

Finally I cracked it and I’ve shared the results over on the Campaign Monitor Blog. I hope it spares you as much heartache as it has spared me so far. Check it out here!

Two column design on desktop — centred on mobile

Templates in Use: The new Bookfari newsletter

Update: This article was originally filed under “Great Examples” however it turns out this is actually a template! I’ve changed the title to “Templates in Use” as I feel that’s more relevant . Template: Quinn Template by Nutzumi on ThemeForest. The truth was discovered by the ever-excellent Alex. TYVM.

Check out the recently redesigned Bookfari newsletter. Mega wow factor.

Bookfari Redesign

I love that it starts out with a quote and a fun fact before diving into the business of selling books. This is a nice way to reward readers for their attention by giving them something valuable and interesting first. As Jason Rodriguez writes in his latest ebook Modern HTML Email, “Don’t hit them with an ad right away.” Words to live by.

The mobile version is also pretty tidy with a few minor display bugs here and there. It’s built using what I called a ‘staggered fixed width’ responsive method — where there are a maximum of two or three set widths that are triggered at certain breakpoints. Here they have a 290px table (left, triggers at max-width 479px) and a 450px wide table (right, triggers at max-width 640px).

Bookfari's Responsive Design
Bookfari’s responsive design using staggered fixed width tables

If I was to make some suggestions, they would be around reducing the size of the text in a few places, like that hero quote. I think sometimes there is a tendency to overcompensate for mobile and go a little too large with text. People aren’t afraid to scroll, it’s true, but filling the screen with one section can sometimes be a little disorientating. I’d also be looking to create big, tappable links instead of only having the text linked on mobile. This can be achieved by removing the background colour/s on the cells that your links are in, and then applying that background colour to the link itself, with lots of padding. This will result in a big live area for tapping.

Content-wise, I’d try making the first CTA slightly more relevant to the copy; perhaps running an A/B test with “Enter to win” or something like that.

Anyway, check it out for yourself! I’ve scoped a copy at Litmus Scope and here is the online version. Here’s their October Newsletter for comparison.

 

 

The future of Media Queries for email

Yesterday at the Litmus Email Design Conference in London, Mark Robbins raised an interesting point that in the very near future email will need to adapt not just to mobiles and tablets, but also to much larger devices such as televisions.

The W3C takes into account the fact that devices are still proliferating with its latest spec for Media Queries Level 4, some of which are being slowly implemented by WebKit, but which we can expect to come into effect in the near-ish future (it is still an Editor’s Draft).

There are a few potentially exciting new types of media queries that we will be able to use, such as:

orientation

‘Portrait’ is triggered when the height is greater than the width, and vice versa

aspect-ratio & device-aspect-ratio

color, color-index, monochrome

A series of queries that assess the color output of a device, the quality of that output or the depth of monoschrome output. Useful for targeting colour screens as opposed to e-ink, for example.

resolution

A more specific way to target resolutions than simply with pixel-density

pointer

Whether or not a device is a touch-screen or uses a mouse — could be useful for ensuring touch devices have buttons for links, whereas devices with a mouse can feature smaller text links (although there are some potential issues with this since some devices allow both a mouse to be connected and interaction via a touchscreen).

hover

Whether or not the device supports hover

And finally, my personal favourite: luminosity

The values are:

‘dim’

The device is used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable to the reader. For example: night time, or a dimly illuminated indoor environment.

‘normal’

The device is used in a environment with a level of luminosity in the ideal range for the screen, and which does not necessitate any particular adjustment.

‘washed’

The device is used in an exceptionally bright environment, causing the screen to be washed out and difficult to read. For example: bright daylight.

Since all media queries are dynamic this allows for styles that will adjust to the user’s environment.. a higher contrast for bright daylight with a more subdued, lower-contrast colour scheme for dim environments.

Support for any of these is basically non-existent at the moment, but it’s an exciting look into the future!

SitePoint’s brand new website & email newsletters

SitePoint01

SitePoint recently redesigned their website and I was lucky enough to play a small part in the process as their email developer. I used Lead Designer Pete Bakacs’ designs and worked with the team to build a modular & responsive Campaign Monitor template for their newsletters.

The results are pretty spiffy, if I do say so myself! Check out the latest Design newsletter on Litmus Scope.

Screen Shot 2013-08-29 at 10.17.51 AM

 

Media Queries in HTML Email: Cover all your bases

Open Signal's visualisation of different device screen sizes — Android on the left, Apple on the right
Open Signal’s visualisation of different device sizes — Android on the left, Apple on the right

Update: Be sure to check the comments for further discussion where Lucas has suggested sticking with max-device-width alone, but pulling the media queries into the body of the email. This does also seem to fix the problem. Read the conversation for more.

These days it’s possible to hold a smartphone in your hand with a higher screen resolution than a computer. This can pose a small issue when using media queries since there are a few devices that can fit in your hand, but actually have way more pixels than your mobile design width.

What I’ve been using

In my experience up to now, it was best to use the following media query when coding HTML email, using 500px as an example*:

(I use screen instead of all to prevent any possible long-shot issues if an email is printed. It is potentially irrational.)

The reason to use max-device-width is because our old friend, Outlook.com on IE9, displays the mobile version of your email if you only use max-width (Such an amazing feature!).

*It’s a good idea to use max-width during development, so that you can easily resize your browser to preview the responsive behaviour.

Great. So what’s changed?

Well, now with all these new giant phones, they have a max-device-width of much larger — the HTC One, for example, has a physical screen resolution of 1920 x 1080. They ‘think’ their width is ~320px which means max-width would work, but we can’t because of the Outlook.com/IE9 bug mentioned above.

How to fix it? Easy! Just double up

The best way to fix this is to double up on your media query, and cover everything with a max-width of 550px, and a max-device-width of 550px.

I was concerned that Outlook.com/IE9 would still render the CSS contained in the media query because max-width is still there as an option, but it doesn’t. Thankfully, our problem is solved!

PS: This all originates from a bug I had with an HTC One displaying the desktop version of an email when using max-device-width. While plenty of smartphones have happily obeyed the max-device-width rule when they have physical pixel widths higher than their maximum display widths (the iPhone4+ displays at 320px wide when it actually has 640 physical pixels across), for some reason I haven’t seen this problem until testing with HD devices. Pixel density and media queries makes me go a bit woolly between the ears at times, so my assumption is that the HTC One ignored max-device-width because it has 1080 pixels to play with, but I could be wrong. If you know more, please jump in the comments!

The 2013 Litmus Email Design Conference

Screen Shot 2013-08-09 at 10.46.31 AM

I just made the extremely last-minute decision to fork out the dosh and attend the Litmus Email Design Conference in London in October! I am very excited to attend and mingle with all my email-loving mates from around the world.

If you also have impeccable taste and decide to attend the conference in London, I’ll look forward to seeing you there!

Great Examples: Code School’s beautifully responsive Summer Camp email

This has been a great week for email design! Look at this little beauty by Dan Denney for Code School, with amazing illustrations by Justin Mezzell. Dan has done a great job with the email build and it’s fully fluid, adapting to absolutely any size. All of the illustrations and text scale perfectly. (Unfortunately I don’t have a copy of the email that I could pop into Litmus Scope, but Dan did kindly share the code on Twitter!)

Click to view full size

The illustrations and colour palette all blend perfectly with the Summer Camp site which is also very beautifully designed. Brilliant! I just can’t stop using exclamation marks for this one.

I love these illustrations!
I love these illustrations!

Great Examples: Tinkering Monkey’s excellent responsive email

My buddy Niall sent me this fantastic responsive email from Tinkering Monkey and I absolutely love it. It’s really well designed, fits in so wonderfully with their beautiful website, and is fabulously responsive. It’s proof of what’s possible using the built in template editor over at MailChimp with a great design, great images and some clever customisation know-how.

Once I saw the email I immediately sent an email to Paula Chang, the developer at Tinkering Monkey who is also responsible for their lovely website. I asked her a couple of questions about the process and she kindly spared a moment to give me her thoughts.

What were some great resources or sources of inspiration that helped with creating your responsive email?
When I designed the HTML, I designed it to look as close to our website as possible (www.tinkeringmonkey.com). MailChimp gets credit for the responsive layout – they did an excellent job with their new email builder.

Were there any pitfalls or tricky aspects?
Didn’t really find any – again, MailChimp’s new email builder made it super easy.

Any other thoughts on the overall process of building responsive HTML email?
Keep the design simple and scannable!

Tommasso Font from the Lost Type Co-Op
Tommasso typeface by Eli Horn from the Lost Type Co-Op

I love the bold use of a huge header that then shrinks down beautifully on mobile. Sometimes people are afraid to use enormous type but I always think it’s a total winner, especially with such a short, punchy headline. This email also makes great use of the free typeface Tommaso which looks particularly good at large sizes.

Red text links are easy to spot

Using a contrasting red for links makes them very easy to spot as you scan through. Excellent photography is also a big help, and of course having lovely products in the first place doesn’t hurt!

Well done to Paula and the team at Tinkering Monkey.