Wildbit

The Blog

Thoughts on building web apps, businesses, and virtual teams.

30 Jun Responsive design for email – the largest mobile audience ← Go back

Posted by Eugene Fedorenko on June 30, 2011 — 28 Comments

A month ago, Wildbit released a mobile-optimized view of Beanstalk which is very handy for code-collaboration on the go. While researching for this project, I was surprised to find that mobile usage is slowly passing usage of IE 6-8 at Beanstalk. It’s like a dream come true!

Mobile isn’t just in the browser

David Greiner from Campaign Monitor recently posted results from their report and it’s fascinating to see that mobile email clients grown from 4% to almost 20% of the market in just 2 years! From their historical chart, it seems fairly certain that mobile email usage will overgrow desktop email usage in a year or two. Thinking about my own iPhone usage supports these statistics — I check emails, feeds and tweets all the time, but go into Mobile Safari only when I have a good reason.

With this in mind, I began to think about Beanstalk’s emails — newsletters, digests and commit notifications. We’ve made them quite nice in desktop and web clients, but what about mobile clients? Can we keep them nice and readable here? Turns out we can! Mobile Mail on iPhone supports media queries, which makes possible to use the same responsive web design technique we applied to the rest of Beanstalk. How cool is that?

I’d like to show you how we applied screen-size specific media queries to target styles, and what design decisions were made to make the mobile email experience much better

Digests

I started with our Daily Digest emails, which provide an overview of the previous 24 hours activity for a given Beanstalk repository.

First was to add a media query for the iPhone’s small screen:

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

After improving font sizes and margins it was clear that mobile version was too cramped, so I decided to hide the commit time. It’s usually more important to see what’s changing than when exactly something was committed, and the time is still presented on changeset page for reference if needed. Next, I reformatted the changes summary — a vertical layout worked much better on a small screen. And the last change was to reformat header into two lines instead of just one. Here is how digests look now:

Beanstalk digests

I noticed minor visual issues on iPad, but they were easy to fix by targeting with this media query for the iPad’s screen size:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { ... }

Newsletter

We also send a regular newsletter to Beanstalk customers, and with experience from digests, it was a piece of cake!

Beanstalk newsletters

I improved font sizes and margins to use more of the screen space, resized the logo to be proportional to the screen, reorganized the navigation to avoid wrapping, and made images flexible. Now our newsletter doesn’t need any pinch-zooming to navigate and is much more readable on small screens!

What I have learned

  • Testing in a mobile email client and not just in mobile browser or resized desktop browser is more important now than ever before. Mobile Safari and Mail on iPhone don’t work exactly the same.
  • It’s not easy to customize layout based on table cells, but display: block; and negative margins work really well for for small changes.
  • In my tests it seems like <meta name="viewport"> (?) doesn’t work in Apple Mail. This caught me off-guard, and may cause you problems as well.
  • At first I tried to keep width of emails flexible but in a result every digest had different scaling based on content. That looks really weird if you receive a few digests every day. Sometimes it’s better to keep things fixed at 320px. This requires thinking about your use case!
  • Yahoo! Mail removes media queries and applies all included mobile stylesheets to web client, but there is an easy fix for that.

Conclusion

It’s not hard to optimize emails for mobile email clients, and the result is worth it! Even while we still use table layouts and inline stylesheets for emails in 2011 it feels like a fresh breeze to drop in some media queries and advanced stylesheets for the clients that can support them.

We’ll continue to optimize our HTML emails here at Wildbit, and would like to see more optimized emails from the apps we use and love every day as well. Hopefully sharing our experience helps make that a reality!

28 Comments

19 Trackbacks/Pingbacks

  1. Pingback: Responsive Web Design Techniques, Tools and Design Strategies - Smashing Magazine on July 22, 2011
  2. Pingback: Responsive Web Design Techniques, Tools and Design Strategies | Briginfo on July 22, 2011
  3. Pingback: Responsive Web Design Techniques, Tools and Design Strategies | Pros Global TV on July 22, 2011
  4. Pingback: Responsive Web Design Techniques, Tools and Design Strategies | IdentityNepal.com on July 22, 2011
  5. Pingback: Responsive Web Design Techniques, Tools and Design Strategies | Blogs – NG Outsourcing on July 22, 2011
  6. Pingback: Responsive Web Design Techniques, Tools and Design Strategies | Joomla Showcase : CSS Showcase on July 22, 2011
  7. Pingback: Responsive Web Design Techniques, Tools and Design Strategies | Ruturaj Pradeep Kohok | Your Web Advisor on July 22, 2011
  8. Pingback: Responsive Web Design Techniques, Tools and Design Strategies | CS5 Design on July 25, 2011
  9. Pingback: Responsive Web Design Techniques, Tools and Design Strategies – Smashing Magazine « Codingbird on July 27, 2011
  10. Pingback: Uptime weblog is helemaal vernieuwd | Uptime weblog | Door de internetprofessionals van Websites Nederland on July 29, 2011
  11. Pingback: Responsive web design – Roberto Simões on August 3, 2011
  12. Pingback: level. a small grafik design boutique agency based in weymouth dorsetlevel. grafik design boutique on August 3, 2011
  13. Pingback: Responsive Web Design Techniques, Tools and Design Strategies on August 5, 2011
  14. Pingback: Brave Knowledge » Responsive Web Design Techniques, Tools and Design Strategies on September 12, 2011
  15. Pingback: Trevor Turk — Links for 09-26-11 on September 26, 2011
  16. Trackback: Quora on November 14, 2011
  17. Pingback: Responsive web design on March 8, 2012
  18. Pingback: Uptime weblog is helemaal vernieuwd - Uptime.nl on August 13, 2012
  19. Pingback: » Tutto su Responsive Web Design - PYG Design Studio Blog on August 18, 2012

Great article as many of the newsletters I subscribe to are ok on my Android device but could be greatly improved. You might also want to look at http://htmlemailboilerplate.com/ for some tips on formatting for different mail clients.

Drew — July 1, 2011, 1:08 pm

Plain text email is incredibly responsive ;)

Ozten — July 1, 2011, 3:47 pm

This is awesome. Responsive design FTW.

Paul — July 31, 2011, 1:57 am

Nice! Can you post the Daily Digest html so we can take a look. Nice work and I’m trying to figure out the best way to go about coding a similar email.

Thanks

DRoss — August 2, 2011, 10:41 pm

Ditto to DRoss – is it possible to see source files?

I’m working on something similar and getting a lot of issues (except with the iPhone and Entourage for Mac). I’m wondering how your messages were optimized for other desktop and mobile clients – gmail, Android, Outlook, etc.

Amy — November 9, 2011, 6:16 pm

Amy, are you sure that your issues are related to mobile version? Usually I start with testing messages in normal email clients (like Outlook and Gmail) and only when they work well I add rules for mobile clients. My @media queries shouldn’t really affect desktop clients.

Eugene Fedorenko — November 9, 2011, 6:26 pm

Yeah, good point… another coworker kind of pointed out the same thing to me today, and it finally sunk in. :)

Amy — November 10, 2011, 5:49 pm

Every website that has a version designed for a mobile phone redirects my COMPUTER to their mobile site on all web browsers! HELP!. I actually fixed it lol, but I’ll leave the question open just in case anyone may know the answer..

Asa Helbing — January 14, 2012, 2:41 am

I recently coded mobile optimized email templates available at mojo themes.i used attribute selectors used for writing css for media queries,to prevent other email clients such as yahoo that don’t support media queries to render these styles.
http://www.mojo-themes.com/item/shopmail-product-offer-responsive-email-template/

jimmy — August 30, 2012, 5:21 pm

Sorry, comments for this entry are closed at this time.

← Go back

Get in Touch

Wildbit, LLC

Work 20 North 3rd St, 701
Philadelphia, PA 19106 USA

Google Maps
 
 
Fax
+1 (267) 200 0835
Email