HTML Email Beyond the Limitations by dk45442

VIEWS: 20 PAGES: 33

									HTML Email:
Beyond the
Limitations




by: Anthony J. Zinni
                             http://www.fixoutlook.org
http://www.zinnidesign.com
About Me
AssociaDirect Inc.
Art Director

Positive Space Blog
http://positivespaceblog.com

Refresh Chicago
http://refreshchi.org
http://meetup.com/Refresh-Chicago/
Understanding
the Limitations
Email Clients

No one email client maintains a large majority

There is a complete lack of “email standards”

Inconsistent results amongst the better email clients

The problem isn’t going away
Email Clients
Most Popular Email Clients – June 2009
32.08%           Outlook 2000, 2003, Express
15.65%           Yahoo! Mail
15.35%           Hotmail
 7.55%           Outlook 2007
 6.36%           Apple Mail 3
 5.51%           Gmail
 3.41%           iPhone 2.0
 1.90%           Apple Mail 2
 1.72%           Lotus Notes 6–7
 1.66%           iPhone 3.0


Source: http://www.campaignmonitor.com/stats/email-clients/
Email “Standards”

No universally accepted set of
standards currently exist

Email Standards Project
(http://www.email-standards.org)

Group is lobbying email client
vendors to accept a set of
email standards
Email “Standards”
Email Standards Project “Acid Test” Results:
AOL Webmail                    Apple Mail                    Apple MobileMe      Eudora (Penelope)
 Excellent                       Excellent                    Excellent           Excellent


Google Gmail                   Lotus Notes 8                 Entourage           Outlook 2007
    Poor                           Poor                       Excellent             Poor


Thunderbird                    Hotmail                       Windows Live Mail   Windows Mail
 Excellent                       Average                      Excellent           Excellent


Yahoo! Mail                    Yahoo! Mail (Classic)
 Excellent                       Excellent



Source: http://www.email-standards.org/ retrieved 09/08/09
Email “Standards”
                                                                                        DESKTOP                                                                                                                                   WEB                                                                              MOBILE

                                                                                                                                                                                                                                                                                                                     Palm Pre    Palm Treo (Win Palm Treo (Palm
        Style Element          Outlook '07    Outlook '03   Windows Mail   Apple Mail   Entourage 2004 Entourage 2008   Notes 6 and 7   Lotus Notes 8.5 AOL Desktop 10   Thunderbird 2   Yahoo! Mail   Yahoo! Classic   Hotmail         Gmail   AOL Web   MobileMe   iPhone 3.0   Android Email   Android Gmail
                                                                                                                                                                                                                                                                                                                     (WebOS)       Mobile 6.5)    Garnet OS)
                                                                                                                                                                                                                                                                                                                                                                  Blackberry

<style> element In <head>          Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              N         Y         Y           Y             Y               N                P              Y              N               N
<style> element In <body>          Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              N         Y         N           Y             Y               N                P              Y              N               N
                                                                                                                                                                                                                                                                                                                     Palm Pre    Palm Treo (Win Palm Treo (Palm
         Link Element          Outlook '07    Outlook '03   Windows Mail   Apple Mail   Entourage 2004 Entourage 2008   Notes 6 and 7      Notes 8         AOL 10        Thunderbird 2   Yahoo! Mail   Yahoo! Classic   Hotmail         Gmail   AOL Web   MobileMe   iPhone 3.0   Android Email   Android Gmail
                                                                                                                                                                                                                                                                                                                     (WebOS)       Mobile 6.5)    Garnet OS)
                                                                                                                                                                                                                                                                                                                                                                  Blackberry

 <link> element in <head>          Y              Y              Y             Y              Y              Y               Y                Y               Y               Y              Y               Y            Y              N         Y         Y           Y             Y               N                P              Y              N               N
 <link> element in <body>          Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              N         Y         N           Y             Y               N                P              Y              N               N
                                                                                                                                                                                                                                                                                                                     Palm Pre    Palm Treo (Win Palm Treo (Palm
       CSS Selectors           Outlook '07    Outlook '03   Windows Mail   Apple Mail   Entourage 2004 Entourage 2008   Notes 6 and 7      Notes 8         AOL 10        Thunderbird 2   Yahoo! Mail   Yahoo! Classic   Hotmail         Gmail   AOL Web   MobileMe   iPhone 3.0   Android Email   Android Gmail
                                                                                                                                                                                                                                                                                                                     (WebOS)       Mobile 6.5)    Garnet OS)
                                                                                                                                                                                                                                                                                                                                                                  Blackberry

                          e        Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              N        Y          Y           Y             Y               N                N              N              Y               N
                          *        N              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               N            Y              N        Y          N           Y             Y               N                N              N              Y               N
            e.className            Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              N        Y          Y           Y             Y               N                Y              Y              Y               Y
                      e#id         Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            N              N        Y          N           Y             Y               N                Y              Y              Y               Y
                     e:link        Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              N        Y          N           Y             Y               N                Y              Y              N               N
        e:active, e:hover          N              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              N        N          N           Y             Y               N                Y              Y              N               N
               e:first-line        N              Y              Y             Y              Y              Y               N                Y               Y               Y              N               Y            N              N        N          N           Y             Y               N                Y              N              N               N
             e:first-letter        N              Y              Y             Y              Y              Y               N                Y               Y               Y              N               Y            N              N        N          N           Y             Y               N                Y              N              N               N
                      e>f          N              N              N             Y              Y              Y               N                N               N               Y              Y               Y            N              N        Y          N           N             Y               N                N              N              N               N
                  e:focus          N              N              N             Y              Y              Y               N                N               N               Y              Y               Y            N              N        Y          N           Y             Y               N                Y              N              N               N
                        e+f        N              N              N             Y              N              Y               N                N               N               Y              N               N            N              N        Y          N           Y             Y               N                Y              Y              N               N
                    e[foo]         N              N              N             Y              N              Y               N                N               N               Y              Y               Y            N              N        Y          N           Y             Y               N                Y              Y              Y               N
                                                                                                                                                                                                                                                                                                                     Palm Pre    Palm Treo (Win Palm Treo (Palm
         Text & Fonts          Outlook '07    Outlook '03   Windows Mail   Apple Mail   Entourage 2004 Entourage 2008   Notes 6 and 7      Notes 8         AOL 10        Thunderbird 2   Yahoo! Mail   Yahoo! Classic   Hotmail         Gmail   AOL Web   MobileMe   iPhone 3.0     Android       Android Gmail
                                                                                                                                                                                                                                                                                                                     (WebOS)       Mobile 6.5)    Garnet OS)
                                                                                                                                                                                                                                                                                                                                                                  Blackberry

                  direction        N              Y              Y             Y              N              Y               N                Y               Y               Y              Y               Y            Y              N        Y          Y           Y             Y               N                Y              Y              Y               Y
                       font        Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                P              P              N               N
               font-family         Y              Y              Y             Y              Y              Y               Y                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              N              N               N
                 font-style        Y              Y              Y             Y              Y              Y               Y                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              Y              N               Y
              font-variant         Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              Y              N               N
                  font-size        Y              Y              Y             Y              Y              Y               Y                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              Y              Y               N
              font-weight          Y              Y              Y             Y              Y              Y               Y                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              Y              Y               Y
           letter-spacing          Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              N              N               N
               line-height         Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              Y              N               N
                 text-align        Y              Y              Y             Y              Y              Y               Y                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              Y              Y               Y
         text-decoration           Y              Y              Y             Y              Y              Y               Y                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              Y              Y               Y
               text-indent         Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              Y              Y               N
          text-transform           Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              Y              N               Y
             white-space           Y              N              N             Y              Y              Y               N                N               N               Y              Y               Y            Y              Y        N          Y           Y             Y               Y                Y              N              N               N
           word-spacing            N              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              N              N               N
            vertical-align         N              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             N               Y                Y              Y              Y               N
                                                                                                                                                                                                                                                                                                                     Palm Pre    Palm Treo (Win Palm Treo (Palm
 Color & Background            Outlook '07    Outlook '03   Windows Mail   Apple Mail   Entourage 2004 Entourage 2008   Notes 6 and 7      Notes 8         AOL 10        Thunderbird 2   Yahoo! Mail   Yahoo! Classic   Hotmail         Gmail   AOL Web   MobileMe   iPhone 3.0     Android       Android Gmail
                                                                                                                                                                                                                                                                                                                     (WebOS)       Mobile 6.5)    Garnet OS)
                                                                                                                                                                                                                                                                                                                                                                  Blackberry

                   color           Y              Y              Y             Y              Y              Y               Y                Y               Y               Y              Y               Y            Y              Y         Y         Y           Y             Y               Y                Y              Y              Y               Y
            background             P              Y              Y             Y              Y              Y               N                N               Y               Y              Y               Y            N              P         Y         Y           Y             N               N                Y              Y              N               Y
       background-color            Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y         Y         Y           Y             Y               Y                Y              Y              Y               Y
      background-image             N              Y              Y             Y              Y              Y               N                N               Y               Y              Y               Y            N              N         Y         Y           Y             N               N                Y              Y              N               Y
    background-position            N              Y              Y             Y              Y              Y               N                N               Y               Y              Y               Y            N              N         Y         Y           Y             Y               Y                Y              Y              N               Y
     background-repeat             N              Y              Y             Y              Y              Y               N                N               Y               Y              Y               Y            N              N         Y         Y           Y             N               N                Y              Y              N               Y
                                                                                                                                                                                                                                                                                                                     Palm Pre    Palm Treo (Win Palm Treo (Palm
            Box Model          Outlook '07    Outlook '03   Windows Mail   Apple Mail   Entourage 2004 Entourage 2008   Notes 6 and 7      Notes 8         AOL 10        Thunderbird 2   Yahoo! Mail   Yahoo! Classic   Hotmail         Gmail   AOL Web   MobileMe   iPhone 3.0     Android       Android Gmail
                                                                                                                                                                                                                                                                                                                     (WebOS)       Mobile 6.5)    Garnet OS)
                                                                                                                                                                                                                                                                                                                                                                  Blackberry

                   border          Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y         Y         Y           Y             Y               Y                Y              Y               Y              Y
                   height          N              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y         Y         Y           Y             Y               Y                Y              Y               Y              N
                   margin          Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            N              Y         Y         Y           Y             Y               Y                Y              P               Y              N
                  padding          P              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y         Y         Y           Y             Y               Y                Y              Y               Y              Y
                    width          N              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y         Y         Y           Y             Y               Y                Y              Y               Y              Y
                                                                                                                                                                                                                                                                                                                     Palm Pre    Palm Treo (Win Palm Treo (Palm
Positioning & Display          Outlook '07    Outlook '03   Windows Mail   Apple Mail   Entourage 2004 Entourage 2008   Notes 6 and 7      Notes 8         AOL 10        Thunderbird 2   Yahoo! Mail   Yahoo! Classic   Hotmail         Gmail   AOL Web   MobileMe   iPhone 3.0     Android       Android Gmail
                                                                                                                                                                                                                                                                                                                     (WebOS)       Mobile 6.5)    Garnet OS)
                                                                                                                                                                                                                                                                                                                                                                  Blackberry

                  bottom           N              Y              Y             Y              Y              Y               N                Y               Y               Y              N               N            N              N         Y         Y           Y             Y               N                Y              N              N               N
                     clear         N              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y         Y         Y           Y             Y               Y                Y              N              N               Y
                      clip         N              Y              Y             Y              Y              Y               N                N               Y               Y              N               N            N              N         Y         N           Y             N               N                Y              N              N               Y
                   cursor          N              Y              Y             Y              N              Y               N                Y               Y               Y              Y               Y            Y              N         Y         Y           N             N               N                N              N              N               N
                  display          N              Y              Y             Y              Y              Y               Y                Y               Y               Y              Y               Y            Y              Y         Y         Y           Y             Y               Y                Y              Y              N               N
                     float         N              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y         Y         Y           Y             N               N                Y              Y              Y               N
                       left        N              Y              Y             Y              Y              Y               N                Y               Y               Y              N               N            N              N         Y         Y           Y             Y               N                Y              N              N               N
                  opacity          N              N              N             Y              N              Y               N                N               Y               Y              N               N            N              N         Y         Y           Y             N               N                Y              N              N               N
                 overflow          N              Y              Y             Y              N              Y               N                N               Y               Y              Y               Y            Y              Y         Y         Y           N             N               N                Y              N              Y               N
                 position          N              Y              Y             Y              Y              Y               N                Y               Y               Y              N               N            N              N         Y         Y           Y             Y               N                Y              N              N               N
                     right         N              Y              Y             Y              Y              Y               N                Y               Y               Y              N               N            N              N         Y         Y           Y             Y               N                Y              N              N               N
                       top         N              Y              Y             Y              Y              Y               N                Y               Y               Y              N               N            N              N         Y         Y           Y             Y               N                Y              N              N               N
                 visibility        N              Y              Y             Y              Y              Y               N                N               Y               Y              Y               Y            Y              N         Y         Y           Y             Y               N                Y              Y              N               N
                  z-index          Y              Y              Y             Y              N              Y               N                Y               Y               Y              N               N            N              N         Y         Y           Y             Y               N                Y              N              N               N
                                                                                                                                                                                                                                                                                                                     Palm Pre    Palm Treo (Win Palm Treo (Palm
                     Lists     Outlook '07    Outlook '03   Windows Mail   Apple Mail   Entourage 2004 Entourage 2008   Notes 6 and 7      Notes 8         AOL 10        Thunderbird 2   Yahoo! Mail   Yahoo! Classic   Hotmail         Gmail   AOL Web   MobileMe   iPhone 3.0     Android       Android Gmail
                                                                                                                                                                                                                                                                                                                     (WebOS)       Mobile 6.5)    Garnet OS)
                                                                                                                                                                                                                                                                                                                                                                  Blackberry

          list-style-image         N              Y              Y             Y              Y              Y               N                N               Y               Y              Y               Y            N              N         Y         Y           Y             N               Y                Y              Y              N               Y
       list-style-position         N              Y              Y             Y              Y              Y               N                N               Y               Y              Y               Y            Y              Y         Y         Y           Y             Y               Y                Y              Y              N               N
             list-style-type       N              Y              Y             Y              Y              Y               Y                Y               Y               Y              Y               Y            Y              Y         Y         Y           Y             N               N                Y              Y              Y               N
                                                                                                                                                                                                                                                                                                                     Palm Pre    Palm Treo (Win Palm Treo (Palm
                  Tables       Outlook '07    Outlook '03   Windows Mail   Apple Mail   Entourage 2004 Entourage 2008   Notes 6 and 7      Notes 8         AOL 10        Thunderbird 2   Yahoo! Mail   Yahoo! Classic   Hotmail         Gmail   AOL Web   MobileMe   iPhone 3.0     Android       Android Gmail
                                                                                                                                                                                                                                                                                                                     (WebOS)       Mobile 6.5)    Garnet OS)
                                                                                                                                                                                                                                                                                                                                                                  Blackberry

         border-collapse           Y              Y              Y             Y              N              Y               Y                Y               Y               Y              Y               N            Y              Y        Y          Y           Y             Y               Y                Y              Y              Y               Y
         border-spacing            N              N              N             Y              N              Y               N                N               N               Y              Y               Y            N              Y        Y          Y           Y             Y               Y                Y              N              Y               Y
            caption-side           N              N              N             N              N              N               N                N               N               Y              N               N            Y              Y        N          Y           N             N               N                N              N              N               N
             empty-cells           N              N              N             Y              N              Y               N                N               N               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              N              N               N
             table-layout          Y              Y              Y             Y              Y              Y               N                Y               Y               Y              Y               Y            Y              Y        Y          Y           Y             Y               Y                Y              Y              N               Y



                                   Y         = full support                                                                                                                                                                                                                                                       We hope you find this guide as useful as we have
                                   N         = no support
                                   P         = partial or buggy support
Email “Standards”

Shows a lack of standards amongst email clients

Shows a lack of standards amongst software versions

The problem only continues to get worse
(lotus notes/outlook 2007)
Email “Standards”

~30% of email clients will not show
background images

Styles must be inline for the best results

Styling of links in extremely inconsistent

Table based layouts are the norm because floats
are extremely unreliable
Email “Standards”

With the debut of Outlook 2007 Microsoft chose to
use the Word rendering engine for HTML

This replaced the Internet Explorer rendering engine,
severely setting the progress of HTML email back

Microsoft has stated that this will not change with
the release of Outlook 2010
FixOutlook.org
FixOutlook.org




Outlook 2000   Outlook 2010
FixOutlook.org

“We’ve made the decision to continue to use Word for
 creating e-mail messages because we believe it’s the best
 e-mail authoring experience around, with rich tools that
 our Word customers have enjoyed for over 25 years.”

“Microsoft welcomes the development of broadly-adopted
 e-mail standards. We understand that e-mail is about
 interoperability among various e-mail programs...”
Surpassing
Limitations
Surpassing Limitations

We know that the chances of this issue correcting
itself are bleak, so what do we do?
Surpassing Limitations

We have two main options:

—Design for the “lowest common denominator”

—Utilize “graceful degradation” techniques
Lowest Common Denominator

Three general approaches:

1. Utilize   statistics from existing email campaigns

2. Design    for a baseline standard of Outlook 2007/
Gmail

3. Header    area image & improved typography
Graceful Degradation

Create fallback styles that are acceptable substitutes
to the “true” design.

This approach is often preferable due to the wide
range of proprietary web-based email clients.
Graceful Degradation

Solid color backgrounds in areas that contain
background images

Alt descriptions should be used for browsers that
do not automatically download images

The most common approach is to degrade to work
within Outlook 2007/Gmail
Medium Specific Limitations

Provide a web version

Emails should be no more than 640 pixels wide

Alt tag descriptions are a necessity

Styles should be inline
Building Your
HTML Email
1.   Outlining Problem Areas

Take the time to notice
which areas of the Email will
require the use of graceful
degradation techniques or
other work arounds.
2.   Pre-plan for Table Cells

Sketch the cells of your
layout table over a printout
of the design to speed up
the development process.

Avoid using nested tables
if possible as they often
produce inconsistent results
3.   Slice the Photoshop File

Keeping the table you
sketched in the last step
in mind, create the slices
in the Photoshop file.
4.   Build the HTML File

Build the HTML file using the editor of your
choice (Dreamweaver)

Make sure to put all of your CSS Styles Inline

—Some better campaign sending services can
 automatically do this for you.
5.   Test, Test, Test

Because of the various potential problems testing is
extremely important.

Checking email client statistics from previous
campaigns can help shorten this process
Testing Environments

Create email accounts specifically for testing

—Gmail (good representation of yahoo/Hotmail)

—Outlook 2003/Outlook Express

—Outlook 2007

—Mozilla Thunderbird
Testing Environments

Use Thunderbird to send your test email:

1.   Upload images to a web server

2.   Update links to the images

3.   Copy and paste the HTML into Thunderbird

4.   Send to your test email accounts
Testing Environments

Commercially available testing solutions include:

—Campaign Monitor (http://www.campaignmonitor.com/testing/)

—Litmus (http://www.litmusapp.com/)

—Inbox Inspector (http://www.mailchimp.com/add-ons/inboxinspector/)
Campaign Software

Finally, import the HTML into your email
campaign software

—Add any software based tags

—Create a well written and information email title

—Optimize the plain text version of the email
Campaign Software

Popular email campaign software include:

—Constant Contact (http://www.constantcontact.com)

—Campaign Monitor (http://www.campaignmonitor.com)

—Mail Chimp (http://www.mailchimp.com)

—Emma (http://www.myemma.com)
Questions or
Comments?

								
To top