Browse by...
Home Resources Blog

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%">
		<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">
     <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="" 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. 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.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free