Coding Pixel Perfect Emails [Part 3]

Reset styles and client bugs!

We’ve already looked at some general structural pointers in coding pixel perfect emails, now let’s examine some things we should avoid (or at least be aware of) when coding emails.

Paragraph Tags

These are commonly inserted when returning in WYSIWYG editors or copy/pasting from non-plaintext sources. Various email clients handle the treatment & spacing of paragraph tags very differently making certain layouts difficult to maintain. It’s almost always better to use regular line breaks, or double line breaks for new paragraphs in your copy. To achieve exact spacing outside of blocks of copy, use an empty div with a “font-size” set or a shimmed table with it’s cell height set.

Padding, Margin, H-space

Similar to paragraph tags, these are often used to achieve horizontal spacing, around images aligned within a block of text. A more reliable way of getting the same effect is baking the padding into the image itself or adding a gutter cell.

Line-height and Lists

Outlook is finicky enough with line height but combined with unordered/ordered lists have a bug that will ignore line height after unordered lists. So before your list everything looks fine and after it, your text will be smushed together.  This makes your line spacing unpredictable and inconsistent, it is recommended to stick with normal line height or don’t use lists at all.

Multi name fonts with quotes

In AOL mail in explorer the entire line will be ignored and replaced with a default serif font will show up. For instance setting the font to “Helvetica Neue” will be ignored, even if you set backup fonts via font-family the entire line will be ignored and replaced with a default serif font.

Multi name fonts with dashes instead of quotes, such as sans-serif will work properly with the backup fonts.

Regular heading tags

There are a number of things that can go awry when using default heading tags, it’s often safer and easier to use custom classes to style your headings (such as .h1, .h2, .h3 etc.) this removes the need to troubleshoot many issues where email clients like to over ride heading tag styles.

Odd widths

Try to keep all of your images, tables and cells at even widths. This will help to avoid those annoying 1 pixel shifts across various email clients when those assets are centered.

Reset Styles Cheatsheet

One of the biggest annoyances in email is how your styling gets overridden with some other default style. Using this block of reset CSS will level the playing field and greatly increase how well your emails render across clients, operating systems and browsers. Special thanks to Mailchimp Email Blueprints for some of these reset styles.

Force Hotmail to display emails at full width.


.ReadMsgBody {width: 100%;}

.ExternalClass {width: 100%;}

Forces Hotmail to display normal line spacing.

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}

Prevents the auto resizing of text on mobile devices.

body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}

Addresses various layout issues.

body {margin:0; padding:0;}

table {border-spacing:0;}

table td {border-collapse:collapse;}

Removes Yahoo’s special link styling.

.yshortcuts a {border-bottom: none !important;}

Addresses Gmail image gaps and other image issues.

img{border:none; outline:none; display:block;}

That’s all for now. Next stop, responsive emails!

——-

Read other “Pixel Perfect” posts:

• Part 4: Responsive Emails
• Part 2: Images
• Part 1: Making it Modular