Syd

Blog updates

Latest news & updates

HTML Email

December 5, 2019

HTML Email

Grid based responsive HTML email sample with coding.

Live View

Please click here or the ‘Live View’ button below.

HTML Coding

<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta name=”x-apple-disable-message-reformatting”>
</head>

<body style=”padding:0;”>
<style>
@media (max-width:599px) {
.maincontainer {width:300px!important; max-width:300px!important;}
.contentcontainer {width:300px!important; margin:auto!important;}
.halfcontenttable {width:100%!important; max-width:300px!important; float:none!important; margin:auto!important;}
}
</style>

<!– bg table start–>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ bgcolor=”#eeeeee” style=”text-align:center; margin-left:auto; margin-right:auto; padding:0; padding-right:0px; padding-bottom:0px; padding-left:0px;”>
<tr>
<td width=”100%” align=”center”>&nbsp;

<!– header image and text start –>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ bgcolor=”#eeeeee” style=”max-width:600px; min-width:300px; margin:auto; text-align:center;” class=”maincontainer”>
<tr>
<td><!– header image –>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ bgcolor=”#222222″>
<tr>
<td align=”center”><!–[if (gte mso 9)|(IE)]>
<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”><tr><td>
<![endif]–>

<img border=”0″ src=”https://syd.pixabee.com/content/htmlemail_one/featured_and_full/iimges/ftured.jpg” width=”100%” height=”” alt=”” style=”display:block; width:100%; max-width:600px; height:auto;”>

<!–[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]–></td>
</tr>
</table>

<!– /header image –>

<!– header text –>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ bgcolor=”#222222″ style=”max-width:600px; font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#eeeeee; text-align:left;”>
<tr>
<td align=”left”><!–[if (gte mso 9)|(IE)]>
<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”><tr><td>
<![endif]–>

<!– padding table open–>

<table cellspacing=”0″ cellpadding=”30″>
<tr>
<td align=”center”><!– content table open–>

<table align=”center” style=”font-family:arial, Helvetica, sans-serif; font-size:30px; line-height:34px; color:#ffffff; text-transform:uppercase; text-align:center; margin-bottom:0.5em;”>
<tr>
<td> Main Title Goes Here </td>
</tr>
</table>
<p style=”margin-bottom:0;”>&nbsp;</p>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ style=”font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#eeeeee; text-align:left;”>
<tr>
<td align=”left”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus maximus condimentum. Nullam eleifend, quam eu vehicula imperdiet, ligula velit ultrices eros, vel pulvinar elit est a erat. </td>
</tr>
</table>
<p style=”margin-bottom:0;”>&nbsp;</p>
<table width=”120″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ bgcolor=”#cc5555″ style=”border-radius:4px;”>
<tr>
<td height=”40″ align=”center” valign=”middle”><a style=”font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#ffffff; text-decoration:none;” href=”#” target=”_blank”>Call to action</a></td>
</tr>
</table>

<!– /content table close –></td>
</tr>
</table>

<!– /padding table close –>

<!–[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]–></td>
</tr>
</table>

<!– /header text –></td>
</tr>
</table>

<!– /header image and text over –>

<!– full photo – text table start –>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ bgcolor=”#eeeeee” style=”max-width:600px; min-width:300px; margin:auto; text-align:center;” class=”maincontainer”>
<tr>
<td><!– two column content table (1st row)–>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ bgcolor=”#dddddd”>
<tr>
<td align=”center”><!–[if (gte mso 9)|(IE)]>
<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”><tr><td>
<![endif]–>

<!– half pic table (pic girl)–>

<table width=”300″ height=”300″ border=”0″ cellspacing=”0″ cellpadding=”0″ align=”left” style=”display:block;” class=”halfcontenttable”>
<tr>
<td><img src=”https://syd.pixabee.com/content/htmlemail_one/featured_and_full/iimges/300×300.jpg” width=”300″ height=”300″ border=”0″ style=”display:block; font-size:0; line-height:0;”></td>
</tr>
</table>

<!– /half pic table –>

<!–[if (gte mso 9)|(IE)]></td><td><![endif]–>

<!– half text table (gray bg) –>

<table width=”300″ height=”300″ border=”0″ cellspacing=”0″ cellpadding=”30″ align=”right” class=”halfcontenttable”>
<tr>
<td align=”center” valign=”middle”><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ style=”font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#333333; text-align:left;”>
<tr>
<td><p style=”font-family:arial, Helvetica, sans-serif; font-size:20px; line-height:24px; color:#333333; text-align:left; margin-bottom:0.5em;”>Module title goes here</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus maximus condimentum. Nullam eleifend, quam eu vehicula imperdiet, ligula velit ultrices eros.</td>
</tr>
</table>
<p style=”margin-bottom:0;”>&nbsp;</p>
<table width=”120″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″ bgcolor=”#eeeeee” style=”border-radius:4px;”>
<tr>
<td height=”40″ align=”center” valign=”middle”><a style=”font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#444444; text-decoration:none;” href=”#” target=”_blank”>Call to action</a></td>
</tr>
</table></td>
</tr>
</table>

<!– /half text table –>

<!–[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]–></td>
</tr>
</table>

<!– /two column content table –>

<!– two column content table (2nd row)–>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ bgcolor=”#cc6666″ style=”max-width:600px;”>
<tr>
<td align=”center”><!–[if (gte mso 9)|(IE)]>
<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”><tr><td>
<![endif]–>

<!– half pic table (man) –>

<table width=”300″ height=”300″ border=”0″ cellspacing=”0″ cellpadding=”0″ align=”right” style=”display:block;” class=”halfcontenttable”>
<tr>
<td><img src=”https://syd.pixabee.com/content/htmlemail_one/featured_and_full/iimges/300x300b.jpg” width=”300″ height=”300″ border=”0″ style=”display:block; font-size:0; line-height:0;”></td>
</tr>
</table>

<!– /half pic table –>

<!–[if (gte mso 9)|(IE)]></td><td><![endif]–>

<!– half text table (red bg text) –>

<table width=”300″ height=”300″ border=”0″ cellspacing=”0″ cellpadding=”30″ align=”left” class=”halfcontenttable”>
<tr>
<td align=”center” valign=”middle”><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ style=”font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#ffffff; text-align:right;”>
<tr>
<td><p style=”font-family:arial, Helvetica, sans-serif; font-size:20px; line-height:24px; color:#ffffff; text-align:right; margin-bottom:0.5em;”>Module title goes here</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus maximus condimentum. Nullam eleifend, quam eu vehicula imperdiet, ligula velit ultrices eros.</td>
</tr>
</table>
<p style=”margin-bottom:0;”>&nbsp;</p>
<table width=”120″ border=”0″ align=”right” cellpadding=”0″ cellspacing=”0″ bgcolor=”#ff9999″ style=”border-radius:4px;”>
<tr>
<td height=”40″ align=”center” valign=”middle”><a style=”font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#ffffff; text-decoration:none;” href=”#” target=”_blank”>Call to action</a></td>
</tr>
</table></td>
</tr>
</table>

<!– /half text table –>

<!–[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]–></td>
</tr>
</table>

<!– /two column content table –></td>
</tr>
</table>

<!– /full photo – text table over –>

&nbsp; </td>
</tr>
</table>
<!– /bg table over–>

</body>
</html>

Coding Guideline

 

Because of HTML E-mail doesn’t have certain rules I prapared an additional guideline according to my experiences.

 

HTML EMAIL GUIDELINE
  1. Email clients have many inbuilt limitations that do not exist on the web. The biggest problem is that there are no real standards in the email market and email clients use really different approaches to decode HTML content. The key message is that: Not everything is possible in email that’s available on the web.
  2. As per anti-spam law, all emails must contain some form of text (even if it a simple “hello”). Image-only emails will not display properly and are almost certain to be flagged as spam.
  3. Avoid Spam words. Use online tools to check the spam rate.
  4. Prepare a text version. Add links as text on text version. Text version has to match with HTML version.
  5. HTML emails have a narrow with for now. organize your content from left to right and top to bottom. Top left will be displayed first on mobile and right bottom will displayed last.
  6. On photoshop, export images with medium quality. Don’t use large file size images. Total, under 100k is ideal, over 250 is risky.
  7. Send test emails before finalize.

 

HTML TECHNIQUES FOR EMAIL

A. DON’T DO

  1. External css file
  2. Shorthand css syntax
  3. colspan, rowspan
  4. Multiple classes
  5. Long image names with spam words; campaign, design, v6, 054
  6. Scaling body
  7. Avoid embedded images and documents
  8. Iframe
  9. JS

B. DO

  1. 100% bg table as body
  2. width:600px; Default mail width is 600px for some service providers.
  3. Use: text: font-size:16px; line-height:20px; VW is ok as font size on mobile for sub title and title.
  4. Use tables and old school coding as main structure.
  5. Use inline CSS as main coding and embedded for media queries for mobile devices.
  6. add initial scale for mobile devices
  7. Since, webmail services display the HTML as part of their own document there is no absolute solution for that yet. Some clients remove anything before body tag, somedisplays as it’s in an iframe, some of them started to support html5 doc type. However, some of them still using html4 / XHTML 1.0 standards.
  8. Images can be blocked by default or may not be loaded because of connection speed, etc. Using a short image tag can be an option to identify images. More at:http://kb.mailchimp.com/campaigns/images-videos-files/add-alt-text-to-images
  9. Serve images from http server not https

 

SERVICE PROVIDERS

A. GMAIL

  1. Each Gmail client renders email differently.
  2. Changes font to Arial on mobile.
  3. Gmail clips your message at 102K on mobile.
  4. Gmail started to support media queries limitedly.
  5. Gmail removes all CSS in <style> block if it exceeds 8192 characters or if it contains errors or nested @ declarations.
  6. Gmail does not allow negative CSS margin values.
  7. Gmail automatically converts phone numbers and URLs to links.
  8. Gmail doesn’t support pseudo-classes like :checked and :active and only supports :hover in their Webmail email client.
  9. Gmail uses the HTML5 DOCTYPE. That’s mean it threads images like text and may leave space below.
  10. Animations, transitions and transforms aren’t supported

General_Notes Page 1

  1. Animations, transitions and transforms aren’t supported
  2. Gmail app for non-google accounts (GANGA) does not support background images.
  3. OK on Windows Desktop, IOS Mail APP and Android Phone App (Samsung). Very minor layout failure on AOL APP on IOS.

B. OUTLOOK

  1. Outlook doesn’t run a traditional HTML rendering engine; In 2007, it moved from an engine powered by IE6 to one powered by Wo rd.
  2. Use 6 digit hexadecimal code.
  3. Outlook will strip out the style with !important.
  4. Outlook may add 1px horizontal bottom line. Now I cannot give an absolute solution. I can tell that the issue is reproducible: changing font size or removing border=”0″cellspacing=”0″ cellpadding=”0″ worked for me.
  5. Background image can be used on email (major mail service companies started to support). Outlook doesn’t support background images officially. I hacked it, the test resultis: image may need to be allowed to seen by user with right click but it’s shown.
  6. Wrap the whole table in some conditional code to appease Outlook, Lotus Notes and clients with <!–[if (gte mso 9)|(IE)]> / <![endif]–>.
  7. Padding on container div added to width

C. YAHOO

  1. Yahoo started to support media queries limitedly.
  2. No margin / padding for paragraphs by default. Use: <p style=”margin-bottom: 1em;”>&nbsp;</p> as default.
  3. Yahoo Mail strips your body tag by default. Yahoo! renders your mobile version by default.
  4. Yahoo!’s DOCTYPE may add space under images.
  5. Sometimes, if you are using link names to popular items like “Washer & Dryer” Yahoo! inserts a span inside your anchor with a class of “yshortcuts” and disables the link.
  6. Yahoo disables the links “#”

D. IOS 10

  1. IOS 10 may not auto scale mails. Use followings for auto scaling (works for me so far).
    1. <meta name=”x-apple-disable-message-reformatting”>
    2. <body style=”padding:0;”>
    3. <table style=”margin-left: auto; margin-right: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;} on main container table
  2. IOS 10 only targeting (not tried yet) \: @supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {/* Insert CSS here */}
  3. Doesn’t Support, Position: fixed;
  4. Doesn’t support, Iframe

E. AOL

1. OK on Windows Desktop and IOS Mail APP. Very minor layout failure on AOL APP on IOS.

 

ADDITIONALINFOANDUSEFULLINKS
  1. Free email tester: http://premailer.dialect.ca/
  2. Email clients CSS support list: https://www.campaignmonitor.com/css/ – https://templates.mailchimp.com/resources/email-client-css-support/?_ga=1.261490634.652262847.1478559730
  3. Gmail CSS support list: https://developers.google.com/gmail/design/reference/supported_css
  4. Understanding responsive email: https://www.campaignmonitor.com/blog/email-marketing/2014/07/creating-a-centred-responsive-design-without-media-queries/

Live View

Please click the button for live view

Live View
Back to Portfoilo
adminsyd
adminsyd
pinuss@yahoo.com