Designing and coding HTML for email is hard enough just when you’re dealing
with all the quirks that desktop and webmail clients toss your way.
Introducing mobile into the mix can add a lot of time and frustration.
We’ve put together this handy chart that covers mobile email
compatibility basics like image blocking, preview text, alt text, and
more.
HTML: This column is an indication of native HTML
support on the device. The great news is that most modern mobile
operating systems support HTML and CSS, some even better than desktop
clients! The days of worrying if your recipients will receive a garbled
text-and-code mash on their Blackberry are mostly over. As
long as your recipients aren’t reading on a Blackberry that’s more than a
couple years old, they’re most likely to receive your HTML version if they’ve enabled the option on
Blackberry 4.5/5.
Images: While HTML support in mobile is mostly good
news, the bad news is that image blocking is back in a big way. The only
mobile OS that doesn’t block images by default is the iPhone/iPad.
However, of those devices that block images, most offer a
big touch-friendly button to turn them on.
Alt Text: If you’ve been designing email signatures for the
desktop for a while, you probably know the fine art of alt
text. Unfortunately, only Android will display alt-text behind a blocked
image.
Preview Text: Preview text has gained a ton of
traction in recent months due to it’s prevalence in Outlook, Gmail and
the iPhone. It shows up right after the subject line, and pulls in the
first few lines of live text from your email to give readers a “snippet”
of what’s in the email. It’s a great way to pack more punch in your
email, and it will show up in iOS devices as well as Windows Mobile 7.
Scale: While the iPhone zooms into your email and
fits the email to the width of your screen, most other devices will
display the upper left-hand corner of your email, leaving users to
scroll left-and-right in addition to up-and-down to view your entire
message. You could think of this space as the preview pane, reborn for
the mobile age.
Modify Fonts: Reading email on a tiny screen is
hard. Every mobile OS will modify your fonts to some degree, although
it’s a bit of a mixed bag. iPhone and iPad have a 10pt minimum font size
and will auto-adjust anything under that size, often breaking your email signature table design. I observed text being condensed, breaking at random
intervals and other unfriendly behaviors, but nothing that seemed
consistent or predictable. The best course of action is to plan for
unruly text behavior in your design, and learn to accept that your fonts
may not be the size or shape you intended.
