The absolute easiest way to beat blue links in emails on iOS

Over the years I’ve used lots of different methods for banning blue links. As with every method I use in email development, they gradually get simpler and better as time goes by.

Never has that been truer than about fixing the issue when dates, addresses and phone numbers are automatically linked on iPads and iPhones but they are styled with a default blue underline that looks terrible in anything except a personal text-only email.

Fixing this used to involve wrapping things in spans or adding classes, but that is annoying and also not helpful when you’re coding a reusable template since the added text will routinely include numbers, addresses and dates.

These days, I fix this by targeting the x-apple-data-detectors property that is added to these automatic links and setting them to simply inherit the styles around them.

And that’s it. If there are any other properties you want them to inherit, just go ahead and add them.

Au revoir, blue links!

I came across this trick viewing a source on an email a while ago, so I’m not entirely sure who I can credit for it, but there is more on the method here and here.

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

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!

Media Queries in HTML Email: Cover all your bases

This post is pretty old and probably no longer relevant. I’m keeping it online for posterity but you no longer need to bother with the techniques listed here. I no longer use max-device-width or min-device-width at all in my media queries, relying solely on max-width and min-width.

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.

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)

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.

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: