Blog


Repurpose your Images for Mobile Email

10.19.2011

Read More Design Emails for Mobile Devices

Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

By acidadmin
January 10, 2010
 
 
 

The Best Strategies for Testing Your HTML Email

Although our email testing simulation is intended to make your life much easier, it is still vitally important to test your email in each of the popular web browsers as well.

In taking into account the complexity of testing your email, we must first consider the most popular email applications used today.

Desktop Email Clients

Each desktop client uses an embedded rendering engine in order to display your email. In order to control potential spam and spyware threats, each client then sets restrictions on supported HTML, CSS and scripting elements. Popular desktop clients include:

Outlook Preview, Outlook Email Testing
Outlook 2003
IE 6,7 or 8 Engine*
Lotus Notes Preview Lotus Notes 6, 7
Rich Text View - similar to Wordpad
Outlook 2007 Preview
Outlook 2007
Microsoft Word Engine
Lotus Notes Preview
Lotus Notes 8
IE 6,7 or 8 Engine*
Thunderbird Preview
Mozilla Thunderbird 2.0, 3.0
Firefox Engine
Hotmail Preview
Windows Live (Hotmail) Client
IE 6,7 or 8 Engine*
Apple Mail Test
Apple Mail (aka Mac Mail)
Safari Engine
Entourage Preview
Entourage 2004, 2008
Internet Explorer 5 for the Mac
Windows Mail Preview
Windows Mail
IE 6,7 or 8 Engine*


* The version of IE that is used to render your email depends on what the user has installed on their local machine.

Web Based Email Clients

Web based email clients present an entirely different challenge. Since users can open their web based email from any of the popular web browsers, we have to focus less on the embedded "rendering engine" and more on how your email 1.) looks in every popular web browser and 2.) gets interpreted by each email client.

For example: Gmail sets very strict restrictions on embedded CSS, whereas Hotmail uses an outdated doc type which may alter the way your images and text will render.

As if that wasn't enough, your email will render inside the Gmail, Yahoo, and Hotmail user interface.  Therefore, you must compete with their default CSS. AOL, on the other hand, uses an iframe to display your email.

Popular Web Based Email Clients:

Email Testing - Web Clients

The most popular web browsers:

Email Testing - Web Browsers

As you already know, each of these web browsers vary when it comes to following W3C standards, rendering coding errors, and displaying blocked images, ALT, and TITLE tags.

Other big contenders include:

  • Myspace Mail
  • Opera Mail
  • Lycos Mail
  • Excite Mail

In the end, there are a multitude of different ways in which your email might be received which makes testing much more difficult than testing a standard web page. So the question is:

What is the best strategy for testing your email to ensure it will render correctly in all of the popular email clients?

Here's our recommended approach:

  1. Test your email in each of the popular web browsers, including older versions of Internet Explorer. Then, if possible, test on your iPhone or one of the iPhone simulators listed below.
  2. Using Firefox, log into your Email on Acid account and run a simulation of your email in the top 15, most popular email clients. Make sure you are satisfied with the way your email will render in each client by using our code analysis feature.
  3. Then open Internet Explorer and log into your Email on Acid account once again. Find the email test in your archive and preview the email in each client there as well.

Have you had enough yet? No?
Well, for the hard core testers out there, let's enter into the realm of mobile device email...

Testing HTML Email on Mobile Devices

To make matters even more complicated, some users may use their mobile devices to retrieve their email. Although users are more likely to use the email application that comes with their device operating system, others may prefer to check their web based email through their handheld web browser. There are currently 40 different handheld applications for web browsing.

Here is a list of popular mobile device operating systems:

  • Palm OS (aka Garnet or Cobalt) - Made by PalmSource
  • Windows Mobile (aka Pocket PC, Pocket PC Phone Edition, and Smartphone) - Made by Microsoft and built on the Windows CE operating system. Applications are Internet Explorer and MS Reader. E-mail program is from the Pocket Outlook Suite and is similar to Outlook (assuming version 03).
  • Blackberry OS
  • Symbian
  • Android - Acquired by Google and built on a Linux based platform
  • iPhone OS (iOS) - Made by Apple Inc. and built on a Mac OS based platform. The standard web browser is Mobile Safari

Popular Mobile Browsers

  • Mobile Safari (comes standard on the iPhone OS)
  • Opera Mini (can be installed on any mobile device and there are an estimated 30 million active users)

The good news is that the iPhone has excellent support for HTML/CSS web standards and it is estimated that an average of 2-4% of your potential readers are receiving their email on this device.

Another silver lining to developing emails for mobile devices is that most revert to the attached text version, that is why it is best to embed a link at the header of your text version to a landing page which contains the HTML version of your email. More often than not, that link will launch the standard web browser within the device.

It is our goal to provide simulations for mobile devices in the future. But in the meantime, here are a few online and windows based simulation tools that might help you on your way:

Web Based Mobile Simulators

  • dotMobi Online Emulator - mTLD has an online emulator that you can use to quickly see what your site will look like on a common phone
  • Opera Mini - a simulation of Opera's popular J2ME browser
  • Testiphone - Simulates iPhone browser
  • Iphonetester - Also simulates iPhone browser

Windows Based Mobile Emulators

  • WinWap Smartphone Emulator
  • Microsoft Pocket PC Emulators
  • Openwave's Browser Simulator
  • Nokia Browser Simulator - this simulator simulates a generic Nokia phone and WAP gateway
  • BlackBerry Simulator - multiple different BlackBerry simulators
  • Yospace SmartPhone Emulator - a versatile emulator that can display multiple phone instances at the same time
  • iPhone Simulator - bundled as part of the iPhone SDK. You'll need to purchase a Mac to run the SDK
  • Android Emulator - the Android SDK includes a mobile device emulator. The Android emulator mimics all of the typical hardware and software features of a typical mobile device, except that it can not receive or place actual phone calls
  • Palm Pre Emulator - the Mojo SDK from Palm include a Palm Pre Emulator. You can download the SDK for free (requires email registration)
  • BREW Emulator - the BREW SDK includes a mobile device emulator. It does not however emulate a handset's hardware. The BREW application is instead compiled to native code and linked with a x86-compatible BREW runtime library.
  • MobiOne - iPhone emulator and Palm Pre emulator
  • Windows Mobile

Share Your Comment

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:



Share/Save/Bookmark

If you haven't signed up yet, give our FREE online Email Test a try. Just drop in your code and we will instantly simulate your email in the most popular email clients!

Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

Follow us on Twitter Become a Friend on Facebook Subscribe to our Blog Digg Us! Recommend on StumbleUpon