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!

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:

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).

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