Hi,
First of all I want to thank you for subscribing to my newsletter. So thanks! :)
Why am I starting this newsletter? In August I started preparing a talk on email development and realized that my knowledge and notes are scattered between Evernote, GitHub issues, random secret gists, git logs, client emails, etc. if not just lost in my head somewhere.
So I started consolidating this information and asked myself, which email client bugs are still relevant? What responsive strategies are still valid? Which tricks still work? I think I have the answers. But they're in my head. And the best way to test this knowledge is to teach it to others. So let's give this a try.
I outlined some topics I wanted to cover on the newsletter page on my website. If you have a specific question, just hit reply and let me know. I will try to answer your question in a future newsletter.
I also want to share stuff I test out, but haven't written about yet, like this:
Experiment
|
Left to Right: iOS, Yahoo, Outlook 2003, Outlook 2013
Now that's what I called progressive enhancement ;-)
View design and code »
|
Now, without further ado, let's get back to learning and CSS resets sounds like a good place to start.
Cheers
Julie
|
Why do we need CSS resets?
|
Web Email clients have their own CSS defaults, that may conflict with your defaults. So you have to "undo" these changes as necessary.
Why won't email clients just leave our emails alone?
I think the email clients have resets to target normal communications, not your HTML emails. For example, if I send you a personal email through my email client, it will go through as HTML - but with little formatting. If this email happens to be a novel, Outlook.com wants to make it more legible by increasing the line-height:
|
|
|
|
That makes sense and improves user experience for the user. It is annyoing for us. But as Email developers, we can easily overwrite that. And thankfully in 2015, there are not that many required CSS resets.
|
|
<body> reset
|
 |
Let's remove any extra gaps around the frame of our email.
|
|
Sometimes devices try to adjust font sizes for legibility. We use senisible font sizes, so let's disable that:
|
|
body {
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
|
|
|
<table> reset
|
|
Tables aren't like <div>s and have their own inherit layout quirks. Let's disable that too:
|
table {
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
|
|
|
Outlook.com specific resets
|
|
As noted above, Outlook.com sets a default line-height: 142% on all elements. If you inline your CSS, this should not be a problem, but let's reset some common cases, just in case:
|
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
line-height: 100%;
}
/* Outermost container in Outlook.com */
.ReadMsgBody {
width: 100%;
background-color: grey; /* your custom background color */
}
|
|
|
Microsoft Outlook Desktop Clients
|
|
Reset table spacing defaults for Outlook's rendering engine: Microsoft Word.
|
|
Images resized by Internet Explorer can look bad. Let's make them look less bad.
|
|
table {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
|
|
|
What about resets for…?
|
|
Here are some other resets that I use regularly, but I am honestly not sure if they are still relevant today. If you have anything to add, please let me know.
|
|
Images?
|
|
This Litmus foundations of email coding article has the following resets for images:
|
img,
a img {
border: 0;
outline: none;
text-decoration: none;
}
.imageFix {
display: block;
}
|
|
|
Depending on the DOCTYPE set by the email client, images may have small bottom gaps, especially in Gmail and Yahoo. The most common fix is to use display:block; on affected images. If your layout is image heavy, this is a good general reset.
But there are use cases where I need images lined up next to each other, for example icons, which conflicts with that prescribed default image behavior. Therefore, I do not use this in my resets. But you can choose to if you wish.
|
|
Yahoo Shortcuts?
|
Yahoo used to convert some keywords in your text into links, presumably to their own search engine and sites. See an example in this Email on Acid article.
Most fixes require that you override color with your link color. But because my link colors may vary in an email (depending on whether it's in a body text or header area), I use:
|
.yshortcuts a {
background: none !important;
border-bottom: none !important;
}
|
|
|
Further Reading
|
That's it for CSS resets for email. For once, we need less code for email HTML. But then again I've consciously left out certain tags like <p>, <h1>, <h2>, etc. since I believe you should not use these tags in email html. But that's a can of worms I will open in a future email on my code style and strategies.
For further reading on CSS resets, check out the following articles. But be aware that some information might be stale after a few years.
|
|
|
|
