Anatomy of a Perfect Mobile Email

By Justine Jordan
13 Oct 2011

Anatomy of a Perfect Mobile Email

Designing emails that look great no matter where they’re read can be quite the challenge. As more people read email on mobile devices, chances are your recipient might view your email both on a mobile phone as well as on their desktop.

Take the guesswork out of designing your next mobile-friendly email with this infograph. We’ve outlined ten important guidelines to an amazing mobile experience, as well as six things you’ll definitely want to avoid. You’ll also find our mobile compatibility chart at the bottom for easy reference.

Of course, don’t forget to test out your brilliant design in all major desktop, webmail and mobile email clients!

Tags

email design infograph mobile email usability

http://www.facebook.com/profile.php?id=1803062772 Nakata Kazue

!!
Neil Berman

Great image!
- http://www.litmus.com Justine, Litmus
  
  Thanks, Neil!
http://www.joannewallace.ca Jwallace

Great infograph – but, somewhat ironically, I can’t read it on screen! Is there a print version?
- http://www.litmus.com Justine, Litmus
  
  Sorry about that, I know the type is a little small in the main post. Did you try clicking through on the image and going to this page: http://litmus.com/blog/anatomy-mobile-email/anatomy-mobile-email-24-1000px
  
  It’s full-width there, and a bit easier to read. If that doesn’t do the trick, shoot us an email (hello@litmus.com) and we’ll see if we can send you another version.
Melinda Albert

Great!!!
- http://www.litmus.com Justine, Litmus
  
  Thanks, Melinda!
http://twitter.com/CaptainInbox Andy T

This is quality! Being so visual, it really helps my brain build an image for using this. I’m thinking I could tweak the top left corner to this kind of view whist still keep the rest of the email desktop tastic!
Might be a small challenge and would obviously be most helpful on single call to action emails.
- http://www.litmus.com Justine, Litmus
  
  Thanks so much, Andy! We’ve had a lot of positive feedback about the graph and we’re thrilled that it’s been useful for so many!
http://www.techatlast.com Techatlast

This is a nice information shared in form of image because images speaks louder than the normal contents/ Thanks for sharing this tips
- http://www.litmus.com Justine, Litmus
  
  Thanks! We’re very glad you’ve found the graph helpful.
http://vibrantdrive.com Vibrant Drive

Nice infographics and very useful info.
- http://www.litmus.com Justine, Litmus
  
  Thanks so much! Very happy that the infographic is useful!
http://twitter.com/sdeflores SheilaSuarezdeFlores

Really nice but learned more from the text then the graphic. I would have put the explanations in plain accessible text, except for maybe the compatibility party.
- http://www.litmus.com Justine, Litmus
  
  Thanks for the feedback, Sheila! We agree that combining the graphics with live HTML text would have been ideal. Trouble is that an HTML file is much harder to share than a graphic.
Hector

Thank so much!!! Great Job
- http://www.litmus.com Justine, Litmus
  
  Thanks, Hector!
Jeffrey Friend

Great info. Another issue that I think should be addressed with email on mobile is full width graphic links. You have to scroll with your finger, and if a full width graphic is a link, you can only open the link, you can’t scroll past the image. I’ve thrown out a lot messages because of that frustration. Am I alone here?
- http://www.litmus.com Justine, Litmus
  
  Thanks, Jeffrey! Touchscreens can certainly be tricky, and I’ve also accidentally “clicked” an image after my finger lingered a bit too long while intending to scroll.
http://www.litmus.com Justine, Litmus

Hi Lance! I prefer to use pixels rather than ems. Campaign Monitor has an excellent post on the pros/cons. They also found that using pixels yields a more consistent result: http://www.campaignmonitor.com/blog/post/3447/should-i-use-em-or-px-when-coding-for-html-email/
http://www.litmus.com Justine, Litmus

Thanks for the feedback, Mike! We do realize that the text is a bit small on the main post. We also link to a larger version of the graph on click-through. I hope that version is a bit easier to read!
http://twitter.com/stardigital David Oakley

Very handy resource. I guess you could take these principles and apply them to designing a web app for mobile too.
http://techglobex.blogspot.com TechGlobeX

Its really a good info, Thanks for sharing this useful stats.
Jack

Nothing really new to add, but just wanted to say that this was incredibly helpful. Thanks very much!
http://twitter.com/inboundOut Christopher Telles

Anatomy of a Perfect Mobile Email. Terrific information on creating friendly emails that can be read easily as mobile emails [INFOGRAPHIC]
Pingback: Anatomie de l’e-mail mobile idéal | Bonjour Emailing
http://ganadinerocontuscompras.com/ Eric | Negocios en Internet

Excellent points, i totally agree !!
http://profiles.google.com/doriandouma Dorian Douma

How big do you think a message would have to be, I mean in kilobytes, including images… before it starts getting garbled or displaying some images and not others? Would this be a mobile carrier issue?

I love your presentation, it’s very client-friendly!
- http://www.litmus.com Justine, Litmus
  
  Hi Dorian! I think you might be asking about the behavior of some phones to cut off a portion of the email and prompt the user to continue downloading the remaining portion — I’ve seen this happen in both iOS and Windows Phone 7.5. I’m not sure of the root cause as it seems to happen randomly on my own phone.
Pingback: What goes into designing the perfect mobile email? - Blog - Campaign Monitor
hloom

Love the infographics
Pingback: Inspiration: Dreamforce | E-mail Marketing Specialisten
Eric Lepetit

Nice post Justine, as usual!
Just to answer your question about the email being cut off in iOs, I am pretty sure you now already know the fix but I wanted to share this with everybody:
http://www.emailonacid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad
- http://www.litmus.com Justine, Litmus
  
  Hi Eric, thanks for the feedback and link! Campaign Monitor has a more recent post that also found the issue in IMAP configurations on iOS as well — seems like it has more to do with the message size and connection type rather than the number of characters in the tag:
  
  http://www.campaignmonitor.com/blog/post/3857/ios-email-truncation
  - Eric Lepetit
    
    Even better! Awesome. Thanks Justine!

Grab our RSS feed

Blog

Subscribe to our newsletter

Anatomy of a Perfect Mobile Email

Tags

Subscribe

Recent Articles

Search

Categories

Archives