CiviCRM Community Forums (archive)

*

News:

Have a question about CiviCRM?
Get it answered quickly at the new
CiviCRM Stack Exchange Q+A site
This forum was archived on 25 November 2017. Learn more.
How to get involved.
What to do if you think you've found a bug.



  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Using CiviMail (Moderator: Piotr Szotkowski) »
  • best practices for header to improve rendering
Pages: [1]

Author Topic: best practices for header to improve rendering  (Read 1319 times)

JoeMurray

  • Administrator
  • Ask me questions
  • *****
  • Posts: 578
  • Karma: 24
    • JMA Consulting
  • CiviCRM version: 4.4 and 4.5 (as of Nov 2014)
  • CMS version: Drupal, WordPress, Joomla
  • MySQL version: MySQL 5.5, 5.6, MariaDB 10.0 (as of Nov 2014)
best practices for header to improve rendering
April 22, 2014, 01:41:53 pm
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>
« Last Edit: April 22, 2014, 02:00:19 pm by JoeMurray »
Co-author of Using CiviCRM https://www.packtpub.com/using-civicrm/book

Michael McAndrew

  • Forum Godess / God
  • I live on this forum
  • *****
  • Posts: 1274
  • Karma: 55
    • Third Sector Design
  • CiviCRM version: various
  • CMS version: Nearly always Drupal
  • MySQL version: 5.5
  • PHP version: 5.3
Re: best practices for header to improve rendering
April 22, 2014, 08:55:52 pm
Hey Joe,

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

Michael
Service providers: Grow your business, build your reputation and support CiviCRM. Become a partner today

Katy J

  • I post occasionally
  • **
  • Posts: 50
  • Karma: 4
    • Third Sector Design
Re: best practices for header to improve rendering
April 28, 2014, 03:58:01 am
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!
Do what you love, it's your gift to the universe

JoeMurray

  • Administrator
  • Ask me questions
  • *****
  • Posts: 578
  • Karma: 24
    • JMA Consulting
  • CiviCRM version: 4.4 and 4.5 (as of Nov 2014)
  • CMS version: Drupal, WordPress, Joomla
  • MySQL version: MySQL 5.5, 5.6, MariaDB 10.0 (as of Nov 2014)
Re: best practices for header to improve rendering
April 28, 2014, 10:26:29 am
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.
Co-author of Using CiviCRM https://www.packtpub.com/using-civicrm/book
Pages: [1]
  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Using CiviMail (Moderator: Piotr Szotkowski) »
  • best practices for header to improve rendering

This forum was archived on 2017-11-26.