Every week the Splash Digital team will be blogging their Email Tips and Tricks to share with the world. Because they love emails, I mean really, really love emails!
This week Email Designer and Developer, Adam picks his 4 best CSS fixes for pain-free, and beautiful email builds:
If you’re here because like me you believe that building emails is like trying to assemble the world’s biggest jigsaw puzzle, well never fear us at Splash Digital are here to help! Having been a part of a team that builds E-mails for a living we’ve collaborated in creating a small list of tips and tweaks that will hope help your email build be pain free.
CSS is the key to make your emails stand out from the rest. Simple. Just because your coding like it’s 1999 doesn’t mean it has to look like its 1999, don’t be afraid to get creative! However, just dumping CSS in your code is potentially a minefield of rogue colours and erroneous underlines. Carefully positioned code, rigorous testing and taking note of a few of these pointers will help you on your way.
1. E-mail clients vs CSS
Majority of email clients strip the CSS within the document out, however if you do need to have CSS within the email then place it within the head of the html.
A:link {text-decoration: none; color:#01243e;}
A:visited {text-decoration: none; color:#01243e;}
A:active {text-decoration: none; color:#01243e;}
A:hover {text-decoration: underline; color:#01243e;}
‘Cover all bases’ should be at the top of any email mantra and this CSS fix definitely fulfils that!
2. Link styling
Ahhhh the wonderful #0000FF hyperlink, this can stand out like a sore thumb if it doesn’t fit in with the colour scheme in the email. So lets correct these nice looking Blue Links
To fix this all you need to do is wrap the href tag around the outside of the span and contain style=”colour:#000000;” full example below.
<a style="color: #ff00ff;" href="http://somesite.com/"> <span style="color: #ff00ff;">this is a link</span> </a>
3. Mail chimp fix
These are not necessary created by Mail Chimp but it is a source that I and many email developers use as a research tool. I have only recently come across these client specific fixes, all three are very useful. The last fix (text-size-adjust) I have been using awhile due to the increasing volume of emails being viewed in mobile browsers. Simply slot these lines of code within the CSS contained in the header mentioned earlier and away you go.
/* Client-specific Styles */
/* Force Outlook to provide a "view in browser" button. */
#outlook a{padding:0;}
/* Force Hotmail to display emails at full width */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
4. CSS reset
CSS reset is not new to me as I come from a web design background where they are used regularly, however I never thought of adding one to emails due to the CSS restrictions from clients (they tend to strip a lot off CSS out). But, I came across a HTML email boilerplate and low and behold it had one in place! For the laymen a CSS reset essentially does exactly what it says on the tin by resetting all the CSS in the browser first before it loads your styles. This is handy because some (most!) clients will add in their own styling that will overwrite yours and this handy bit of code will wipe the slate clean before it adds your beautiful CSS. Once again this will sit within the CSS style type within the header of your HTML document. It may look daunting, but give it a test!
<!--
/* Client-specific Styles */
/* Force Outlook to provide a "view in browser" button. */
#outlook a { padding: 0; }
body { width: 100% !important; } .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; } /* Force Hotmail to display emails at full width */
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; } /* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
/* Reset Styles */
body { margin: 0; padding: 0; }
img { height: auto; line-height: 100%; outline: none; text-decoration: none; }
a img { border:none; }
#backgroundTable { margin: 0; padding: 0; width: 100% !important; }
p {
margin: 1em 0;
}
h1, h2, h3, h4, h5, h6 {
color: black !important;
line-height: 100% !important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: blue !important;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: red !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
table td {
border-collapse: collapse;
}
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important; } /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */
-->
To get hold of the latest version of HTML Email Boilerplate —> Go Here