/HTML-Email-Hacks

A series of HTML hacks for all those lovely Email clients out there

HTML-Email-Hacks

A series of HTML hacks for all those lovely Email clients out there.

This repo is a place to put all of the HTML Email hacks we all depend on so much to get our campaigns looking and feeling sweet and spiffy.

Links and Helpful Tools

Click To Tap:

Change button text responsively

@media screen and (max-width:600px) {
	span[class=click] { display: none !important; max-height: 0 !important; }
	span[class=tap]:after { content:"Tap"; }
}
<a href="#"><span class="tap"><span class="click">Click</span></span> here</a>

-courtesy of Nicole Merlin

Kill Gmail App Zooming:

Stop Gmail app from zooming text

style="min-width:600px;"

-courtesy of Chris Wise

Target Webkit Clients:

Webkit support is best support

@media screen and (-webkit-min-device-pixel-ratio:0) { }

-courtesy of Kevin Mandeville

Margins and Float in Outlook:

Use a capital “M” or “F”

style="Margin: 20px; Float: left"

-courtesy of Nicole Merlin

Interactive Email in Gmail:

No Class or ID selector support

Use lang as selector with "x-" prefix

* [lang~="x-selector"] { }
<div lang="x-selector"></div>

-courtesy of Justin at FreshInbox

Interactive Email con’t - Hover!:

Hover effect works on these clients:

Gmail:

* [lang~="x-selector"]:hover { }

Outlook Web:

.class:hover

Yahoo! Web:

.class:hover

-courtesy of Justin at FreshInbox

Outlook “View in Browser”:

Forces Outlook to provide a “view in browser link”

#outlook a { padding: 0; }

Images in Outlook 2013:

Fix broken images in Outlook 2013

<td style="line-height: 13px;">
	<img src="img.jpg" />
</td>

Remove autolink styling in iOS:

Fix automatic styling of phone numbers, etc.

Use a span:

.appleLinksBlack a { text-decoration:none !important; }
.appleLinksBlack a { color:#000000 !important; }
<span class="appleLinksBlack">866-787-7030</span>

Add additional classes such as .appleLinksWhite a, .appleLinksPink a when appropriate

-courtesy of Justine Jordan

Stop some clients from stripping class:

Some clients strip any lines starting with “.”

Use a space before any class styling

 .selector { }

-courtesy of Campaign Monitor http://kb.mailchimp.com/campaigns/ways-to-build/using-css-in-campaigns

Hide content in Office 365 (incl Webmail):

Office 365 strips display, mso-hide, mso conditional

Set font-size in containing cell to “0px”

<td style="font-size: 0px; display: none;"></td>

Good formatting for bulleted list:

Stops bullet from sitting between two lines

<table>
	<tr>
		<td valign="top">&bull;</td>
		<td>Prolongs oil life</td>
	</tr>
</table>

-courtesy of Michelle Klann

Ghost column to emulate "align" in Outlook

Outlook hates "align"; we love conditionals

<td>
	Table X
	<!--[if mso]></td><td><![endif]-->
	Table Y
</td>

-courtesy of Mike Ragan http://labs.actionrocket.co/make_mobile_email_work_in_outlook

Windows Phone 8 CSS3 support (IE Mobile)

Windows Phone 8 renders with IE7 standards by default with POP3/IMAP accounts

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Note: Exchange ActiveSync based accounts do not benefit from forcing the document mode because the rendering engine is not IE Mobile.

For more information see http://blog.jmwhite.co.uk/2014/08/19/email-campaigns-windows-phone-part-2-pop3-and-imap/

-courtesy of zerocents and James White

Fix mailto in Outlook.com

Outlook.com stops mailto from opening a new message

Add "target=_blank"

<a href="#" target="_blank">Link</a>

-courtesy of Matthijs

Fix mailto in gmail

gmail strips subject and body from mailto links

Use lowercase for subject and body attribute

<a href="mailto:some_email@email.com?subject=A Subject&body=A Body">email@email.com</a>

-courtesy of SV

Image gaps in Office 365 (OWA)

Office 365 strips display:block causing images to have massive gaps

Wrapping an image in a <div> with a height equal to the image height will simulate a block element for clients that won't accept display:block.

<div style="height:125px;">  
    <img src="/path/to/image.jpg" alt="Image Description" style="display:block;" width="200" height="125" />  
</div>

In some cases the addition of font-size:0; may be required in order to remove further gaps created by certain CSS properties set on the parent element i.e. table cell such as line-height.

Warning: Small font sizes can effect your spam score.

For more information visit: http://www.emailonacid.com/blog/details/C13/two_fixes_for_image_spacing_in_outlook_web_app_owa

-courtesy of James White at http://blog.jmwhite.co.uk