Help to imporve CSS in <head> of template

Highlighted
New Contributor

This is an example email's <head> code (just the Page Source grabbed from a preview of the browser version-Firefox 50.0.2-of the email) that could probably have better standard resets, client-specific resets, mobile styles and client-specific mobile styles, (and in-line HTML, but that is not included).  I would greatly appreciate any critiquing of this CSS so that such an email will render better when opened in the top 10 email clients (we all know them)

<!DOCTYPE html>
<html>
<head>
<title>How to build critical thinking outcomes, assessments, and activities into your courses</title>
<meta content="How to build critical thinking outcomes, assessments, and activities into your courses" property="og:title">
<meta content="How to build critical thinking outcomes, assessments, and activities into your courses" name="twitter:title">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style id="hs-inline-css" type="text/css">
/*<![CDATA[*/


/* everything in this node will be inlined */


/* ==== Page Styles ==== */

body, #backgroundTable {
  background-color: #ededed;
  /* Use body to determine background color */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#templateTable {
  width: 600px;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: #565656;
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  line-height: 100%;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 10px;
  margin-left: 0;
  text-align: left;
}

h1, .h1 {
  font-size: 26px;
}

h2, .h2 {
  font-size: 20px;
}

h3, .h3 {
  font-size: 15px;
}

h4, .h4 {
  font-size: 13px;
}

h5, .h5 {
  font-size: 11px;
}

h6, .h6 {
  font-size: 10px;
}


/* ==== Header Styles ==== */

#headerTable {
  background-color: #ededed;
  color: #565656;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 120%;
  text-align: right;
  border-collapse: separate !important;
  padding-right: 0px;
}

#headerTable a:link, #headerTable a:visited,
/* Yahoo! Mail Override */

#headerTable a .yshortcuts
/* Yahoo! Mail Override */

{
  font-weight: normal;
  text-decoration: underline;
}


/* ==== Template Wrapper Styles ==== */

#contentCell {
  padding: 10px 20px;
  background-color: #ededed;
}

#contentTableOuter {
  border-collapse: separate !important;
  background-color: #ffffff;
  padding: 0px;
}

#contentTableInner {
  width: 600px;
}


/* ==== Body Styles ==== */

.bodyContent {
  color: #565656;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 150%;
  text-align: left;
}


/* ==== Column Styles ==== */

table.columnContentTable {
  border-collapse: separate !important;
  border-spacing: 0;
  background-color: #ffffff;
}

td[class~="columnContent"] {
  color: #565656;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 120%;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}


/* ==== Footer Styles ==== */

#footerTable {
  background-color: #ededed;
}

#footerTable a {
  color: #999999;
}

#footerTable {
  color: #999999;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 120%;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  text-align: center;
}

#footerTable a:link, #footerTable a:visited,
/* Yahoo! Mail Override */

#footerTable a .yshortcuts
/* Yahoo! Mail Override */

{
  font-weight: normal;
  text-decoration: underline;
}

.hs-image-social-sharing-24 {
  max-width: 24px;
  max-height: 24px;
}


/* ==== Standard Resets ==== */

.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%;
}


/* Force Hotmail to display normal line spacing */

body, table, td, p, a, li, blockquote {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}


/* Prevent WebKit and Windows mobile changing default text sizes */

table, td {
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
}


/* Remove spacing between tables in Outlook 2007 and up */

img {
  vertical-align: bottom;
  -ms-interpolation-mode: bicubic;
}


/* Allow smoother rendering of resized image in Internet Explorer */


/* Reset Styles */

body {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse !important;
}

body, #backgroundTable, #bodyCell {
  height: 100% !important;
  margin: 0;
  padding: 0;
  width: 100% !important;
}

a:link, a:visited {
  border-bottom: none;
}


/* iOS automatically adds a link to addresses */


/* Style the footer with the same color as the footer text */

#footer a {
  color: #999999;
  ;
  -webkit-text-size-adjust: none;
  text-decoration: underline;
  font-weight: normal
}


/* Hide preview text on rendering */

#preview_text {
  display: none;
}


/*]]>*/

</style>

<style type="text/css">
/*<![CDATA[*/


/* ==== Mobile Styles ==== */


/* Constrain email width for small screens */

@media screen and (max-width: 650px) {
  table[id="backgroundTable"] {
    width: 95% !important;
  }
  table[id="templateTable"] {
    max-width: 600px !important;
    width: 100% !important;
  }
  table[id="contentTableInner"] {
    max-width: 600px !important;
    width: 100% !important;
  }
  /* Makes image expand to take 100% of width*/
  img {
    width: 100% !important;
    height: auto !important;
  }
  #contentCell {
    padding: 10px 10px !important;
  }
  #headerTable {
    padding-right: 0.0px !important;
  }
  #contentTableOuter {
    padding: 0.0px !important;
  }
}

@media only screen and (max-width: 480px) {
  /* ==== Client-Specific Mobile Styles ==== */
  body, table, td, p, a, li, blockquote {
    -webkit-text-size-adjust: none !important;
  }
  /* Prevent Webkit platforms from changing default text sizes */
  body {
    width: 100% !important;
    min-width: 100% !important;
  }
  /* Prevent iOS Mail from adding padding to the body */
  /* ==== Mobile Reset Styles ==== */
  td[id="bodyCell"] {
    padding: 10px !important;
  }
  /* ==== Mobile Template Styles ==== */
  table[id="templateTable"] {
    max-width: 600px !important;
    width: 100% !important;
  }
  table[id="contentTableInner"] {
    max-width: 600px !important;
    width: 100% !important;
  }
  /* ==== Image Alignment Styles ==== */
  h1, .h1 {
    font-size: 26px !important;
    line-height: 125% !important;
  }
  h2, .h2 {
    font-size: 20px !important;
    line-height: 125% !important;
  }
  h3, .h3 {
    font-size: 15px !important;
    line-height: 125% !important;
  }
  h4, .h4 {
    font-size: 13px !important;
    line-height: 125% !important;
  }
  h5, .h5 {
    font-size: 11px !important;
    line-height: 125% !important;
  }
  h6, .h6 {
    font-size: 10px !important;
    line-height: 125% !important;
  }
  .hide {
    display: none !important;
  }
  /* Hide to save space */
  /* ==== Body Styles ==== */
  td[class="bodyContent"] {
    font-size: 16px !important;
    line-height: 145% !important;
  }
  /* ==== Footer Styles ==== */
  td[id="footerTable"] {
    padding-left: 0px !important;
    padding-right: 0px !important;
    font-size: 12px !important;
    line-height: 145% !important;
  }
  /* ==== Image Alignment Styles ==== */
  table[class="alignImageTable"] {
    width: 100% !important;
  }
  td[class="imageTableTop"] {
    display: none !important;
    /*padding-top: 10px !important;*/
  }
  td[class="imageTableRight"] {
    display: none !important;
  }
  td[class="imageTableBottom"] {
    padding-bottom: 10px !important;
  }
  td[class="imageTableLeft"] {
    display: none !important;
  }
  /* ==== Column Styles ==== */
  td[class~="column"] {
    display: block !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  td[class~=columnContent] {
    font-size: 14px !important;
    line-height: 145% !important;
    padding-top: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
  }
  #contentCell {
    padding: 10px 0px !important;
  }
  #headerTable {
    padding-right: 0.0px !important;
  }
  #contentTableOuter {
    padding: 0.0px !important;
  }
}

#preview_text {
  display: none;
}


/*]]>*/

</style>
<!-- http: //www.emailon@cid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad -->
<meta content="HubSpot" name="generator">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="http://email.magnapubs.com/how-to-build-critical-thinking-outcomes-assessments-and-activities-into-your-courses" property="og:url">
</head>

 

Reply
0 Upvotes
1 Reply 1
Advisor | Platinum Partner

Sorry, I'm not an email CSS expert so I can't really critique this for you, but if you want to test how well your email renders across the top email clients have you tried Hubspot's "Test in different email clients" feature in the email editor?


More details on the feature here: https://knowledge.hubspot.com/articles/kcs_article/email/can-i-preview-my-email-across-different-cli...


Did my post help answer your query? Help the Community by marking it as a solution.

Matthew Shepherd

An Inbound Growth Agency
Platinum HubSpot Partner

Reply
0 Upvotes