Repurpose your Images for Mobile Email |
|
10.19.2011 Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing! |
|
By Michelle Klann
December 20, 2011 Customize your email for the new Xoom, Kindle Fire, and iPad Tablets!
<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>
|
|
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!
By Michelle KlannNovember 9, 2011 |
5 Reasons you Should Always Validate your HTML Code when Developing EmailsCoding 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 2.) A random "</div>" can stick a wrench in Gmail and Hotmail 3.) Desktop email clients render errors differently 4.) Empty TD's will get their fill from Gmail <td width="1"> </td>
Will get converted to this: <td width="1">     </td>
5.) If you have random elements in your tables, Gmail will try to fill in the blanks <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 ConclusionWhen 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.
|
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!
|
By Michelle Klann
October 13, 2011 Emailology - the Science of Looking Good in the InboxAnnouncing 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.
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
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
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
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
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!
|
|
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!
By Michelle KlannSeptember 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 Fix Outlook Campaign Blogging for Change 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 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.
|
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!
|
By Michelle Klann
June 7, 2011 CSS Browser Extensions in HTML Emails
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:
Next we are moving on to HTML 5 and CSS3 - Stay tuned for our results! |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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!
By Michelle KlannDecember 21, 2010 |
Convert Your Special Characters to HTML EntitiesAfter 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. |
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!
By John ThiesDecember 17, 2010 |
The Importance of Content-Type Character Encoding in HTML EmailsThere 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: 漢 字</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 resultsI 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:
The SolutionNow 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: Option 2: In ConclusionIt 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. |
||||||
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!
By Michelle KlannDecember 14, 2010 |
Override the Font Resizing on the AndroidIn 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: ![]()
<style>
* {-webkit-text-size-adjust: none} </style> Here is how it looked after the fix.
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): ![]() 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 ConclusionThis 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. |
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!
By Michelle KlannDecember 10, 2010 |
Hexadecimal vs. RGB Values in HTML Emails![]() 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
Border Color Test
Background Color Test
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. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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!
By Michelle KlannDecember 6, 2010 |
12 Fixes for the Image Spacing in HTML EmailsHave 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:
![]()
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! |
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!
By Michelle KlannNovember 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:
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.
Here are some common things that may happen when your email takes on the Hotmail DOCTYPE:
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!
|
||||||||||
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!
Absolute vs. Relative ReferencesIt 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">
|
|
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!