Twitter Inspires With Unique Responsive Design

[ 0 By

As the number of email opens on mobile devices continues to  increase (123% in 18 months!), so does the talk about responsive design. And while I frequently hear about responsive design, I rarely see it in action. In fact, while we definitely make all of our emails “mobile-friendly,” only one of our templates here at Litmus is responsive. Since responsive design involves complex coding, requires more design time, and doesn’t work on all mobile devices, many organizations haven’t started creating mobile-friendly templates — which makes it that much more exciting when I see a responsive email!

After tuning into Yesmail Interactive’s webinar, “Mobile Email Design: Scalable & Responsive,” I was really impressed with (and excited by!) Twitter’s use of responsive design.  Here is the example from that presentation:

The responsive design of this email scales the email & increases the text size on mobile devices so that it easy to read on small screens. In addition, the header of the email has been changed — the Twitter “badge” has swapped sides and the headshot has been removed in the mobile version. With this responsive design, Twitter keeps the email extremely legible on both a desktop and a mobile device.

Justine and I were extremely impressed with this and we immediately started keeping a close eye on the emails we were receiving from Twitter. When Justine forwarded the email below to me, we both agreed that it was one of the best responsive emails that we’ve received!

Relevant, Direct Content & Simple Imagery

Before even realizing that it was a responsive design, I was impressed with the email’s content and simplicity. As we’ve stated in so many of our blog posts, relevant content is key to getting your subscriber’s attention and, since this email serves as a feature update email for Twitter users, the content is definitely relevant to subscribers. Twitter only includes pertinent information about new header photos and photo streams and, since both of these features are beneficial to Twitter users, recipients would definitely find the content relevant to them.

I also really enjoy the simplicity of the imagery in this email. The only images in the email are the Twitter badge, the recipient’s Twitter picture, and an image of Twitter on a desktop & on a mobile device. The simple imagery goes well with the direct content of the email, so it flows very nicely.

Successful “From Name,” Subject Line, & Preheader

Three other aspects of the email that I really liked were the “from name,” subject line, and preheader. The “from name” is the field that appears first in most email clients & it tells recipients who sent the message, so it should be recognizable and trustworthy to external audiences. Twitter’s “from name” is simple — it’s “Twitter.” What’s more recognizable than that? Like the content & imagery in the email, it’s simple and to the point.

I also really enjoyed the subject line of this email, “Because you have more to show.” It made me curious about what else I had to “show” and encouraged me to open the email. By leaving the subject line a little “elusive,” I was curious about what was inside the email, so I opened it. Their tactic definitely worked on me!

The preheader of this email adds an extra personal touch by including the recipients’ name: “Justine Jordan, we have something for you…” It’s definitely a breath of fresh air from the “having trouble viewing this email?” preheader that we see so frequently. The preheader of this email further emphasizes how relevant the content inside is and I think it’s a major advantage.

Since some email clients (Gmail, Outlook, iPhone, Windows Mobile 7) will display a portion of your preheader text as “preview” or “snippet” text, it’s important to use these few lines of text to your advantage. Readers only spend about 3-4 seconds deciding whether they are going to open & read your email, so the snippet text of the preheader is a perfect place to get your subscribers’ attention, sum up your email and include the call to action. Here is the email in Gmail (Chrome):

However, they didn’t get it all right. The “from email address” — — is an extreme negative in my opinion. It appears unfriendly, uncaring and definitely doesn’t encourage customers to interact and respond back to the email.

Images-Off Optimization

Another positive about this email is how great it looks with images off!

A bulletproof button, live text and colored background preserve the hierarchy even when images are disabled.
Since numerous email clients disable images by default, it is important that emails are optimized for images off so that subscribers can still receive the pertinent information of the email if images are not present. Twitter successfully optimizes for images off — the email maintains its clear hierarchy and highlights all of the important, relevant information to subscribers regardless of whether images are present or not. Twitter did this by assigning colors to certain cells in the layout, using live text, and using a bulletproof button for the call to action.

Twitter uses a grey background color in the header and footer of the email so that the hierarchy is still present regardless of whether images are present or not. Another example of using colored table cells in an email to optimize for images-off is this great email by Salesforce.

In addition, rather than making the email mostly image-based, Twitter uses live text rather than text on images so that the text of the email looks the same — regardless of whether images are enabled or not. And how about that bulletproof button? As Alex Ball states in his post, “Creating Bulletproof Email Buttons,” “The concept behind bulletproof buttons in emails is to provide the user with a compelling, attractive and enticing call to action without the use of images.” This is done by coloring the cell where the button is placed and using text instead of an image to write out the call to action; regardless of whether images are on or off, the call to action still stands out.

One aspect that Twitter could improve on when optimizing for images off is to include ALT text. It would have been nice to see some ALT text in this email, so that there was a description of the images present when images are disabled. Check out Justine’s post, “Ultimate Guide to Styled ALT Text,” for tips on how to use ALT text and which email clients support it.

Unique & Effective Responsive Design

What’s the best part of this email? Its responsive design!

The responsive design of this email is amazing! CSS media queries (responsive design) can auto-adjust the layout, content, and text size of an email based on the screen size it is being read on; specific rules can be assigned for various screen sizes. When I compared the email on my desktop to the email on my iPhone, I was really impressed. Not only does the layout change for better viewing on a mobile device (changes into a single column for easy viewing on the small screen of a smartphone), the call to action changes as well! The main CTA on the desktop version is “Try it now,” while it’s “Get the app and try it now” on mobile devices.

The CTA on the desktop brings users to the Twitter login site, while the CTA on mobile devices brings users to the App Store to download the Twitter app. Twitter changes the CTA and landing page based off of which type of environment they are reading in; this makes the process of seeing the new Twitter profile & trying it out easier for subscribers.

While this responsive design creates an extremely mobile-friendly email, the text and links in the footer of the email are small on a mobile device, which made them difficult to click. Text should be a minimum of 14px so it is still legible and “touch friendly” on a mobile device.

In addition, it should be noted that media queries (responsive design) are not compatible with every OS. That being said, if you find out that the majority of your mobile opens are occurring on devices that don’t support media queries, such as Android 4.0 (Gmail), putting resources towards responsive design may not be the best option for you! Check out this compatibility chart from Style Campaign:

Media Query Support
iPhone Yes
iPad Yes
iPod Touch Yes
Android 2.1 Eclair native client No
Android 2.2 Froyo native client Yes
Android 2.3 Gingerbread native client Yes
Android 4.0 Ice Creme Sandwich native client Yes
Android 4.1 Jelly bean native client Yes
Android Outlook Exchange 3rd party app No
Gmail app on all platforms No
Yahoo Mail 1.4.6 Android app No
Microsoft Surface tablet (default native client) No
Windows Mobile 6.1 No
Windows Phone 7 No
Windows Phone 7.5 (Mango) Yes
Windows Phone 8 Yes
BlackBerry OS 5 No
BlackBerry OS 6 Yes
Palm web OS 4.5 Yes
Kindle Fire (silk) native client Yes
Kindle Fire HD (New vr. of Silk) native client Yes

Additional Resources