HTML-Email-Hacks

by FunWithEmail

FunWithEmail / HTML-Email-Hacks

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

125 Stars 8 Forks Last release: Not found 42 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

  • Responsive Email Resources: www.ResponsiveEmailResources.com
  • Bulletproof Buttons: www.buttons.cm
  • Bulletproof Backgrounds: www.backgrounds.cm
  • HTML Email Boilerplate: http://htmlemailboilerplate.com
  • Special characters for HTML Email: http://www.emailonacid.com/character_converter/
  • Send HTML Email with Google Docs: http://www.labnol.org/internet/send-html-email/19672/
  • SpamAssassin Spam Scores: http://spamassassin.apache.org/tests30_x.html
  • W3C HTML for email Community Group: http://www.w3.org/community/htmail/participants
  • The Ultimate Guide to CSS: https://www.campaignmonitor.com/css/

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"; }
}
Click here

-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

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

-courtesy of Justin at FreshInbox

Interactive Email con’t - Hover!:

Hover effect works on these clients:

Gmail:

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

Outlook Web:

css
.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

    

Remove autolink styling in iOS:

Fix automatic styling of phone numbers, etc.

Use a span:

css
.appleLinksBlack a { text-decoration:none !important; }
.appleLinksBlack a { color:#000000 !important; }
html
866-787-7030
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

css
 .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”


Good formatting for bulleted list:

Stops bullet from sitting between two lines

Prolongs oil life

-courtesy of Michelle Klann

Ghost column to emulate "align" in Outlook

Outlook hates "align"; we love conditionals

    Table X
    
    Table Y

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

Windows Phone 8 CSS3 support (IE Mobile)

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


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"
Link

-courtesy of Matthijs

Fix mailto in gmail

gmail strips subject and body from mailto links

Use lowercase for subject and body attribute

[email protected]

-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

with a height equal to the image height will simulate a block element for clients that won't accept
display:block
.
Image Description

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/twofixesforimagespacinginoutlookwebapp_owa

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.