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!
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:
|
1 2 3 4 5 6 |
@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 CSS:
|
1 2 3 4 5 |
@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.
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.
|
1 |
{background: url('images/why@2x.png') 50% 50% no-repeat; background-size: auto 32px;} |
|
1 2 3 4 5 |
<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.
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:
|
1 2 3 4 5 6 7 8 |
<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> |
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.
|
1 |
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:
|
1 |
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!
