So I don’t have to keep searching through my twitter feed every time I want to use the AOL hack, here it is:
AOl supports unicode in class but not id, therefore:
<td class=”★” id=”★”> .★:not(#★){ aol:styles }
Vertical alignment in hybrid coding
I was reminded today about a common vertical alignment frustration when using a hybrid layout. When two divs are next to each other, use vertical-align:top; on both. But that’s not the end. Be sure to add valign="top" on both of your ghost <td>.
Knowledge Dump 2
Today’s entry is about identifying rendering issues. Some have fixes and some don’t. Either way, you should be aware of these points.
- Put ‘valign=”top”‘ on the containing div to vertically align side-by-side tables of different heights to the top.
- Emails that are too tall are cut off at 1790px in Gmail, with “message clipped” at the bottom.
- The Outlooks periodically will not read, and therefore not render, borders. This happens most often with border-left. There is no fix for this.
- It’s best practice to add a background-color to images. Do not add the background-color to the td surrounding the image.
- Android native mail app will show a declared background-color on an image as a thin side border on the image. There is no fix for this.
A Tale of Two VMLs
Did you know 2 VML images cannot exist in the same container without looking jacked up?
While coding an email in a hybrid manner recently, I came upon this conundrum. Two background images were necessary, but wouldn’t play nice. The first VML on the body table was working just fine, but the second background image kept appearing in the top left corner of the body in all the Outlooks rather than halfway down the email as it should have.
The solution to this was to break the email into two pieces:
<body style="margin: 0 !important; padding: 0 !important; background-color: #FFFFFF;">
<table background="background_image.jpg" style="background-size:cover; background-position:top left; background-repeat: no-repeat; font-size: 0; mso-line-height-rule: exactly; line-height: 0px !important; mso-line-height-alt: 0; background-color: #FFFFFF;" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" valign="bottom">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 1000px; height: 800px; background-color: #FFFFFF;" valign="bottom">
<v:fill type="frame" src="background_image.jpg" color="#FFFFFF" />
<v:textbox inset="0,0,0,0">
<![endif]-->
< div align="center">
...
< /div>
<!--[if gte mso 9]>
<p bgcolor="#FFFFFF" style="margin:0;mso-hide:all;background-color: #FFFFFF !important; font-size: 0 !important; line-height: 0 !important;"><o:p xmlns:o="urn:schemas-microsoft-com:office:office" bgcolor="#FFFFFF" style="margin:0;mso-hide:all;background-color: #FFFFFF !important; font-size: 0 !important; line-height: 0 !important;"> </o:p></p>
</v:textbox>
</v:rect>
<![endif]-->
</table>
<table width="100%" style="padding: 0; margin: 0;" border="0" align="center" cellpadding="0" cellspacing="0" valign="top" bgcolor="#FFFFFF">
<div align="center">
The email is split into two main containers so that it’s no longer a “neither can live while the other survive” situation.
Now, I bet you’re wondering why there’s an ugly paragraph tag in the closing Outlook conditional after the first container. That’s the fix to the problem you will have of a rather tall gap between containers. Luckily, Stig Morten Myre found the way to combat this. Turns out Outlook’s Word rendering, in its infinite wisdom, is inserting a paragraph tag between the containers.
I found that my situation required a bit more oomph in the zeroing-out department, so I put !importants after the font-sizes and line-heights.
All of it works together seamlessly, so there is a happy endinng.
Top 6 Gmail Hacks Every Emailgeek should know
Fab Four: A technique invented by Rémi Parmentier, the fab four uses the calc() function, width, min-width, and max-width properties. The min-width property defines the column width on the desktop version while the max-width property defines them on the mobile version. The calc() function and the width property are combined as to “create a value bigger than our max-width or smaller than our min-width, so that either one of those propert(ies) is applied instead.”
lang: Justin Khoo writes of this hack: “…simulate CSS class selectors in Gmail by targeting attributes that Gmail does not strip such as the title attribute.” In my experience, this hack does not always work. My initial worries of accessibility with this hack were erased by Mark Robbin’s comments: “lang could affect accessibility if it’s read as a language but if you prefix it with `x-` it’s not read as a language so `lang=”fr”` is French but `lang=”x-fr”` means nothing.” Perfect! Just put an “x-” in front.
—-: I’m not sure who developed this hack, but I first saw it in the Litmus Comunity. It uses dashes in a hidden div to force the email to display the full width in Gmail App to bypass the mobile resizing.
img width em: Discovered by Mark Robbins, this hack combats the resizing antics of Gmail on iOS by using ems on the width and font-size properties for images so that when the font-size is increased, the image will be increased as well.
fake position: absolute: Posted on the Rebelmail blog, this hack works in modern email clients like iOS, Android, Apple Mail, AOL, etc. Absolute positioning is achieved with 3 nested divs. First, the container div, then one set to display inline-block and set with margin-top and margin-left, and lastly, the div doing the heavy lifting by being set at max-width and max-height set at 0. This div takes up no space on the page, but the overflow can still be seen, thus acting like position: absolute.
max-height:0: This property is used in conjunction with display: none; line-height: 0, font-size: 0, and overflow: hidden to hide content.
This post was inspired by Mark Robbins’ tweet.
Knowledge Dump 1
I’ve been wanting to do a knowledge dump on this blog for awhile now. I know a decent amount about email development – enough for me to forget some of it from time to time. I hope some of this will be helpful for others, but it is kind of a selfish endeavor. I’m hoping to write down at least 5 items of knowledge every week. Here we go:
- It is generally good practice to put widths only on tables and styles only on tds. If you find yourself putting a width on a td, add a new table instead.
- Put a non-breaking space between the last two words in a paragraph to avoid orphans.
- Use non-breaking hyphens (‑) in a phone number to avoid breaking.
- If your hidden preheader is too short and you can’t increase the copy, yet want nothing other than the preheader to show in the few lines following the subject line, put the following immediately after the preheader text. Repeat as needed (usually 5X for 4 lines):
<br/>‌
- Center alt text by specifying a line-height.
That’s 5. Till next time.
