Anatomy of a Perfect Mobile Email

[ 40 By

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.

Anatomy of a Mobile Email

HOW DOES YOUR EMAIL LOOK ON MOBILE?

Preview your email in all of the popular mobile clients (and desktop and webmail, too!) with Litmus to make sure you’re putting your best email foot forward. Sign up for a free 7-day Litmus trial today!

Start testing →

  • 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!

  • Joe Garite II

    This is great to use as an informative piece, which I plan to use to educate our creative department and some clients. You state that Windows Phone 7 is compatible with with mobile emails. However, they don’t support media queries. They also don’t support Auto-scaling. How, then, is Windows Phone 7 a practical target for mobile emails? It’s my understanding that only Windows Phone 7.5 is a practical target for mobile emails. What are your thoughts on this Justine?

  • Pingback: 20 Infographics With Smartphone Facts You Probably Didn’t Know |

  • Pingback: Infografik: Anatomy of the Perfect Mobile Email | mobile zeitgeist

  • Pingback: Infographic: Anatomy of the Perfect Mobile Email

  • Pingback: 6 aspectos clave para un buen diseño en el email marketing - Beltius