Creating a Responsive HTML Email Newsletter for Codecademy

Codecademy HTML Email Newsletter in Android Mail

Note: This article has been updated to include information on revisions that were applied to the template after seeing how it performed and how it was being used.

I recently had the pleasure of converting Codecademy’s monthly email newsletter into a responsive one. I thought I would share the process because it is a nice example of creating a responsive template from an existing newsletter without redesigning the desktop version.

The Desktop Template

This is the Desktop template that I created which is almost identical to the original supplied files from Codecademy. The only change that I made was switching the view online text from ‘Email looking funny? Let’s try it in your browser.’ to ‘View this email in your browser here.’ This was changed simply to keep it positive since sometimes this text can sneak into the preheader if the actual preheader isn’t long enough. It also suggests that we’ve made a quality email and people can view it in their browser if they need to, rather than suggesting to all that we’ve built a faulty email!

Click to view at full size

Setting the breakpoints

This design actually has three ‘breakpoints’ or set sizes at which a certain layout displays. There is the desktop design, then there is an in-between size where the tiny text links (in the header and footer) turn to buttons, but the main call to action buttons are not full width. Finally, there is the smaller mobile size, at which the main buttons are full-width.

I do this because I like my layouts to be flexibly responsive and take up the full width of whatever device they are on, but there is a point at which it looks ridiculous to have full-width buttons (anything over 400px). This is as easy as setting up two sets of media queries:

Creating a mobile-friendly header

On mobile, I wanted the date to be big enough to read, and the social media icons to be big enough to see and far apart enough to tap comfortably. Even though I wanted them bigger,  I didn’t want them to overpower the masthead logo and name, so I was able to take advantage of the fact that mobile email clients support the opacity property which I set to 0.5. I also created versions of the social icons a 2x their normal size so that they would look great on high resolution smartphones. I also styled up the ‘View this email in your browser here’ link so that it would turn into a nice, big tappable button on mobile.

The social media icons are enlarged on mobile

The CSS:

Creating the headings

Version 1

I wanted to keep the swirly dashed headings, but avoid them just scaling down on mobile — they would be tiny and the text would be illegible.

Left: Desktop, Right: Mobile view
Left: Desktop, Right: Mobile view

To solve this problem, I created a style in the media queries that set the header image to display: none; and then applied that same image as a background image on that same cell. Using the code below in the media queries, it was positioned in the centre but maintained its height. This meant that as the cell got narrower, it would just obscure the edges of the images. I also saved them out at @2x their size so that they would look nice on high resolution screens.

[It turns out that we need a more flexible method for the headings because they actually need to change every month. I’m in the process of developing a hybrid image/text solution for these headings.]

Version 2

It turned out to be much more versatile (and simpler) to have plain text headings so that these can be changed every month. You can’t argue with simplicity!

Creating the buttons

The buttons were a tricky point. (I still haven’t found a method of creating buttons that I am 100% happy with because each method has its pros and cons.)

Version 1

For the first version, I used Stig’s Bulletproof Button Generator to create the buttons so that they rendered well in everything, including Outlook, and the clickable area covers the entire button (not just the text). The trade-off is the fact that using this method means the entire button will appear in the inverse colour on click in Outlook (see image below).

The alternative was to create buttons that LOOK like buttons, but where only the text is clickable/tappable, so the active space is smaller and they can feel a bit weird to use. It’s a quandary!

This is a problem that I hope to fix in a new version of this template as, even though the majority of subscribers are on mobile devices, I still don’t think it’s ideal if it isn’t perfect.

When using a fill in VML as a link, Outlook will invert the colour of the shape on click

Version 2

In the revised version of the template, I switched back from the generator buttons to  this simpler style of button with a smaller clickable area. On mobile, I add some padding around the text to make the buttons larger and this means that when you tap on them, a fairly significant portion of the button does appear to be active. On desktop, you need to click on the text, but accuracy is much easier on a desktop using a mouse pointer.

Each button is its own little table:

The result.
The result.

Easy-to-tap footer and text links

I added some media queries to bump up the size of the footer links and turn them into nice, big comfortable buttons.

I also turned the text links in the copy into easily tappable buttons on mobile as I think that text links can often get quite lost on mobile. The code is so simple to do this, that there is no reason not to:

Optimising the Alt Tags

Finally, I optimised the alt tags for the best possible experience, even with images turned off.

Some email and webmail clients simply display big ugly grey boxes instead of images (Outlook.com/Hotmail) and some show gaps with little icons and no alt text (Outlook) but some clients do have very nice alt text display which makes it worthwhile optimising your alt tags for when images are turned off.

Below is a screenshot of Gmail in Firefox with images disabled. (This is arguably the best case of alt tag display.) Where appropriate, I centred the alt text, made it the same colour as the headings and bumped up the font size so that it was clearly legible. For the tiny Facebook and Twitter icons, I made the alt text a “t” and an “f” that are still almost recognisable as social media icons. Voila! A usable email, even without images loaded.

That’s a wrap!

Codecademy are such an awesome organisation doing such brilliant things and I was very honoured to be a (tiny) part of what they do. Thanks goes to Karen at Codecademy for being such an awesome sport and for sending me such fantastic Codecademy goodies that I now wear with pride!

Litmus Screen Grabs: Android 2.3 (top), Android 4.0 (Below Left) and Windows Phone 7.5 (Below Right)

Email news this week: Twitter cards, Tabbed Gmail inbox, Triage for iPhone

There were quite a few things of note going on in the email world this week.

Gmail unveils new tabbed inbox

First up, Google unveiled its new inbox design which features tabs for separating personal mail, social media stuff, updates and promotional email.

Image from Mashable
Image from Mashable

Google announced the new look on its Gmail blog and says that it will be rolling out the update “gradually” on the desktop. Updates for iOS and Android will be available in the next few weeks. Users that don’t want the new look on the desktop can switch back to the classic view. — Mashable

One on level, this makes it easier for people to ignore email newsletters that get routed to the ‘Promotions’ tab, and it also strikes me as a little weird that the algorithms have been created by Google and you can’t edit them in any way. However, it could also mean good news for email marketing, as users won’t be so overwhelmed by their email, and may wish to happily sort through their Promotional email at a time that suits them. As Co.Design‘s Kyle Vanhemert wrote:

“Today, though, our inboxes are choked with a different sort of spam. These aren’t scams and supplement ads but messages we might actually want to read at some point–things like newsletters, catalogs, daily offers, and social media status updates. They don’t require our immediate attention, but they may be of value to us. This isn’t spam, exactly. In many cases, we asked to receive it. And it’s not entirely useless stuff, either–among those dozen unread Living Social emails, there’s a chance that there might be a really good one. Which is precisely why we leave the things sitting there, unread, to be processed later.”

Triage

Triage is another development reflecting the myriad ways in which we’re trying to figure out how to deal with our email.

Image © MacStories

Triage is an app that is supposed to complement your existing email app on iPhone. It’s simply a tool for sorting your email before you actually process it properly and it only has three actions: Read, archive or keep unread.

With Triage users are therefore flicking very quickly through their emails and deciding which ones to kill and which ones to keep. So what does it look like when you get to marketing messages?

Well, the first thing I noticed is that they take AGES to load. Lots of time was spent waiting and waiting.. and nothing loads. But you can still sort emails which means many might get sorted based on subject line and sender name alone.

The second thing is that it only displays the text-only version of your email — some of which, I noticed, are not really great.

Finally, it only displays a line for the Sender and a single line for the Subject plus a tiny box for the content, so there isn’t really much room to shine in this environment.

Only plain text is rendered in Triage
Only plain text is rendered in Triage

So if apps like this take off — and I did actually find using it really enjoyable — then we need to start paying even more attention to

  • sender name
  • subject line and
  • text-only version

Twitter cards

Finally, from a subscriber angle, Twitter has introduced lots of different types of ‘cards’ that essentially turn tweets into posts containing video, images, galleries and other features common on other social media platforms.

An interesting one for email marketing is the lead generation card, which allows users to do things like sign up for daily deals, right from within a tweet.

 

Twitter says:

When someone expands your Tweet, they see a description of the offer and a call to action. Their name, @username, and email address are already pre-filled within the Card. The user simply clicks a button to send this information directly (and securely) to you.

At the moment it’s only available to their managed clients but they are apparently looking to expand the service to small and medium sized businesses soon.

Mid-Week Email Design Inspiration: Typecast

I can’t actually afford to use Typecast, but I love their service and I adore their emails.

Their latest email is no exception; lovely design, beautiful web fonts and the content is excellent.

Screen Shot 2013-05-14 at 10.05
Desktop view (in Gmail/Chrome)

Mobile View

The webfonts look lovely on mobile

I really like the amount of whitespace that is used across the design. The vertical rhythm is spot-on.

Lovely use of whitespace and graphics
Lovely use of whitespace and graphics

Webfonts!

They have used a lovely webfont called Enzo Web Pro Bold.

Screen Shot 2013-05-14 at 10.48
Enzo Web Pro

They have used the @font-face method in its own <style> tag. All the other styles are within another style tag. This might have been an attempt at bug resolution with webfonts— as you probably know, this can be very tricky.

Unfortunately, this method does not work in Outlook and it displays as Times New Roman. I did a quick test to confirm (bearing in mind that perhaps their subscriber list is devoid of Outlook and also that I ran a test using the code in the Litmus Scope version which may not be perfectly accurate).

Screen Shot 2013-05-15 at 2.19.07 PM
The method above will cause the text to display as Times New Roman in Outlook 2007/2010/2013

I’m in the process of collating a huge batch of methods for incorporating webfonts because none of the methods for doing this seem absolutely bulletproof to me. I will share the results when I have them.

House Industries using scale and typography to excellent effect

House Industries do have a head start when it comes to designing their email marketing because they sell beautiful products. As creators of amazing typefaces and now lovely iPhone apps, their content basically sells itself.

They do, however, make awesome use of scale in their HTML emails which works really well across desktop and mobile without the need to code a separate responsive version. There are a few points in this email where that falls down (sadly), because the CTA becomes tiny and the body copy (what little of it there is) is part of the images and gets scaled down a lot too. If these two aspects were attended to, it would be a great example.

(I would also suggest, at the risk of being branded a fun-sponge, that their cheeky unsubscribe copy is in fact too cheeky.)

Check out my Litmus Scoped version of the email here.

House Industries' email

 

How does Sparrow render responsive HTML emails?

Further to my previous post, How does Mailbox.app render responsive HTML emails?, I had a suspicion that Sparrow app for iOS was also suffering the same affliction. I conducted a quick test to confirm that this is indeed the case.

Below is a screen shot showing how it renders the two methods; I’ll duplicate that code information underneath.

Sparrow's rendering of responsive HTML email

First method: using ‘align’ on tables

Second method: using “display: block” on <td>s

Here are the media queries:

Why creating beautiful, responsive emails is not a waste of time

Sometimes I have to explain why it’s important to spend the time and money on creating beautiful, robust, responsive HTML email templates—and this blows my mind.

To me, it seems obvious that well designed, well built emails should be what everyone is aiming for, all the time. To convince others, a graph is required.

Blue Hornet’s latest study, Consumer Views of Email Marketing (PDF), was a study of 1,000 US citizens who were asked about various aspects of email marketing. The results are in! These are my personal favourites.

1. People hate emails that don’t render well on mobile

What people do with emails that don't look good

2. People will indeed think less of you if your email is ugly

75% of consumers say a poorly designed email negatively affects their perception of a brand.

3. If you want to email everyone, you need to have something to say, and not want to say it too often.

Why Consumers unsubscribe

More on using webfonts in HTML email

Further to my previous post on using webfonts in HTML emailElliot over at Email Design Review has also recently posted about the process of using webfonts in HTML email.

The two most notable things that I learned from his post were:

  1. That Android will only display a range of fonts available on Android handsets (Droid Sans, Droid Serif, Open Sans), and
  2. That you can try wrapping your font import code in a media query to prevent Outlook from reverting all your type to Times New Roman.

He says:

…as usual, Outlook likes to get involved and throw a spanner in the works. If you use @font-face in HTML email, Outlook 07/10/13 will default all text back to Times New Roman. After a long time testing various fixes, we eventually found that wrapping the font import code in a simple media query hides this from Outlook, letting it get past the ‘Open Sans’ part and default the text back to the next font.

I am keen to give this a try and see if it is successful. It would be a good alternative to using the <font> tag for folks who aren’t able to do so (i.e. those using a template).

Lessons in using webfonts in HTML email

When creating an HTML email using a Google webfont, I found that it was rendering in Outlook 2007, 2010 and 2013 in Times New Roman. Even though I had a fallback of Arial.

Outlook was choking on the webfont (I tried both with and without quotes) and just disregarding the whole stack. To fix this, the <font> tag is your friend!

By adding the <font> tag with the face attribute, the issue was resolved. Note the double quotes to open the stack, and the single quotes around the name of the webfont you are using.

This fix is thanks to Jemiina’s post over at the Campaign Monitor forums. Also see Campaign Monitor’s guide to Using Webfonts in Email.

(Finally, thanks to Redferret for pointing out my mixed up use of tags and attributes!)

How does Mailbox app render responsive HTML emails?

Edit: As of October 2013, Mailbox no longer features full support for media queries. It has been patchy and problematic for the past couple of months, Mailbox are apparently aware of this but there is no known upcoming fix. For the time being, sadly, Mailbox simply does not support responsive emails.

Mailbox.app, the popular mail app for iPhone, only supports one method of responsive HTML email development.

Previously, I used both of these methods interchangeably:

First method: using ‘align’ on tables

Second method: using “display: block” on <td>s

Here are the media queries:

The results in Mailbox show that only the first method actually works.

It’s also worth noting that because of the extra background on Mailbox.app, emails display within a narrower 612px width (on a Retina display; 306 on non-retina).

Comparison of how each client renders responsive email HTML
Comparison of how each client renders responsive email HTML

Email Marketing LOLs

Today I received this images-off whopper from ozgameshop. It exploded off the screen in an amazing expanse of undefined table and image widths. A good reminder to set image widths or cell widths or table widths to ensure your email doesn’t look completely mental before people load it up. If it looks messy without images, people will assume that it’s going to be messy when it’s loaded.

email-marketing-lols