Twitter Inspires With Unique Responsive Design

[ 21 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” — n-ynhera=yvgzhf.pbz-477e8@postmaster.twitter.com — 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

  • Lauren_Litmus

    Hi Manos! Thanks for the comment. I’d love to hear more about how you create bullet proof buttons. Do you have any examples that I could check out? Thanks!

    • Manos

      Hi Lauren, below is a web link of recent Expedia campaign I’ve created for UK so you can have a look of the cta’s in action:

      http://tinyurl.com/c88nzmz

      Those cta’s are fully flexible, span according to text length & work on all browsers, clients & devices.

      Let me know if you’d need more details & I’ll be more than happy to help

      Thanks

      • Lauren_Litmus

        Thanks for sharing, Manos! I’ll have to take a peek at the code so I can see how you did the CTAs — they look great!

        Thanks again for your comment & tips. I hope you have a nice weekend!

        • Manos

          No worries, my pleasure Lauren – glad you like them :)
          Have a great weekend too!

          • Jack

            Manos, the buttons in the examples you gave use images… So I wouldn’t call them a ‘bullet proof’ solution. Sure, the images will be displayed and so the button will render properly in IOS(!) but in most desktop email clients the images will be automatically blocked and the button will no longer render properly. I think a better solution is simply to style the td with border:, background: and border-radius: (webkit/moz) as can be seen in this example:

            http://eepurl.com/pz26v

            Then if border-radius: is not supported in particluar email clients (such as outlook) then the button will gracefully degrade to simply having square corners BUT will still be rendered properly!

          • Manos

            Hi Jack & thank you so much for looking into my code but I’m afraid I will have to disagree.

            The only images I’m using serve the purpose of replicating the rounded corner graphics & everything else is just pure bulletproof html code.

            Even when the images not loaded the content will degrade gracefully & work on all email clients + mobile devices across the board – unlike using the moz-radius attribute that poses an extremely inconsistent behaviour on various clients & browsers except of course webkit.

            If you’d like rounded corners to display cross-client & cross=platform then my example would server that purpose – but if you’re ok or have the capacity to compromise your creative with square corner s pretty much everywhere else except webkit the moz-radius would be the way forward.

          • Jack

            It comes down to what you think is more important – aesthetic or performance. Personally I think that if your brand guidelines prohibit the implementation of a ‘bullet-proof’ CTA that will always be visible and therefore will boost click-through in favour of ’rounded corners that display cross-client & cross platform’ then they need serious revision…

          • Manos

            Why compromise aesthetic when you can have both?

          • Jack

            You’re missing the point – you can’t have both. The key issue is image blockers compromising proper rendering of the CTA. Your solution compromises both performance and aesthetic – a CTA that relies on images not only looks poor when the images are disabled (as they are by default in many major desktop and mobile email clients) but also loses functionality. Styling the CTA with CSS ensures proper cross-platform rendering and performance even with images blocked but only displays rounded corners in email clients that support CSS. To me this is a far better compromise.

          • Manos

            Hi Jack based on your comments I don’t think you reviewed the button properly as this does not rely on the image content & it does function properly when the images are disabled across all browsers & devices.
            Our cta’s have been tested rigorously both through the Litmus platrofm & live test sends and they appear to be pixel perfect.

            Thanks for pointing out the easier solution with the moz specific css attribute but I strongly believe that your assumption is not valid.

            I guess we just have to agree to disagree :)

          • http://www.litmus.com Justine, Litmus

            I always enjoy a good debate! I think both methods of creating buttons have their pros and cons, based on your goals and brand standards. The good news is that the text of the CTA is visible when images are disabled in both scenarios, which (IMHO) is the most important part!

  • Kam

    Lauren,

    Just came across this article. Firstly, thanks for including our webinar (Mobile email design – differences between…) in this article.

    Secondly, I really like the way you surmised the different benefits and advantages of responsive design in the article. It’s a great piece.

    • Lauren_Litmus

      Hi Kam, thanks for your comment. I’m so happy that you liked the post! It was my pleasure to reference the Yesmail webinar — it was a really informative webinar & one of the best ones I’ve tuned into in a while :)

    • Lauren Smith

      Hi Kam! If you liked this post, I think you might like this even more: https://litmus.com/blog/responsive-scalable-email-design-whats-the-difference

      It’s based off of the Yesmail webinar :) Have a great weekend!

  • Gabe

    Great read. Looking at doing more mobile ready emails for my company. Out of curiosity does anyone have any references for coversion rate increases with mobile friendly email? Would be nice to have on hand.

  • http://twitter.com/bandpages_ie Bandpages

    Nice article… where can I get hold of this Twitter template so I can change it to suit my needs? The design and layout are excellent.

  • http://profile.yahoo.com/QEAPRMT54SWYRTLIP46LVN272E AJ

    How do you swap out an image?

    • http://www.litmus.com Justine, Litmus

      You can hide images in a mobile version, or change their size. To swap an image out entirely may rely on something like Moveable Ink’s platform or Anna Yeaman’s DIS technology:

      http://movableink.com/
      http://stylecampaign.com/DIS.pdf

      • http://profile.yahoo.com/QEAPRMT54SWYRTLIP46LVN272E AJ

        Thanks Justine! I’ll look into the links!