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:

@media all and (max-width: 550px) {
 /*Styles in here*/
}
@media all and (max-width: 400px) {
 /*Styles in here*/
}

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:

@media all and (max-width: 550px) {
 a[class="browser"] {display: block; width: 80%!important; border-radius: 5px; background-color: #f5f5f5; padding: 6px; margin: 7px auto; font-size: 12px;}
 td[class="date"] {font-size: 12px!important; opacity: 0.5;}
 img[class="social"] {width: 20px!important; height: 20px!important; margin-left: 20px!important; opacity: 0.5;}
}

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.

{background: url('images/why@2x.png') 50% 50% no-repeat; background-size: auto 32px;}
<tr>
  <td height="32" style="font-family: Arial, sans-serif; color: #009bd5; font-size: 21px; text-align: center;">
  <center><img src="images/new@2x.png" width="600" height="32" alt="New on Codecademy" style="-ms-interpolation-mode: bicubic;" /></center>
  </td>
</tr>

[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:

<table cellspacing="0" cellpadding="0" border="0" style="border-radius: 2px; background-color: #009cd5; border: 1px solid #0089ce;">
 <tr>
  <td style="padding: 8px 15px 8px 15px; font-family: Arial, sans-serif; color: #ffffff; font-size: 13px; text-align: center;">
   <a href="#" style="text-decoration: none; color: #ffffff; text-shadow: 1px 1px 0 #006f97;"><b>Learn Python &rarr;</b>
   </a>
  </td>
 </tr>
</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.

a[class="footerLinks"] {display: block; width: 80%!important; border-radius: 5px; background-color: #f5f5f5; padding: 12px; margin: 15px auto!important; font-size: 12px;}

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:

a[class="textLinks"] {border-radius: 2px; background-color: #e6f2f7; padding: 10px; font-size: 14px;}

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)

About Nicole Merlin

I'm an HTML email designer and developer from Melbourne, Australia. I love email, design, typography, calligraphy and curling up with a book.

  • Pingback: June 2, 2013: Weekly Roundup of Web Design and Development Resources

  • https://twitter.com/JackFilose Jack

    Hi Nicole,

    Nice case study! Thanks for sharing your process.

    Thought I would share a solution I’ve come up with for buttons in HTML email (with some help from my good friend Matt Harris http://www.thirtytwodigital.co.uk/).

    The basis idea is adding padding to the button by applying a border to the tag rather than applying cellpadding to the parent table. E.g.

    Read More

    You can then include this style in a media query to force the button to expand to 100% width for smaller devices (obvious ergonomic benefits):

    @media only screen and (max-width: 600px) {table[class="button"]{width: 100%!important;}}

    I have tested this technique in Outlook 2010, Gmail, Outlook.com and on the native Android/iOS mail apps and have yet to encounter any issues. Would be interested to hear you think it’s a viable solution.

    Example here: http://www.siftmedia.co.uk/files/Jack/MYC_email.html

    Cheers ;)

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hi Jack,

    That sounds like a great idea! I’m excited to give it a shot — looks like it could really solve my problem! Thanks so much for sharing.

    Cheers :)

  • https://twitter.com/JackFilose Jack

    So that stripped out the code I tried to share… But you can just inspect the example at the bottom :)

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Ah yes. WordPress is a bugger. I inspected the link you included, it’s fine :D

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hi again Jack, that fix is pretty awesome.

    It breaks in Windows Phone and Lotus Notes 8.5 though, but that’s not to say it can’t be fixed! When I have a moment I’ll devote some more time to trying to make it bulletproof and if it can be then this could be a brilliant method for buttons!

    Ran your actual file through Litmus, hope you don’t mind:
    https://litmus.com/pub/30265c1/screenshots

  • Joe

    Hey, this is perfect timing. I’m in the middle if researching responsive emails for work, your article is definitely going to be a reference, and possibly Jack’s code too one I can look at in the office (on the bus going to work now). Hopefully you can document more of your work with rd emails :-)

  • Razvan

    Hi,
    I’m just curious, is compatible all the code with all mail clients?

  • http://www.mathewporter.co.uk Mathew Porter

    Nice to see the processes used by people for email solutions and gauge some ideas of what and how to create a better template due to the limitations faced with support in email clients. Thanks for sharing.

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Thanks Joe! I sure will keep documenting it.

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    It sure is, with the exception of Lotus Notes 6.5 and 7. I tested in everything using Litmus.

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Thanks Matthew!

  • Pingback: Getting Started with Responsive Web Design - ProfHacker - The Chronicle of Higher Education

  • https://twitter.com/JackFilose Jack

    Hi Nicole,

    No worries, test away :)

    Unfortunately, we discovered other problems with the above fix. Namely in Outlook 2010 (I know… I was lying when I said it worked – oops!) – the border that we applied to the a tag instead of padding isn’t actually clickable in Outlook 2010. This is frustrating because on mouse-over you do get the pointer cursor that usually indicates a clickable link. However, clicking on anything other than the actually text does not take you through to the landing page (this is probably more harmful as users might assume that the link is broken). We haven’t had much time to look at a fix but if we find one we’ll let you know! Cheers

  • http://www.responsive.dk Rasmus Bidstrup

    First of all, great blog!
    Another subject you can talk about regarding the responsive emails is, 2 or 3 columns to 1 column. Or maybe background images for responsive emails. Say if you any help with these subjects :)

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Thanks Rasmus! I’m definitely working on lots more content in regards to responsive emails and things like background images — I’ll hit you up for your experience! :) Are you on Twitter?

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Ahaa, that is annoying! Damn Outlook. That’s okay, between all of us I’m sure the button debacle will be solved one day soon :)

  • Brian Blank

    Great explanation! I am in the process of designing my first responsive (and first HTML) email template and found this helpful. However, I am not proficient on HTML or CSS coding and find that looking at the source code I can make the connection between the code and how it looks. Do you have a version of this in HTML I can peek at to try and learn? Trying to do something similar with the “Open in Browser” bar/button and social share buttons.

    Thanks!

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hey Brian, sure thing! There are some web versions of this actual email out there, but if you contact me I can email you the latest file. I made some updates so that it would play nice with the new Gmail on Android which does some pseudo- media query support stuff.

  • Marcos Paulo

    Hi Nicole, good morning.
    This solution renders good in all e-mail server, as Yahoo, Hotmail and Gmail?
    I also look that you used the css style in header and i’ve learned that it doesn’t work in newsletters, i must use css inline. Could i use css declared in header? Could i use div inside TD elements, like the button you talk about?

    Thanks for your attention (and patience ;D)

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hi Marcos! Yes, this solution renders good on everything, including all the webmail clients.

    CSS in the header is okay for the Media Queries because you only need smartphones to read them, and they will happily read the CSS in the head.

    You can also put CSS in the head if you are going to send via a service like MailChimp or Campaign Monitor who will pull all your CSS inline when you send it. You can also run it through a ‘premailer’ before you send (such as premailer.dialect.ca; I don’t like to do this though).

    You can definitely experiment with using DIVs inside TDs! It’s just not a great idea to use DIVs for layout. But for small areas you can try using them.

  • http://Codesquire.com Loran

    Hey, awesome read. I am very interested in how you center your “alt” text. For me it always ends up top left. You described at the end that you did it but not how. Care to offer up your secret?

    Thanks!

    Loran

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hey Loran! I just apply text-align: center to the TD that contains the image.

    Any styling that you add to the container cell will be applied to the alt tags inside it.

    Bear in mind when you style your alt text: if the alt tags are really long, a few clients (like Live Mail, Outlook 2003 and Express) tend to render them all in one line and it causes the table to blow out. Annoying, I know. But that was in a trial I did with really really long alt tags.. 30 words or so.

  • ravalde

    Thanks brilliant – can I ask a question I have large gaps above and below images only in android gmail ive tried nearly everything to get rid of them including display block. can anyone help

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hi ravalde, do you have any screenshots or code you can share? Email me if you like, nicole (at) emailwizardry.com.au.

  • horsemanager

    Very interseting. i have the following in my template #link#.

    ACTIVATE NOW

    And in my phpmailer form i have this

    $a_link = ”

    *****ACTIVATION LINK*****n

    http://$host$path/activate.php?user=$md5_id&activ_code=$activ_code

    “;

    $link = $a_link;

    $emailBody = str_replace(“#link#”,$link,$emailBody);

    how to do iget the link to the button.

  • quared

    What about Gmail for Android?

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Yep, I ensured that this renders well even on Gmail for Android, where it shrinks the outer table to 100% (but ignores all the media queries).

    With that, I found that it’s really important to explicitly set your td widths to be 100%. That helps things that are aligned to the right, stay on the right.

  • Wow

    Hi Nicole

    Can you share a demo html ? i m new to html n css and lit bit confused :( plz if you can

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hi Wow, I am just finishing up a proper tutorial for Tuts+ which I will share in the next week!

  • Daniel Méndez

    very interseting

  • Gaurav Sharma

    But where have I to put the CSS…..?

  • Gaurav Sharma

    in email the css should inline coded in html… then how will media queries work… please provide a solution….

  • Gaurav Sharma

    could you please provide a working example… please……

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hi Guarav, you need to inline all your CSS, but do NOT inline the Media Queries. You can leave these in the head of the document, and only those devices that can read Media Queries will read them. Everything else will ignore them.

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Hey Guarav, if you’re feeling confused perhaps try my guides over at Tuts+ — they should help. http://dev.tutsplus.com/series/mastering-html-email–webdesign-17696

  • Gaurav Sharma

    thx…… you rocks…..

  • Vishal Shinde

    Thanx Nicole…