Real-World Education for Modern Marketers

Join Over 613,000 Marketing Professionals

Start here!
N E X T
Text:  A A

11 Tips to Align PC and Mobile Email Design

by   |    |  17,888 views

As smartphone sales go through the roof (Apple sold over 1 million 3G iPhones on its launch weekend in July), inbox and message views are growing in numbers—and shrinking in size.

The good news: More of your customers can read your email messages on their smartphones now, instead of waiting until they get back to their home or office computers.

The bad news: The email that looks so great on your home or office PC/laptop may look like a garbled mess on the average smartphone. Although the iPhone, for example, beautifully renders HTML messages with images, most smart phones don't, so you must design a message template that will render well in both a PC and the mobile email environment.

Because most of your subscribers who access email via a mobile device may also access the same email via their PC or laptop, sending mobile-optimized text messages is usually not the best strategy.

Also, don't expect a mobile device to detect and present the text part of your multipart message format. If your mobile user signed up for HTML, that's what she'll get on her phone, as virtually all mobile operating systems today present the HTML part. But, except in the case of the iPhone and Windows Mobile, it will probably look like a malformed text message.


So until the majority of mobile devices can render HTML well, the best compromise is to create a simple, well-designed HTML message that will look great in a PC environment but will also be highly usable on a mobile device.

The following HTML cross-platform optimization tips can make your message render better in most inbox environments, PC and mobile:

1. Design for the preview pane and initial mobile screen. Use your most valuable real estate, the top 2-3 inches of your message, for your most important content.

  • Move standing copy, such as "forward to a friend" or "add to the address book" requests, down below the fold. Consider moving "add to address book" copy to the bottom or administrative area of your emails—and focus on these efforts in the confirmation and welcome emails, where you can explain the delivery and rendering benefits in more detail.
  • Put links to Web and mobile versions below the fold, after key information/calls to action. Alternatively, you can incorporate your call to action in the link to your Web or mobile version.

2. Alt text. Use descriptive alt text (HTML text that displays when images do not render) with all images, as the text will show in some email environments when images are blocked.

3. Use fixed-width tables. This ensures that your email won't expand when images are blocked. Also, make sure you specify image height and width.

4. Keep emails to less than 600 pixels wide. This eliminates the need for users to scroll and ensures that your email won't have ads overlaid on your content from email services such as Gmail.

5. Use text links, not image links. Image-based links will create a mess in most mobile environments and will not render when images are blocked in a PC environment.

6. Design for horizontal scanning. Because most people use the horizontal preview panes, design the top ("above the fold") section of your email without columns or tables and for easy left-to-right scrolling. With no images and extraneous HTML at the top, mobile users should be able to read the first part of your email easily.

7. Spell out key URLs/links. Particularly if you have an international audience, you should spell out the full URL (such as http://www.company.com/specialoffer.html). Outside the US, Symbian is the most popular operating system for mobile devices, and it does not recognize embedded links.

8. Eliminate image-based mastheads or move below the fold. These take up valuable real estate on all devices and will show up as blanks on PCs when images are blocked and as a long image path on many mobile devices.

9. Eliminate postcard-style emails and use of very large images. Hotmail/Live Mail may block postcard-style emails (those with a high image-to-text ratio). With the growing use of preview panes and blocked images, large images also make for a very poor rendering and user experience.

10. Put key information in HTML text. This includes newsletter/company name, article titles, product names, calls to action, contact information, and URLs.

11. Consider not using long tracking URLs at the top of your emails. These long strings of code can take up most of the initial screen on many smartphones. While you lose link tracking, you gain subscriber usability.

A smart redesign now will keep you readable and relevant for the growing number of subscribers who read your messages on their smartphones and their home or office computers.


Join over 613,000 marketing professionals, and gain access to thousands of marketing resources! Don't worry ... it's FREE!

WANT TO READ MORE?
SIGN UP TODAY ... IT'S FREE!

We will never sell or rent your email address to anyone. We value your privacy. (We hate spam as much as you do.) See our privacy policy.

Sign in with one of your preferred accounts below:

Loading...

Loren McDonald is vice-president of industry relations at Silverpop, an email service provider for B2C marketing initiatives and B2B lead-management processes. Reach him via lmcdonald@silverpop.com.

Rate this  

Overall rating

  • This has a 4 star rating
  • This has a 4 star rating
  • This has a 4 star rating
  • This has a 4 star rating
  • This has a 4 star rating
3 rating(s)

Add a Comment

Comments

  • by Kim Dushinski Tue Oct 21, 2008 via web

    This is an excellent article about making email mobile-friendly. Funny how we all seemed to just get going with graphically designed emails and now we have to think about being text-focused again. Anyone else see the irony of technological advances making us take a step backward?

  • by Mark Figart Tue Oct 21, 2008 via web

    Another important tip for HTML-based emails: Keep columns of copy narrow for iPhone users. If they're too wide, there is no easy way for an iPhone user to increase the size of the copy enough to easily read without having to awkwardly scroll side-to-side. Narrow columns can easily be enlarged to fit the viewing area of the iPhone, thereby making the text quite readable, and making it unnecessary to scroll horizontally.

  • by Naresh Bhagtani Wed Oct 22, 2008 via web

    Is there is User Interface simulator for blackberry / IPhone / Symbian where we may be able to test how our emails appear in these devices?

  • by Astralis Thu Oct 23, 2008 via web

    First they told us rss would take over e-mail, then they told us texting/sms would take over (now they're saying Twitter will). The reality is we're back to e-mail and smartphones is the reason for this. In the end, the convenience of e-mail outweighs tons of irrelevant text messages that pop-up when you don't want them. The next best thing for e-mail would be something that behaves and acts like e-mail. It's simply the most user-friendly messaging system.

  • by Loren McDonald Thu Oct 30, 2008 via web

    Naresh - Yes, Pivotal Veracity has the inidustry's only (I believe) tool for seeing how your emails render across multiple mobile platforms. It is very cool. You can also view emails in preview panes, with images on or off, etc. Our company (SIlverpop) has the PV tool intergrated into our email platform as do some of the other ESPs.

MarketingProfs uses single
sign-on with Facebook, Twitter, Google and others to make subscribing and signing in easier for you. That's it, and nothing more! Rest assured that MarketingProfs: Your data is secure with MarketingProfs SocialSafe!