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 Michelle Klann
December 20, 2011
 

Customize your email for the new Xoom, Kindle Fire, and iPad Tablets!

Tis the season over here at Email on Acid and we have tons of shiny, new devices on our desks just begging for a test drive. Fortunately for every computer lover on the planet, the Kindle Fire, Xoom, iPad, and iPhone are up front and center this holiday season and we are anticipating record sales from Amazon, Motorola, Apple and several more mobile & tablet carriers.

So what does that mean for email developers? Well, there's good news and bad news. Since it's a happy time of year, let's start with the good news first: Each provide awesome support for HTML and CSS. The bad news? More email clients to contend with - not only with respect to native email clients but also from mobile apps and mobile web versions of popular web based email clients.

This year, we offer a gift that keeps on giving. Give your customers something they will never forget by customizing their email for each of the most popular devices.

Here are a few media query gems to get the ball rolling:

<style type="text/css">
/*PLEASE NOTE: this has only been tested in native device 
email clients, not in device web browsers*/

/*Here are the device dimensions:
Iphone:  320px X 480px 
Smartphones: Vary from 240×320 to 720×1280
Android Phone (most popular): 350px X 480px
Additional Android Phones: 480×800 or 540×960
Xoom: 1280×800
Kindle Fire: 1024 x 600
iPad: 768 x 1024 */

    /*iphone, android, and most common smartphones --------*/
    @media only screen and (max-device-width: 480px) {
        body[yahoo] #desktop { display:none}
        body[yahoo] #ai { display:block !important}	
        body[yahoo] #smartphone { display:block !important}	
    }  		
    
    /*iphone only --------*/
    @media only screen and (device-width: 320px) {
        body[yahoo] #desktop { display:none}
        body[yahoo] #iphone{ display:block !important}	
    }  		
    
    /*kindle and iPad (portrait and landscape) --------*/				
    @media only screen and (min-device-width: 590px) and 
    (max-device-width:1024px){
        body[yahoo] #desktop { display:none}
        body[yahoo] #ki { display:block !important} 
    } 			
    
    /*kindle, iPad, and Xoom (portrait and landscape) --------*/				
    @media only screen and (min-device-width: 590px) and 
    (max-device-width: 1280px){
        body[yahoo] #desktop { display:none}
        body[yahoo] #kix { display:block !important} 
    } 								
    
    /*kindle (portrait) only ==> landscape is the default, 
    the portrait conditional is not supported.  If this device is 
    in landscape view, it will pick up on the iPad media 
    queries below---------- */
    @media only screen and (device-width: 594px) {
        body[yahoo] #desktop { display:none}
        body[yahoo] #kindle{ display:block !important}	
    }  										
    
    /* iPad only (landscape & portrait)----------- */										
    @media only screen and (min-device-width: 768px) 
    and (max-device-width: 1024px){         
        body[yahoo] #desktop { display:none}
        body[yahoo] #ipad { display:block !important}
    }   
    
    /* iPad (landscape only) ----------- */
    @media only screen and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
        body[yahoo] #desktop { display:none}
        body[yahoo] #ipad_landscape { display:block !important}
    }
     
    /* iPad (portrait only) ----------- */
    @media only screen and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
        body[yahoo] #desktop { display:none}
        body[yahoo] #ipad_portrait { display:block !important}
    }	
            
    /*xoom only*/
    @media only screen and (min-device-width: 1280px) 
    and (max-device-width: 1280px){
        body[yahoo] #desktop { display:none}
        body[yahoo] #xoom { display:block !important}
    } 				
</style>

...

<body yahoo="fix">
    <div id="kindle" style="display:none">Kindle Fire</div>
    <div id="ipad" style="display:none">iPad</div>       
    <div id="ipad_portrait" style="display:none">iPad Portrait</div>
    <div id="ipad_landscape" style="display:none">iPad Landscape</div>
    <div id="iphone" style="display:none">iPhone</div>
    <div id="xoom" style="display:none">Xoom</div> 
    <div id="ai" style="display:none">iPhone & Android</div>    
    <div id="ki" style="display:none">Kindle & iPad</div>        
    <div id="kix" style="display:none">Kindle & iPad & Xoom</div>
    <div id="android" style="display:none">Android</div>   
    <div id="smartphone" style="display:none">Smartphone</div>
    <div id="desktop">This is the desktop view</div>       
</body>



Note: in the above example we have implemented the Yahoo fix to ensure that the above styles are not picked up by Yahoo.

We recommend that you use media queries to re-purpose your images, showing and hiding divs as we've shown above has its limitations in Gmail and Outlook 2007/2010. The above example was inteded to showcase test samples, not nesessarily as a boilerplate and media queries for HTML emails should be handled with care.



Season's Greetings everyone! Here's wishing you an abundance of friends, laughter, prosperity, and family fun this holiday season from each and every one of us at Email on Acid!



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

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

By Michelle Klann
November 9, 2011
 
 
 

5 Reasons you Should Always Validate your HTML Code when Developing Emails

Coding errors in web pages are one thing but errors in HTML emails are an entirely different story. So why is it so much more important? Here are 5 reasons why you should always validate your HTML when developing emails.

1.) You'll be sharing center stage with web based email clients like Gmail and Hotmail
Many web clients do not make use of iframes for displaying your email. Instead, you share the web browser with their interface and often times, they will do their best to ensure there's no conflict. That said, their interface often comes equip with lots of embedded styles, container elements (ie DIVs) and fancy client side scripts for displaying banners or cropping off a portion your beautiful email design.

2.) A random "</div>" can stick a wrench in Gmail and Hotmail
DIV's can be easy to mess up, especially if you have several nested so let's say you accidentally leave an extra </div> somewhere in your code... This will inadvertently close one of Gmail or Hotmail's UI div's and that can leave a big mark, especially if it's in the middle of your email design.

3.) Desktop email clients render errors differently
Each desktop email client uses a specific rendering engine. Unfortunately each rendering engine handles coding errors differently and some are more lenient than others. With that in mind, it's always best to test your email in the most popular web browsers first, then run an Acid Test to preview your email in the most popular email clients before sending.

4.) Empty TD's will get their fill from Gmail
Gmail doesn't like empty table cells so if you are trying to achieve a 1px space, you might get unexpected results. For example, this:

<td width="1">  </td>

Will get converted to this:

<td width="1"> &nbsp &nbsp </td>

5.) If you have random elements in your tables, Gmail will try to fill in the blanks
Let's say you have content that should be inside a table cell:

<table>
   this is a test
  <tr>
    <td>contents...</td>
</tr>
<div>this is a div</div>
</table>

Gmail will wrap your random content inside table rows:

<table>
  <tr>
    <td> this is a test </td>
  </tr>
  <tr>
    <td>contents...</td>
  </tr>
  <tr>
    <td><div>this is a div</div></td>
  </tr>
</table>

If you have more than one cell, it still renders only one new table row. For example:

<table>
   this is a test
  <tr>
     <td>contents...1</td>
     <td>contents...2</td>
  </tr>
  <div>this is a div</div>
</table>

Is converted to this:

<table>
  <tr>
     <td> this is a test </td>
  </tr>
  <tr>
     <td>contents...1</td>
     <td>contents...2</td>
  </tr>
  <tr>
    <td><div>this is a div</div></td>
  </tr>
</table>

If you have random text inside the TR but not in the TD Gmail will create a new TD.  For example this:

<table>
  <tr>
       this is a test
      <td>contents...1</td>
       <td>contents...2</td>
  </tr>
  <div>this is a div</div>
</table>

Is converted to:

<table>
  <tr>
    <td> this is a test </td>
    <td>contents...1</td>
    <td>contents...2</td>
  </tr>
  <tr>
    <td><div>this is a div</div></td>
  </tr>
</table>

In Conclusion

When you submit your email through our testing tool, the first thing we do is check for validation errors. This error report is based on your DOCTYPE. If we find anything, you can cancel out of the test, correct the issues, and re-run your email without charge.

 



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

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

By Michelle Klann
October 13, 2011
 

Emailology - the Science of Looking Good in the Inbox

Announcing the official launch of Emailology.org! This site is jam packed with tools and information for developing HTML emails including a boilerplate template, email client tips & tricks, a reference for universally supported HTML/CSS and a special character converter.

How to newsletter

Depending on the response, we have some big ideas for this site so don't hesitate to share your feedback or suggestions below!

HTML Email Boilerplate

html email how to

A little while back, Sean Powell came up with a brilliant idea for developing an email boilerplate. It's an HTML template that is stripped of any design, but contains recommendations for DOCTYPE, embedded CSS, and sample HTML coding for tables and text links. We liked the idea so much that we reached out to Sean in an attempt to collaborate and we just launched an updated version on Emailology.org.

This boilerplate is jam packed with additional features like setting universal fonts, using background images, bulleted lists, media queries for mobile devices, embedding video and much more. It serves as a great starting point for any email job and will save you loads of time when testing.

Email Client Tips & Tricks

for web developers

We included our popular email client tips & tricks on this initial release of Emailology. This is an organized collaboration of common questions and quick fixes for issues you might face when developing HTML emails.

We'd like to send a special thanks to all of the people who have submitted questions and answers via our Acid Test and in our community forum! We sincerely hope other developers who follow in your footsteps will find this resource useful!

Universally supported HTML/CSS

how to do emails

Based on our code analysis research over the past three years, we've published a standards guide for universally supported HTML and CSS. This is a great resource if you want to play it "safe" when developing HTML emails. We included Lotus Notes 6.5 and 7.0 in our list of supported clients but since they are less popular, you have the option of turning them on or off.

Special Character Conversion

how to email newsletter

Based on our popular blog article regarding special characters in HTML emails, we've included a free tool that converts each of your special characters to HTML entities. This will ensure that your text renders as intended no matter what content-type is imposed upon your email.

As mentioned above, we have some big plans for this site so be sure to share it on Twitter, Facebook, and Google's +1. Or if you are feeling really generous, post an article about Emailology on your blog and we will gladly hook you up with some free test credits if you need them!

 



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

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

By Michelle Klann
September 19, 2011
 
 
 

Email Standards - Can we Make a Difference?

We've all been there, a boss, a client, or a friend calls you up and says:

We want to do this email campaign and it's going to be wildly successful! What do you mean? Of course it should render properly, that's a given. SPAM? That shouldn't be a problem, these people have subscribed to our list!

Meanwhile your mind is racing at the vast complexity of this seemingly simple task.

We all know that there should be a universal standard for HTML and CSS but the fact is email clients are far less concerned with compliance than web browsers. None of their users are complaining about the way advisements are rendered in their inbox. So can we make a difference? It may be wishful thinking but our answer to that question is: Yes!

Email Standards Project
A few years ago, Campaign Monitor launched the Email Standards Project. It's a site that identifies current standards with a rating system for each email client. Their ultimate goal was to build a community dedicated to making a change.

Fix Outlook Campaign
Soon after Campaign Monitor launched the "Fix Outlook" campaign - a Twitter based platform wherein people could tweet on behalf of fixing Outlook 2007. The goal was to get Microsoft to use an engine like Internet Explore vs. Microsoft Word in its next release. Although Outlook 2010 showed no signs of compliance, Microsoft has recently released that Outlook 2011 for the Mac will be using Webkit.  Congrats Campaign Monitor! We applaud you for taking initiative and starting a movement!

Blogging for Change
Since starting our blog in 2009, we have also made some subtle strides at increasing compliance. In November 2010, we reported that images were not supported in the iPad version of Gmail. Within two days a representative for Gmail responded and notified us that it had been resolved.  Though our post was likely just an asside, it's good to know that they are listening in on conversations regarding email renderability.

Just recently, we published an article regarding Hotmail's latest release and the fact that they no longer support image maps. Within a week, they responded and again the issue was resolved immediately.

It may be optomistic but we have to believe that email clients are just as concerned with overall customer satisfaction as the next company. We are behind Campaign Monitor 100% when it comes to their visionary effort to bring universal standards to email developers worldwide! 

Emailology.org
With that in mind, we've just launched a new project called Emailology - the science of looking good in the inbox. There, you will find a guide for universally supported HTML/CSS and several other handy tools for developing HTML emails.

It may be a rough road ahead but until we start to see standards emerge, we are committed to help you navigate your "not so simple" task of developing and delivering HTML emails that render flawlessly across the board.

 



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

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

By Michelle Klann
June 7, 2011
 

CSS Browser Extensions in HTML Emails

CSS Browser Extensions in HTML emailsHere at Email on Acid, it's our number one priority to help you resolve email rendering issues as quickly and efficiently as possible. Our code analysis was specifically designed to process your HTML email and highlight individual lines of code that are not supported in each email client. We have also consolidated the advice from each of our blog articles and added them as tips and tricks to our Acid Test results.

With that said, we've recently added support for Mozilla, Webkit and Microsoft CSS extensions (for example: -moz-outline-radius, -webkit-border-radius, and -ms-text-justify). To learn more about the various CSS browser extensions that are available, feel free to check out these resources:

Here is what our research showed:

  HTML5 Button Element Embedded Button Appearance Property Inline Button Appearance Property Embedded Moz Extensions Inline Moz Extensions Embedded Webkit Extensions Inline Webkit Extensions Embedded Microsoft Extensions Inline Microsoft Extensions
AOL y y y y y y y n n
Gmail y n n n n n n n n
Hotmail y n n n n n n n n
Yahoo Beta y n n n n n n n n
Yahoo Classic y n n n n n n n n
Yahoo New y n n n n n n n n
 
Entourage 04 n n n n n n n n n
Entourage 08 n n n n n y - some y - some n n
Live Mail y n n n n n n n n
Lotus Notes 6.5 n n n n n n n n n
Lotus Notes 7 n n n n n n n n n
Lotus Notes 8 y y - moz only y - moz only y y n n n n
Lotus Notes 8.5 y y - moz only y - moz only Removes Entire Style Block y - some Removes Style Block n Removes Style Block n
Mac Mail y y- webkit only y- webkit only n n y - some y - some n n
Outlook 2003 y n n n n n n n n
Outlook 2007 n n n n n n n n n
Outlook 2010 n n n n n n n n n
Outlook Express y n n n n n n n n
Thunderbird 2 y y - some moz y - some moz  y y n n n n
Thunderbird 3 y y - some moz  y - some moz y y n n n n
Windows Mail y n n n n n n n n
 
Android Mail y y - some webkit y - some webkit n n y-some (IDs ONLY) y-some n n
Android Gmail y n n n n n n n n
iPad y y- webkit only y- webkit only n n y y n n
iPad Gmail y n n n n n n n n
iPhone y y- webkit only y- webkit only n n y y n n
iPhone Gmail y y- webkit only y- webkit only n n n n n n

Next we are moving on to HTML 5 and CSS3 - Stay tuned for our results!



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

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

By Michelle Klann
December 21, 2010
 
 
 

Convert Your Special Characters to HTML Entities

After our recent article regarding special characters in HTML emails, we've released another free tool that will convert all of your special characters to HTML entities. This will ensure that your characters render as intended no matter what Content-Type is imposed upon your email.



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

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

By John Thies
December 17, 2010
 
 
 

The Importance of Content-Type Character Encoding in HTML Emails

There have been many questions raised by our members on how email clients set the Content-Type within their HTML emails. As you may already know, the Content-Type plays a major role in the way an email will be displayed, especially with respect to special characters in non-Latin languages or when copying from a text editor like Microsoft Word.

In summary, all email clients ignore the Content-Type defined within your meta tag. Instead, they read it from the Content-Type value that is in the header of your email. The character type value within the header is automatically set by the server sending your email. This value can be changed but you would need direct access to the email server. The safest solution is to convert all of your special characters to HTML entities and we have created a free online tool to help assist you in that process.

What is Content-Type?

A Content-Type tells the web browser or email application how to interpret the text characters in your HTML or the body of the email. The most popular character sets are UTF-8 and ISO-8859-1.

To illustrate, let's take the following code:

<p>UTF-8 Characters: ö ü ä</p>
<p>UTF-8 Chinese: 激 光 這 </p>
<p>HTML Entity Characters: &#28450; &#23383;</p>

Here's how it renders using each character set:

As you can see above, the Chinese symbols are not represented in the ISO-8859-1 character set. This is because ISO-8859-1 only includes Latin based language characters. The result is a bunch of jumbled text, which is the ISO-8859-1 interpretation of the symbols.

Where does this all fit into HTML emails?

In website development, we can tell the web browser what character set to use in a meta tag like this:

<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />

Emails are displayed in clients using the same premise. It will display the email based on what Content-Type has been set. However, email clients read the Content-Type value that is set in the email header and they completely ignore the META tag that is within the HTML.

How does the email header Content-Type get set?

The header content is set by the server sending the email and contains information like To, From, Date, Time, etc. Some of which is displayed at the top of each email when viewing it in an email client.

Here is a snippet of an email header (notice the Content-Type value):

Date: Wed, 15 Dec 2010 12:45:55 -0700
To: test@test.com
From: testfrom@test.com
Subject: UTF-8
Message-ID: <e06deabc923f3378e4b237a20be324cc@www.test.com>
X-Priority: 3
X-Mailer: EOAMailer 5.0.0
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
Content-Type: text/html; charset="UTF-8"

Email client test results

I sent the above code example to all the email clients that we support. Pretty much every client renders text based on the Content-Type value set in the email header. Gmail is the only client that automatically converts your text to UTF-8, no matter what the header Content-Type is set to.

Here are the test results:

Clients Content-Type
AOL
Hotmail
Outlook Express
Outlook 2003, 2007 and 2010
Lotus Notes 6.5, 7, 8 and 8.5
Live Mail
Windows Mail
Entourage 04 and 08
Yahoo Classic, Current, and Beta
Thunderbird 2 and 3
iPad
iPhone Mail
Android Mail
Each take the Content-Type from the header of your email
Gmail
Android Gmail
iPhone Gmail
iPad Gmail
Each convert the Content-Type to UTF-8


One thing that I found very suprising is the fact that the web-based clients convert your text to the Content-Type character set prior to displaying it in the browser. I was able to check this by viewing what Content-Type they were setting in their META tags. As it turns out most of them are using UTF-8.

The Solution

Now you might be saying to yourself, great just when I thought designing emails wasn't complicated enough. It does in-fact add another layer of complexity but there are a couple fairly easy solutions.

Option 1:
Contact your email service provider and ask them what Content-Type they set in the header when sending the emails. Once you know the Content-Type use that value in your HTML Meta tag when designing the email.

Option 2:
Convert all special characters to their HTML entities and you won't have to worry about the header Content-Type. For example, the following character "æ¼¢" has an HTML entity value of "&#28450;". To help assist you in the conversion we have created a free online tool that will convert all of your special characters for you! Just use this conversion tool before you send your email.

In Conclusion

It is always important to check your character sets using both IE and Firefox, especially if you are using non-Latin characters or copy/pasting content from a text editor like Microsoft Word.

At this time, when you submit an Acid Test, our servers are configured to send your email using the UTF-8 Content-Type to each of our supported email clients.  We will be adding an option for selecting your Content-Type in the near future.



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

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

By Michelle Klann
December 14, 2010
 
 
 

Override the Font Resizing on the Android

In reading one of Campaign Monitor's more recent posts: Override the minimum font size on the iPhone and iPad, we had a hunch that this trick might also work on the native Android email client so we decided to investigate a little further.

As a follow-up to our recent post: Become a Pro at designing emails on the Android, we mentioned that the Android client increases your font sizes by approximately 110% and that we didn't know of a work-around. Well thanks to Brain Thies and Campaign Monitor, we have a fix you can try out!

Here is an example of a layout rendered in Safari on the PC. As you can see, I am making heavy use of TD padding in order to place text over a background image:

Android Font Size


Here is an example of the same layout in the Android (horizontal view):

Android Font Size


In an attempt to fix the header fonts and the size of the fonts in my content, I added the following code snippet inside the <head> tags of the email.

<style>
* {-webkit-text-size-adjust: none}
</style>

Here is how it looked after the fix.

Android Font Size

As you can see my fonts are still not matching up exactly. So I decided to dig even further!

Note: First, I tried * {-webkit-text-size-adjust: 95%} hoping to get an exact representation of what I was seeing in the above example. I learned that the Android doesn't support a percentage value for this CSS3 property so in order to use this fix, you must use a value of "none."

Note: By default, fonts on the native Android email client are displayed in Helvetica.

Here are the results of a font test I ran comparing the font I used in the above example (Georgia). In my test, Georgia was the only font in the stack. I compared it before and after the fix and in Safari (on my PC):

Android Font Size

As you can see, the Android renders the Georgia font differently which is what caused my initial frustration with the above layout. I tested the Georgia font on the Mac and it rendered very similar to my PC. I might consider following up with some further research regarding which fonts come standard on the iPhone and Android OS but from this research, I am currently under the impression that the Android simply doesn't have the Georgia font installed.

In Conclusion

This is certainly a worthy fix and I definitely recommend it for the Android but I would steer clear of attempting to overlay text on images like my example above because it may not be as precise as you'd like it to be. To be safe, make sure that your design is flexible enough to accommodate for a 3% increase or decrease in your font sizing throughout your entire email and use the fix mentioned in this post for optimal results on the Android.



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

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

By Michelle Klann
December 10, 2010
 
 
 

Hexadecimal vs. RGB Values in HTML Emails

HTML Email Design

We had a recent question in our forums regarding which clients support hexadecimal vs. RGB values so I figured I would publish the results of my research to our blog as well.

In summary, it is best to avoid using rgb(255,0,0) values when developing HTML emails. Long hex (#F00F00), Short hex (#F00) and colors (red) are supported in all the email clients I tested.

What I found interesting is that some clients support RGB colors on fonts but not in backgrounds or borders. I should point out that I used inline CSS in all of my testing. You can view my test here.

The clients that do NOT offer full support for RGB values are: Hotmail, Lotus Notes 6.5, 7 and 8.

Font Color Test

Web
  Short Hex (#F00) Long Hex (#F00F00) RGB(255,0,0) Color Name (red)
AOL Web y y y y
Gmail New y y y y
Hotmail y y y y
Yahoo (Classic) y y y y
Yahoo (Current) y y y y
Yahoo (Beta) y y y y
Desktop
  Short Hex (#F00) Long Hex (#F00F00) RGB(255,0,0) Color Name (red)
Entourage 2004 y y y y
Entourage 2008 y y y y
Live Mail y y y y
Lotus Notes 6.5 y y y y
Lotus Notes 7 y y y y
Lotus Notes 8 y y n y
Lotus Notes 8.5 y y y y
Mac Mail y y y y
Outlook 2003 y y y y
Outlook 2007 y y y y
Outlook 2010 y y y y
Outlook Express y y y y
Thunderbird 2 y y y y
Thunderbird 3 y y y y
Mobile
  Short Hex (#F00) Long Hex (#F00F00) RGB(255,0,0) Color Name (red)
Android 2.2 y y y y
Android Gmail 2.2 y y y y
iPad 3.0 y y y y
iPad Gmail y y y y
iPhone 3.0 y y y y
iPhone Gmail y y y y

 

Border Color Test

Web
  Short Hex (#F00) Long Hex (#F00F00) RGB(255,0,0) Color Name (red)
AOL Web y y y y
Gmail New y y y y
Hotmail y y n y
Yahoo (Classic) y y y y
Yahoo (Current) y y y y
Yahoo (Beta) y y y y
Desktop
  Short Hex (#F00) Long Hex (#F00F00) RGB(255,0,0) Color Name (red)
Entourage 2004 y y y y
Entourage 2008 y y y y
Live Mail y y y y
Lotus Notes 6.5 n n n n
Lotus Notes 7 n n n n
Lotus Notes 8 y y n y
Lotus Notes 8.5 y y y y
Mac Mail y y y y
Outlook 2003 y y y y
Outlook 2007 y y y y
Outlook 2010 y y y y
Outlook Express y y y y
Thunderbird 2 y y y y
Thunderbird 3 y y y y
Mobile
  Short Hex (#F00) Long Hex (#F00F00) RGB(255,0,0) Color Name (red)
Android 2.2 y y y y
Android Gmail 2.2 y y y y
iPad 3.0 y y y y
iPad Gmail y y y y
iPhone 3.0 y y y y
iPhone Gmail y y y y

 

Background Color Test

Web
  Short Hex (#F00) Long Hex (#F00F00) RGB(255,0,0) Color Name (red)
AOL Web y y y y
Gmail New y y y y
Hotmail y y y y
Yahoo (Classic) y y y y
Yahoo (Current) y y y y
Yahoo (Beta) y y y y
Desktop
  Short Hex (#F00) Long Hex (#F00F00) RGB(255,0,0) Color Name (red)
Entourage 2004 y y y y
Entourage 2008 y y y y
Live Mail y y y y
Lotus Notes 6.5 n n n n
Lotus Notes 7 n n n n
Lotus Notes 8 y y n y
Lotus Notes 8.5 y y y y
Mac Mail y y y y
Outlook 2003 y y y y
Outlook 2007 y y y y
Outlook 2010 y y y y
Outlook Express y y y y
Thunderbird 2 y y y y
Thunderbird 3 y y y y
Mobile
  Short Hex (#F00) Long Hex (#F00F00) RGB(255,0,0) Color Name (red)
Android 2.2 y y y y
Android Gmail 2.2 y y y y
iPad 3.0 y y y y
iPad Gmail y y y y
iPhone 3.0 y y y y
iPhone Gmail y y y y

 

As you can see, my primary focus was on hexadecimal vs. RGB and I used inline CSS. I will research background colors and images - defined by inline CSS vs. HTML attributes in another post.



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

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

By Michelle Klann
December 6, 2010
 
 
 

12 Fixes for the Image Spacing in HTML Emails

Have you ever noticed the small spacing below images in Hotmail and Gmail? Every browser renders this spacing except for IE 7 and lower. Just after writing this blog post: The Mystery of Hotmail's Strange Image Spacing, and after lots of hair pulling, we realized that the culprit for this pesky occurrence was actually the DOCTYPE.

What I find even more interesting is that the latest DOCTYPE for HTML 5 causes the same image spacing issues! Because of this we might see browsers like Firefox, Safari, Chrome and Opera come out with an update in the near future. Until then, welcome to the party web developers.

The following DOCTYPES cause the spacing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>

Examples before any fixes:

Below are some options for correcting the issue.

Option 1.) Add style="display:block" to your image

Example:

<img src="http://www.test.com/test.jpg" style="display:block">

This is the most popular fix but as you can see above, it causes a line break before and after your image. If you are working on an HTML email, this fix must be done inline for each image (like the example above) because Gmail does not support embedded or linked style sheets.

Options 2-8.) If your image height is greater than 16px, set the "align" attribute in the image to any of the following: absmiddle, middle, left, right, absbottom, texttop OR top

Example:

<img src="http://www.test.com/test.jpg" align="absbottom">

Note: align="baseline" and align="bottom" do not work. Keep reading if your image height is less than 16px.

 

Option 9.) Place the image in a block element with a style="line-height:10px" (or lower)

Example:

<div style="line-height:10px">
<img src="http://www.test.com/test.jpg">
</div>

 

Option 10.) Place the image in a block element with a style="font-size:2px" (or lower)

Example:

<div style="font-size:2px">
<img src="http://www.test.com/test.jpg">
</div>

Obviously, this is only an option if you don't have any text in the container.

Option 11 & 12.) Add style="float:left" OR style="float:right"

Example:

<img src="http://www.test.com/test.jpg" style="float:left">

Both Gmail and Hotmail support the float property. Again, if you are working on an HTML email, this fix must be done inline for each image because Gmail does not support embedded or linked style sheets.

If your image is less than 16 pixels high:

Only seven of the above fixes will work:

  1. Add style="display:block" to the image
  2. Add align="left" to the image
  3. Add align="right" to the image
  4. Add style="float:left" to the image
  5. Add style="float:right" to the image
  6. Place the image in a block element with a style="line-height:10px" or equal to the image height
  7. Place the image in a block element with a style="font-size:2px" (or lower)

 

Hopefully at least one of these work-a-rounds will meet your design requirements. If you are aware of additional fixes, don't hesitate to share it 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

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

By Michelle Klann
November 10, 2010
 
 
 

!DOCTYPE - The Black Sheep of HTML Email Design

As if email development wasn't already scary enough, it seems as though we are pushed even further into the HTML and CSS dark ages when it comes to the subject of DOCTYPE. After quite a bit of testing over the past year, we've have come to a very clear understanding of the DOCTYPE, it's effect on your layout and how being aware of it can save a lot of time and frustration.

First, you can't avoid it. Many email clients strip your DOCTYPE and either impose their own or leave it out entirely. Here is a breakdown:

Email Clients DOCTYPE

AOL
Android Gmail Application
Lotus Notes 6.5, 7, 8 and 8.5
Outlook 2007 and 2010
Thunderbird 2 and 3
Yahoo New

STRIP or IGNORE your DOCTYPE entirely

Android Mail Client
Entourage 04 and 08
iPad and iPad Gmail
iPhone and iPhone Gmail
(iOS3 & iOS4)
Kindle Fire
Live Mail
Outlook 2003
Outlook Express
Thunderbird 6
Windows Mail

ACCEPT your DOCTYPE
Gmail & Hotmail
Each will remove your DOCTYPE, and replace it with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Yahoo Classic
Removes your DOCTYPE, and replaces it with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
INTERESTING SIDE NOTE: If you've ever struggled with box model padding issues in IE, just use any DOCTYPE other than: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN>
For example: <!DOCTYPE html> - this doctype will cause all browsers to render your box elements consistantly.

Here are some common things that may happen to your email layout after its DOCTYPE has been stripped:

Since most email clients use a browser based rendering engine or can be viewed from within a web browser, the following list is broken down by occurrences that happen within web browsers.

  • Box model padding becomes an issue when viewing your email in IE vs Firefox
  • In IE 8, CSS padding on TABLEs are reset to "0" - for example:
    <table style="padding:20px">
  • Center tags with a set width will no longer be centered in all browsers except IE. For example: <center width="500px">
  • In IE, the minimum height on any EMPTY block element is 19px This is particularly important when using spacer divs.
    <div style="height: 10px "></div>
  • In all browsers except for IE 6 and 7, paragraph elements have a default top and bottom margin of "0" whereas it would otherwise use a default top and bottom margin of 16px.
  • In IE 8, you might see an exaggerated left margin on OLs and ULs, you will need to define the margins with inline CSS to correct this.
  • Some special characters are not supported

 

Here are some common things that may happen when your email takes on the Hotmail DOCTYPE:

  • Line height for small fonts may become more prevalent in all browsers except for IE. This is only an issue when using inline elements, use paragraph elements or TDs for formatting your small fonts.
  • You might see a small space below each of your images. A common fix is to use <style="display:block"> inside your image tag.
  • Some special characters are not supported
  • There may be a difference in the way your text links appear (colored underlines)

 

If you have more to add to either of these lists, please feel free to share your comments below!

So What's the SOLUTION?

Before running an Acid Test and to save time, we recommend that you strip out your DOCTYPE and test your email layout in IE 6, 7, 8, Firefox, Chrome, Safari and Opera. Once you have it looking good in all browsers, add the Hotmail DOCTYPE and run an Acid test using Firefox or Safari.

By adding a DOCTYPE when you run your Acid Test, we will be able to validate your HTML before you get your test results. We provide code validation for many reasons, the first is to ensure that our test results are accurate. Secondly, your code will be interpreted within the UI of each of the web based email clients - if you have a stray </div>, that could have a big effect on the way your will email render.

INTERESTING SIDE NOTE: The new DOCTYPE for HTML 5 (<!DOCTYPE html>) causes the same image spacing issues as Hotmail! 



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

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

Absolute vs. Relative References

It is important to note:  Our Email Test only supports absolute references to links and images embedded within your email.  So what's the difference between the two?  Hopefully this article will shed some light on the subject...

Using Absolute References (supported)

An Absolute Reference provides the complete http address, the directory path, and the file name. For instance, if you had a file named "logo.gif" in a directory called "images" under the URL "http://www.emailonacid.com" you would link to it as follows:

http://www.emailonacid.com/images/logo.gif

In html context, this might appear as:

<IMG ALIGN=bottom src="http://www.emailonacid.com/images/logo.gif">

Absolute references must also be used inside embedded or inline CSS.

Using Relative References (unsupported)

A Relative Reference provides a partial http address in the form of a fragment of a full directory path. Keep in mind that by default, if no server name or path is specified in html, the file reference defaults to the current directory. If you are publishing files on the web, the default would be any file within your www directory.

To use the example above, you would specify the link as

/images/logo.gif

In html context, this might appear as:

<IMG ALIGN=bottom src="/images/logo.gif">

 



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