best practices for header to improve rendering

[JoeMurray]

I'm wondering if there are suggestions for best practices on what to put in headers (and footers, too, I guess) to ensure good consistent rendering in various email clients. For example, I think the header used for CiviCon London had several tricks in it:


<!-- put in message template header --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta name="viewport" content="width=device-width" > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title style="margin: 0;padding: 0;font-family: Lucida, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif, Arial, sans-serif;color: #222222;">CiviCon London 2013</title> <style type="text/css"> /* Based on The MailChimp Reset INLINE: Yes. */ /* Client-specific Styles */ #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */ body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/ .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */ .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Forces Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */ #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;} /* End reset */ /* Outlook 07, 10 Padding issue fix Bring inline: No.*/ table td {border-collapse: collapse;} a:hover { color: #09F !important; text-decoration: underline !important; } a:hover#vw { background-color: #CCC !important; text-decoration: none !important; color:#000 !important; } a:hover#ff { background-color: #6CF !important; text-decoration: none !important; color:#FFF !important; } @media only screen and (max-width: 600px) { a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;} div[class="column"] { width: auto!important; float:none!important;} table.footer div[class="column"] { width:auto!important; } .footer, .container, .content, .registered { width 100% !important; } } @media only screen and (max-width: 400px) { .content.head img, .footer, .container, .content, .split-wrap .column2.gray, .split-wrap .column1.gray { width: 300px !important; max-width: 300px !important; min-width: 300px !important; } .registered { width: 280px !important; max-width: 280px !important; min-width: 280px !important; } .footer .column { width: 270px !important; max-width: 270px !important; min-width: 270px !important; } .split-wrap .column2.gray img, .split-wrap .column2.gray p, .split-wrap .column1.gray p { width: 280px !important; max-width: 280px !important; min-width: 280px !important; } .split-wrap .column1.gray img { width: 300px !important; max-width: 300px !important; min-width: 300px !important; } .split-wrap .column p, .split-wrap .column h1, .split-wrap .column h2, .split-wrap .column h3, .split-wrap .column h4 { padding: 0px !important; } .split-wrap .column2, .signature .column2 { float: left !important; } img { width: auto !important; height: auto !important; } .beat-maininfo { text-align: left !important; } .top-icons.beat-maininfo { float: none !important; } .navend.first, .navend.last, .navlinks, .nav-wrap { display: none !important; } .split-wrap .column1 img, .split-wrap .column2 img { width: 300px !important; min-width: 300px !important; max-width: 300px !important; } .column2.logo { padding-top: 0px !important; valign:top; }    } </style> </head> <body bgcolor="#FFFFFF" style="margin: 0;padding: 0;font-family: Lucida, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif, Arial, sans-serif;color: #222222;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;font-size: 13px;width: 100%;"> <!-- /head -->


and here is the matching footer:


<!-- FOOTER --> <table class="footer-wrap" style="margin: 0;padding: 0;font-family: Lucida, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif, Arial, sans-serif;color: #222222;border-spacing: 0;width: 100%;clear: both;"> <tbody> <tr style="margin: 0;padding: 0;font-family: Lucida, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif, Arial, sans-serif;color: #222222;"> <td style="margin: 0;padding: 0;font-family: Lucida, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif, Arial, sans-serif;color: #222222;"> &nbsp;</td> <td align="center" class="container" style="margin: 0;padding: 0;font-family: Lucida, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif, Arial, sans-serif;color: #222222;width: 600px;max-width: 600px;clear: both;"> <!-- content --> <div class="content" style="margin: 0 auto;padding: 0;font-family: Lucida, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif, Arial, sans-serif;color: #222222;max-width: 600px;width: 600px;display: block;text-align: left;"> </div> <!-- /content --></td> <td style="margin: 0;padding: 0;font-family: Lucida, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif, Arial, sans-serif;color: #222222;"> &nbsp;</td> </tr> </tbody> </table> <!-- /FOOTER --> </body></html>

[Michael McAndrew]

Hey Joe,

I'm reasonably sure that Katy Jockelson is the right person to ask about that.

Michael

[Katy J]

Hi Joe,

I used the code from the templates available here: http://htmlemailboilerplate.com as a starting point for the Civi header and footer. I pulled out key things like which inline styles to use for all links and images, and used a lot of the header code too. The things to be aware of are that different mail clients render bits and bobs differently. In my experience the only way to get the styles 100% consistent across all clients/browsers are to put inline styles for all elements. If you can't do that, and need to rely on styles in the header, then try to keep the body text really simple - like, just use bold for headings etc. You can end your header with an open div with inline styles and begin your footer with the closing div tag.

A good guide for how different mail clients handle css is here: http://www.campaignmonitor.com/css/.

Particular things that have stumped me before are:

- All mail clients revert to the default blue for links. You can override this with an inline style declaration for colour, but Gmail won't listen to 'black' or '#000000' so use any other colour.

- Yahoo, and probably others are stubborn about using their own margins, so experiment with the best inline styles, or accept their weird spacing.

- You'll often see spacing around images which is a particular pain when you are using 2 halves of an image in separate cells, and you want them to look flush. You'll need to add in style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:0 none;" width="X" height="Y" for images to be safe.

- Comment your code really well. It's very easy to get lost when you've got tables within tables within tables etc.

Further useful guidelines: http://thesiteslinger.com/blog/10-tips-for-designing-html-emails/

And always include a link to the website hosted version of the email (token: {mailing.viewUrl}), and make sure the mailing visibility is set to Public pages rather than User and admin only (you'll see this option in the CiviMail wizard).

With CiviMail, you have to include the {domain.address} token and one of the unsubscribe links.

Good luck!

[JoeMurray]

Thanks, Katy. I think this is of general interest and should be included in any update to the book, or at least moved over to the wiki.