Twitter’s email notifications need a 5-minute mobile makeover

Tiny text on small mobile screensNot so long ago, Twitter started sending a new email to their users. If you're a Twitter user, you've probably seen the neat weekly summary of some of the topical things that have been tweeted by people you're following. To our delight, these notifications have been nicely optimized for mobile devices. But as for their regular notifications? The ones you most probably receive 200 times a day? Sadly, they're still unreadable on small screens (pictured).

Typically, we decided to do something about it. And we think Twitter's design team should take note.

In this mobile makeover, we're going to take the notifications you get when you receive a mention, or have a tweet favorited, then turn them into something tweet-worthy when viewed in iPhone or Android Mail, or any mobile email client that supports media queries.

Taming the tiny text

First of all, we wanted to approach the most apparent issue with Twitter's notifications - tiny text. The reason why the text looks so small is because the 710px wide layout in use forces the email client on mobile devices to zoom out significantly to view the entire width of the message. Let's address this with a media query targeting small displays:

@media only screen and (max-width: 480px) { ... }

If you've read much on mobile email design, you may know that you add these declarations to your <style> tags - the stylesheets within can only be interpreted by HTML email clients that meet the @media only screen and (max-width: 480px) criteria. So lets put it to use on adapting the layout here. First up, there's two tables surrounding the body of the email message:

<table cellspacing="0" cellpadding="0" border="0" width="100%">
	<tr>
		<td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">

We're going to bring them down to size by adding classes wrappertable, wrappercelland structure:

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable">
 <tbody>
   <tr>
     <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">

Now we have something to target, lets get to work with these classes in our media query:

@media only screen and (max-device-width: 480px) {
	body {
		width: 320px !important;
	}
	table[class="wrappertable"] {
		width: 320px !important;
	}
	table[class="structure"] {
		width: 300px !important;
}

The widths used above are significant, as on the iPhone in particular, the display width is 320px in portrait orientation. By narrowing the email layout to 320px, it will be viewed at 100% zoom by default - are you following me, camera guy?

Putting a harness on the header image

Now, the above technique would be all well and good if it wasn't for that infernally wide 'Twitter' header image. So we'll do something a bit crafty and split the header image into 3 images. Sections which don't need to be displayed in our new, narrow layout can simply be hidden. Here's the original code:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />

And here it is, with the header image in 3 pieces:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">

You may have noticed the class, logo on logo-left.png and logo-right.png. Hiding these bits is pretty straightforward - simply add the following to our existing media query:

img[class="logo"] { display: none !important; }

At last, we've got a header image and layout that's trimmed down to size on mobile screens.

Now, on top of the above refactors, we added some extra padding around elements and adjusted font sizes to taste. But ultimately, most of the major changes were achieved with a couple of lines of code and only a few minutes' work. The results speak for themselves:

After the redesign

Given that these are such easy optimizations with very little downside (except 5 minutes of time and effort on their part), we'd love to see Twitter do a good thing and make these fixes. After all, changes like we've just made on their behalf could potentially benefit millions of users, multiple times daily - why not help us pass on the message by sending a tweet?

Update Twitter have updated their notifications - view their updated email here. Thank you for helping us!

Alternately, you could make a slightly smaller group of folks happy by applying these optimizations to your own HTML email designs. Here's the code, free for you to test out at adapt for your own campaigns:

Download the code (zip file, 22kb)

If you have any questions, or can suggest other mobile-friendly techniques, let us know in the comments below.

Posted by Ros Hodgekiss

21 Comments

  • Jerad
    7th June

    Great tip. I’ve been looking to make our campaigns mobile-friendly. This will get us there with way less effort than I imagined.

  • John Macpherson
    7th June

    Excellent little pointer, only 5 minutes however as you are experienced in rwd concepts. Still excellent, thanks!

  • Vinnie
    7th June

    This is a great intermediate step towards full-fledged responsive design!

  • The Avangelist
    7th June

    brilliant….. and how many mobile mail clients support media queries exactly?
    And where does css go again? in the head? and don’t most mail exchanges strip the head?

    I can’t see how this can ever be a good solution unless you know exactly what mail client on what device you are sending to?

  • Ros Hodgekiss
    7th June

    Hey there The Avangelist, we have a good primer on media queries here. There are definitely a few caveats when it comes to support, but if you have a lot of folks reading their email on iOS/Android devices, the 5 mins it takes to optimize for them is definitely worth it.

  • Ros Hodgekiss
    7th June

    ... oh, I forgot to mention that you can check your email client usage reports to find out how many folks are viewing your campaigns on mobile devices. In clients where media queries aren’t supported, they won’t change the appearance of the email design at all :)

  • Sérgio Lopes
    7th June

    I think you only addressed iOS concerns with this post. It’s not a real full mobile experience. Media queries aren’t a viable solution because the most used email client (Gmail) doesn’t support it.

    The best mobile email approach is to make a flexible grid from the start with percentages and never relying on media queries for layout purposes (maybe you could add some media queries to progressive enhance something for compatible clients).

    It’s a mistake to think only on iOS when designing your mobile experience. Android is the most used platform and it has a very different behavior than iOS (it doesn’t show your email zoomed out for example; it’s fully visible even with small texts and you just scroll to see everything). And when talking about email, people still uses a lot of mobile clients besides iOS and Android (isn’t Blackberry the email king? :-).

    So never rely on specific features with poor support like media queries.

  • David Sylvian-Czajkowski
    7th June

    Very Happy.  Thank you!

  • Brian
    7th June

    @sergio - The “most used email client” depends entirely on the audience for your newsletters, and as Ros mentioned, markup design and layout decisions should be based on that.

    Besides, just because Android ignores zoom and discards fixed-width CSS declarations, that doesn’t mean that helping OTHER clients like iOS behave with @media queries is a bad thing. This CSS won’t harm the layout in Android, so why not show 5 minutes of love to those clients that it helps?

    Easily half of the CSS in HTML email is comprised of minor tweaks for this client or another. Consider yourself extremely lucky if the designs your clients need are simple enough that you can always use flexible grids and avoid email hackery. Makes me jealous!

  • Norbert
    7th June

    Why do you write table[class=“wrappertable”] when it can be just table.wrappertable, etc, is there any reason for that?

  • Ros Hodgekiss
    7th June

    Hi Norbert, we use attribute selectors to prevent Yahoo! from displaying the mobile version of the email. Yet another weirdo email hack :P

  • Craig Thigpen
    7th June

    Hi, great post. Curious though why you don’t use inline CSS. Are you running this through something like http://http://premailer.dialect.ca/ first before deployment?

  • Joel Smith
    7th June

    Very nice. Thanks!

  • Tommy Grimes
    7th June

    Great post. I had the same thought every time I received this email from Twitter. :)

    @Ros, regarding the Yahoo! hack, do you find any benefit (or drawback) of using table[class=“wrappertable”] over body[yahoo] .wrappertable ? (Of course, the latter requires the addition of a “yahoo” attribute to the body tag, and solid Copy+Paste skills.)

  • Shaun
    7th June

    So um… Why not add a sprinkle of media queries to your blog?!

  • Sérgio Lopes
    7th June

    @brian: I agree with everything you said.

    About fluid designs, this Twitter email is the perfect example. It would be very easy to code it only with flexible percentages and see it adapt do multiple screen sizes and multiple devices/clients without media queries. I agree that not every design makes this easy, but you should avoid complex design if mobile email is a concern to you.

    I have a simple newsletter design that’s mobile friendly and flexible without media queries. The email text is in Portuguese, but the code is readable: working example and original code.

  • Gus
    7th June

    Seconded Shaun! Great post though…

  • Mark Wyner
    8th June

    The majority of our recipients are reading on iPhone, even over desktop browsers, so I find this solution to be quite awesome. You’re kings.

    Note: I have a feature image that stretches to the full-width of my template that can’t be broken up like you did with the Twitter logo. So what I did was include a class on it and then give it the same with as the inner, fixed-width table:

    table[class=“Content”],
    img[class=“Feature-Img”] {
      width: 280px !important;
    }

    This worked out great for me.

  • Eyal B
    8th June

    <!—R E A D   H E R E—>
    You guys want this to work across on all devices not only (iPhone 320x480). Even on iPhone’s landscape’s 480px.. So the best way to go is—A Fluid Design !


    Campaign Monitor, I’ve fixed your Fix :)

    View / download here : http://www.AmmoGuerilla.com/twfix/index.html 

    P.S. payattantion to the @media queries   all is 100% , Plus I added a solid bgcolor for td, therefore the fluid effect is nice with an image to its left… Enjoy!

    HOOAH!

  • Goulven
    30th June

    Nice tweak!

    Do images with empty alt text cause issues? Otherwise I’d have used alt=”” for the 2 that have no text on them to avoid clutter and confusion when images are disabled.

    Oh and BTW please use input type=“email” and “url” in the comment form, if you’re so keen on pleasing iOS users. Thanks! ;-)

  • Ros Hodgekiss
    6th July

    Hey there Goulven, sorry about the late reply. From my knowledge, not having an alt for small and irrelevant images is fine. It’s also better for users with screen-readers.

    We’ve just updated our comments form with input type=“email” and “url” - thanks for the heads up there :D

Sign up for free.
Then send campaigns for as little as $9/month

Create an account