Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Does not render as shown in Gmail or Outlook #2

Open
robinwilson16 opened this issue Jul 27, 2019 · 11 comments
Open

Does not render as shown in Gmail or Outlook #2

robinwilson16 opened this issue Jul 27, 2019 · 11 comments

Comments

@robinwilson16
Copy link

I tried email template 1 but it does not render the same in Gmail for me and just seems to be ignoring the CSS. It doesn't render correctly in Outlook either.
Am I doing something wrong?

Here is what it looks like in Gmail:
image

This is Outlook:
image

Is there any modification I can make to get it to work?

Thanks
Robin
@robinwilson16
Copy link
Author

If I download the email and view the source this is how it looks:

                    <!DOCTYPE html>
                    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
                    <head>
                        <meta charset="utf-8"> <!-- utf-8 works for most cases -->
                        <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
                        <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
                        <meta name="x-apple-disable-message-reformatting">  <!-- Disable auto-scale in iOS 10 Mail entirely -->
                        <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->


                        <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i" rel="stylesheet">

                        <!-- CSS Reset : BEGIN -->
                    <style>
                    html,
                    body {
                        margin: 0 auto !important;
                        padding: 0 !important;
                        height: 100% !important;
                        width: 100% !important;
                        background: #f1f1f1;
                    }
                    /* What it does: Stops email clients resizing small text. */
                    * {
                        -ms-text-size-adjust: 100%;
                        -webkit-text-size-adjust: 100%;
                    }
                    /* What it does: Centers email on Android 4.4 */
                    div[style*="margin: 16px 0"] {
                        margin: 0 !important;
                    }
                    /* What it does: Stops Outlook from adding extra spacing to tables. */
                    table,
                    td {
                        mso-table-lspace: 0pt !important;
                        mso-table-rspace: 0pt !important;
                    }
                    /* What it does: Fixes webkit padding issue. */
                    table {
                        border-spacing: 0 !important;
                        border-collapse: collapse !important;
                        table-layout: fixed !important;
                        margin: 0 auto !important;
                    }
                    /* What it does: Uses a better rendering method when resizing images in IE. */
                    img {
                        -ms-interpolation-mode:bicubic;
                    }
                    /* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
                    a {
                        text-decoration: none;
                    }
                    /* What it does: A work-around for email clients meddling in triggered links. */
                    *[x-apple-data-detectors],  /* iOS */
                    .unstyle-auto-detected-links *,
                    .aBn {
                        border-bottom: 0 !important;
                        cursor: default !important;
                        color: inherit !important;
                        text-decoration: none !important;
                        font-size: inherit !important;
                        font-family: inherit !important;
                        font-weight: inherit !important;
                        line-height: inherit !important;
                    }
                    /* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */
                    .a6S {
                        display: none !important;
                        opacity: 0.01 !important;
                    }
                    /* What it does: Prevents Gmail from changing the text color in conversation threads. */
                    .im {
                        color: inherit !important;
                    }
                    /* If the above doesn't work, add a .g-img class to any image in question. */
                    img.g-img + div {
                        display: none !important;
                    }
                    /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
                    /* Create one of these media queries for each additional viewport size you'd like to fix */
                    /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
                    @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
                        u ~ div .email-container {
                            min-width: 320px !important;
                        }
                    }
                    /* iPhone 6, 6S, 7, 8, and X */
                    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
                        u ~ div .email-container {
                            min-width: 375px !important;
                        }
                    }
                    /* iPhone 6+, 7+, and 8+ */
                    @media only screen and (min-device-width: 414px) {
                        u ~ div .email-container {
                            min-width: 414px !important;
                        }
                    }
                    </style>

                        <!-- CSS Reset : END -->

                        <!-- Progressive Enhancements : BEGIN -->
                    <style>
                    .primary{
	                    background: #f3a333;
                    }
                    .bg_white{
	                    background: #ffffff;
                    }
                    .bg_light{
	                    background: #fafafa;
                    }
                    .bg_black{
	                    background: #000000;
                    }
                    .bg_dark{
	                    background: rgba(0,0,0,.8);
                    }
                    .email-section{
	                    padding:2.5em;
                    }
                    /*BUTTON*/
                    .btn{
	                    padding: 10px 15px;
                    }
                    .btn.btn-primary{
	                    border-radius: 30px;
	                    background: #f3a333;
	                    color: #ffffff;
                    }
                    h1,h2,h3,h4,h5,h6{
	                    font-family: 'Playfair Display', serif;
	                    color: #000000;
	                    margin-top: 0;
                    }
                    body{
	                    font-family: 'Montserrat', sans-serif;
	                    font-weight: 400;
	                    font-size: 15px;
	                    line-height: 1.8;
	                    color: rgba(0,0,0,.4);
                    }
                    a{
	                    color: #f3a333;
                    }
                    table{
                    }
                    /*LOGO*/
                    .logo h1{
	                    margin: 0;
                    }
                    .logo h1 a{
	                    color: #000;
	                    font-size: 20px;
	                    font-weight: 700;
	                    text-transform: uppercase;
	                    font-family: 'Montserrat', sans-serif;
                    }
                    /*HERO*/
                    .hero{
	                    position: relative;
                    }
                    .hero img{
                    }
                    .hero .text{
	                    color: rgba(255,255,255,.8);
                    }
                    .hero .text h2{
	                    color: #ffffff;
	                    font-size: 30px;
	                    margin-bottom: 0;
                    }
                    /*HEADING SECTION*/
                    .heading-section{
                    }
                    .heading-section h2{
	                    color: #000000;
	                    font-size: 28px;
	                    margin-top: 0;
	                    line-height: 1.4;
                    }
                    .heading-section .subheading{
	                    margin-bottom: 20px !important;
	                    display: inline-block;
	                    font-size: 13px;
	                    text-transform: uppercase;
	                    letter-spacing: 2px;
	                    color: rgba(0,0,0,.4);
	                    position: relative;
                    }
                    .heading-section .subheading::after{
	                    position: absolute;
	                    left: 0;
	                    right: 0;
	                    bottom: -10px;
	                    content: '';
	                    width: 100%;
	                    height: 2px;
	                    background: #f3a333;
	                    margin: 0 auto;
                    }
                    .heading-section-white{
	                    color: rgba(255,255,255,.8);
                    }
                    .heading-section-white h2{
	                    font-size: 28px;
	                    font-family: 
	                    line-height: 1;
	                    padding-bottom: 0;
                    }
                    .heading-section-white h2{
	                    color: #ffffff;
                    }
                    .heading-section-white .subheading{
	                    margin-bottom: 0;
	                    display: inline-block;
	                    font-size: 13px;
	                    text-transform: uppercase;
	                    letter-spacing: 2px;
	                    color: rgba(255,255,255,.4);
                    }
                    .icon{
	                    text-align: center;
                    }
                    .icon img{
                    }
                    /*SERVICES*/
                    .text-services{
	                    padding: 10px 10px 0; 
	                    text-align: center;
                    }
                    .text-services h3{
	                    font-size: 20px;
                    }
                    /*BLOG*/
                    .text-services .meta{
	                    text-transform: uppercase;
	                    font-size: 14px;
                    }
                    /*TESTIMONY*/
                    .text-testimony .name{
	                    margin: 0;
                    }
                    .text-testimony .position{
	                    color: rgba(0,0,0,.3);
                    }
                    /*VIDEO*/
                    .img{
	                    width: 100%;
	                    height: auto;
	                    position: relative;
                    }
                    .img .icon{
	                    position: absolute;
	                    top: 50%;
	                    left: 0;
	                    right: 0;
	                    bottom: 0;
	                    margin-top: -25px;
                    }
                    .img .icon a{
	                    display: block;
	                    width: 60px;
	                    position: absolute;
	                    top: 0;
	                    left: 50%;
	                    margin-left: -25px;
                    }
                    /*COUNTER*/
                    .counter-text{
	                    text-align: center;
                    }
                    .counter-text .num{
	                    display: block;
	                    color: #ffffff;
	                    font-size: 34px;
	                    font-weight: 700;
                    }
                    .counter-text .name{
	                    display: block;
	                    color: rgba(255,255,255,.9);
	                    font-size: 13px;
                    }
                    /*FOOTER*/
                    .footer{
	                    color: rgba(255,255,255,.5);
                    }
                    .footer .heading{
	                    color: #ffffff;
	                    font-size: 20px;
                    }
                    .footer ul{
	                    margin: 0;
	                    padding: 0;
                    }
                    .footer ul li{
	                    list-style: none;
	                    margin-bottom: 10px;
                    }
                    .footer ul li a{
	                    color: rgba(255,255,255,1);
                    }
                    @media screen and (max-width: 500px) {
	                    .icon{
		                    text-align: left;
	                    }
	                    .text-services{
		                    padding-left: 0;
		                    padding-right: 20px;
		                    text-align: left;
	                    }
                    }
                    </style>


                    </head>

                    <body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;">
	                    <center style="width: 100%; background-color: #f1f1f1;">
                        <div style="display: none; font-size: 1px;max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
                          &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
                        </div>
                        <div style="max-width: 600px; margin: 0 auto;" class="email-container">
    	                    <!-- BEGIN BODY -->
                          <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
      	                    <tr>
                              <td class="bg_white logo" style="padding: 1em 2.5em; text-align: center">
                                <h1><a href="#">RestoBar</a></h1>
                              </td>
	                          </tr><!-- end tr -->
				                    <tr>
                              <td valign="middle" class="hero" style="background-image: url(http://dev.bellsfishshop.co.uk/images/emails/bg_1.jpg); background-size: cover; height: 400px;">
                                <table>
            	                    <tr>
            		                    <td>
            			                    <div class="text" style="padding: 0 3em; text-align: center;">
            				                    <h2>We Serve Healthy &amp; Delicious Foods</h2>
            				                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
            				                    <p><a href="#" class="btn btn-primary">Get Your Order Here!</a></p>
            			                    </div>
            		                    </td>
            	                    </tr>
                                </table>
                              </td>
	                          </tr><!-- end tr -->
	                          <tr>
		                          <td class="bg_white">
		                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
		                              <tr>
		                                <td class="bg_dark email-section" style="text-align:center;">
		            	                    <div class="heading-section heading-section-white">
		            		                    <span class="subheading">Welcome</span>
		              	                    <h2>Welcome To RestoBar</h2>
		              	                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
		            	                    </div>
		                                </td>
		                              </tr><!-- end: tr -->
		                              <tr>
		                                <td class="bg_white email-section">
		            	                    <div class="heading-section" style="text-align: center; padding: 0 30px;">
		            		                    <span class="subheading">Services</span>
		              	                    <h2>Our Services</h2>
		              	                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
		            	                    </div>
		            	                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
		            		                    <tr>
                                          <td valign="top" width="50%" style="padding-top: 20px;">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td class="icon">
                                                  <img src="http://dev.bellsfishshop.co.uk/images/emails/001-diet.png" alt="" style="width: 60px; max-width: 600px; height: auto; margin: auto; display: block;">
                                                </td>
                                              </tr>
                                              <tr>
                                                <td class="text-services">
                            	                    <h3>Healthy Foods</h3>
                             	                    <p>Far far away, behind the word mountains, far from the countries</p>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                          <td valign="top" width="50%" style="padding-top: 20px;">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td class="icon">
                                                  <img src="http://dev.bellsfishshop.co.uk/images/emails/003-recipe-book.png" alt="" style="width: 60px; max-width: 600px; height: auto; margin: auto; display: block;">
                                                </td>
                                              </tr>
                                              <tr>
                                                <td class="text-services">
                            	                    <h3>Original Recipes</h3>
                                                  <p>Far far away, behind the word mountains, far from the countries</p>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
		            	                    </table>
		                                </td>
		                              </tr><!-- end: tr -->
		                              <tr>
		                                <td class="bg_light email-section" style="text-align:center;">
		            	                    <table>
		            		                    <tr>
		            			                    <td class="img">
		            				                    <table>
		            					                    <tr>
		            						                    <td>
		            							                    <img src="http://dev.bellsfishshop.co.uk/images/emails/bg_2.jpg" width="600" height="" alt="alt_text" border="0" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;" class="g-img">
		            						                    </td>
		            					                    </tr>
		            				                    </table>
		            				                    <div class="icon">
			            				                    <a href="#">
		                                            <img src="http://dev.bellsfishshop.co.uk/images/emails/002-play-button.png" alt="" style="width: 60px; max-width: 600px; height: auto; margin: auto; display: block;">
		                                          </a>
	                                          </div>
		            			                    </td>
		            		                    </tr>
		            		                    <tr>
		            			                    <td style="padding-top: 20px;">
		            				                    <h2>Watch Our Video</h2>
                                            <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
		            			                    </td>
		            		                    </tr>
		            	                    </table>
		                                </td>
		                              </tr><!-- end: tr -->
		                              <tr>
		                                <td class="bg_white email-section">
		            	                    <div class="heading-section" style="text-align: center; padding: 0 30px;">
		            		                    <span class="subheading">Menu</span>
		              	                    <h2>Our Delicious Food</h2>
		              	                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
		            	                    </div>
		            	                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
		            		                    <tr>
                                          <td valign="top" width="50%" style="padding-top: 20px;">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td style="padding-right: 10px;">
                                                  <img src="http://dev.bellsfishshop.co.uk/images/emails/menu-1.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
                                                </td>
                                              </tr>
                                              <tr>
                                                <td class="text-services" style="text-align: left;">
                            	                    <h3>Pasta, Sauce Milk</h3>
                             	                    <p>Far far away, behind the word mountains, far from the countries</p>
                             	                    <p><a href="#" class="btn btn-primary">Read more</a></p>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                          <td valign="top" width="50%" style="padding-top: 20px;">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td style="padding-left: 10px;">
                                                  <img src="http://dev.bellsfishshop.co.uk/images/emails/menu-2.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
                                                </td>
                                              </tr>
                                              <tr>
                                                <td class="text-services" style="text-align: left;">
                            	                    <h3>Sweetened Fruits</h3>
                                                  <p>Far far away, behind the word mountains, far from the countries</p>
                                                  <p><a href="#" class="btn btn-primary">Read more</a></p>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
		            	                    </table>
		                                </td>
		                              </tr><!-- end: tr -->

		                              <tr>
		                                <td class="bg_light email-section" style="padding: 0; width: 100%;">
		            	                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
		            		                    <tr>
                                          <td valign="middle" width="50%">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td class="text-services" style="text-align: left; padding: 20px 30px;">
                            	                    <div class="heading-section">
								            		                    <span class="subheading">Breakfast</span>
								              	                    <h2 style="font-size: 22px;">Grilled Beef with potatoes</h2>
								              	                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
								              	                    <p><a href="#" class="btn btn-primary">Read more</a></p>
								            	                    </div>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                          <td valign="middle" width="50%">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td>
                                                  <img src="http://dev.bellsfishshop.co.uk/images/emails/bg_3.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
		            	                    </table>
		                                </td>
		                              </tr><!-- end: tr -->
		                              <tr>
		                                <td class="bg_light email-section" style="padding: 0; width: 100%;">
		            	                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
		            		                    <tr>
                                          <td valign="middle" width="50%">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td>
                                                  <img src="http://dev.bellsfishshop.co.uk/images/emails/bg_4.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                          <td valign="middle" width="50%">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td class="text-services" style="text-align: left; padding: 20px 30px;">
                            	                    <div class="heading-section">
								            		                    <span class="subheading">Lunch</span>
								              	                    <h2 style="font-size: 22px;">Grilled Beef with potatoes</h2>
								              	                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
								              	                    <p><a href="#" class="btn btn-primary">Read more</a></p>
								            	                    </div>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
		            	                    </table>
		                                </td>
		                              </tr><!-- end: tr -->
		                              <tr>
		                                <td class="bg_light email-section" style="padding: 0; width: 100%;">
		            	                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
		            		                    <tr>
                                          <td valign="middle" width="50%">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td class="text-services" style="text-align: left; padding: 20px 30px;">
                            	                    <div class="heading-section">
								            		                    <span class="subheading">Dinner</span>
								              	                    <h2 style="font-size: 22px;">Grilled Beef with potatoes</h2>
								              	                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
								              	                    <p><a href="#" class="btn btn-primary">Read more</a></p>
								            	                    </div>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                          <td valign="middle" width="50%">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td>
                                                  <img src="http://dev.bellsfishshop.co.uk/images/emails/bg_6.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
		            	                    </table>
		                                </td>
		                              </tr><!-- end: tr -->
		                              <tr>
		                                <td class="bg_light email-section" style="padding: 0; width: 100%;">
		            	                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
		            		                    <tr>
                                          <td valign="middle" width="50%">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td>
                                                  <img src="http://dev.bellsfishshop.co.uk/images/emails/bg_5.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                          <td valign="middle" width="50%">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td class="text-services" style="text-align: left; padding: 20px 30px;">
                            	                    <div class="heading-section">
								            		                    <span class="subheading">Dessert</span>
								              	                    <h2 style="font-size: 22px;">Grilled Beef with potatoes</h2>
								              	                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
								              	                    <p><a href="#" class="btn btn-primary">Read more</a></p>
								            	                    </div>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
		            	                    </table>
		                                </td>
		                              </tr><!-- end: tr -->
		                              <tr>
			                              <td valign="middle" class="counter" style="background-image: url(http://dev.bellsfishshop.co.uk/images/emails/bg_1.jpg); background-size: cover; padding: 4em 0;">
			                                <table>
			            	                    <tr>
			            		                    <td valign="middle" width="25%">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td class="counter-text">
                            	                    <span class="num">9457</span>
                            	                    <span class="name">Happy Customer</span>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                          <td valign="middle" width="25%">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td class="counter-text">
                            	                    <span class="num">20</span>
                            	                    <span class="name">Years of Experienced</span>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                          <td valign="middle" width="25%">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td class="counter-text">
                            	                    <span class="num">80</span>
                            	                    <span class="name">Branches</span>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                          <td valign="middle" width="25%">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td class="counter-text">
                            	                    <span class="num">980</span>
                            	                    <span class="name">Staff</span>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
			            	                    </tr>
			                                </table>
			                              </td>
				                          </tr><!-- end tr -->
				                          <tr>
		                                <td class="bg_white email-section">
		            	                    <div class="heading-section" style="text-align: center; padding: 0 30px;">
		            		                    <span class="subheading">Blog</span>
		              	                    <h2>Read Stories</h2>
		              	                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
		            	                    </div>
		            	                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
		            		                    <tr>
                                          <td valign="top" width="50%" style="padding-top: 20px;">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td style="padding-right: 10px;">
                                                  <img src="http://dev.bellsfishshop.co.uk/images/emails/blog-1.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
                                                </td>
                                              </tr>
                                              <tr>
                                                <td class="text-services" style="text-align: left;">
                            	                    <p class="meta"><span>Posted on Feb 18, 2019</span> <span>Food</span></p>
                            	                    <h3>Healthy Foods For Kids</h3>
                             	                    <p>Far far away, behind the word mountains, far from the countries</p>
                             	                    <p><a href="#" class="btn btn-primary">Read more</a></p>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                          <td valign="top" width="50%" style="padding-top: 20px;">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td style="padding-left: 10px;">
                                                  <img src="http://dev.bellsfishshop.co.uk/images/emails/blog-2.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
                                                </td>
                                              </tr>
                                              <tr>
                                                <td class="text-services" style="text-align: left;">
                            	                    <p class="meta"><span>Posted on Feb 18, 2019</span> <span>Food</span></p>
                            	                    <h3>A Fresh Food Organic</h3>
                                                  <p>Far far away, behind the word mountains, far from the countries</p>
                                                  <p><a href="#" class="btn btn-primary">Read more</a></p>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
		            	                    </table>
		                                </td>
		                              </tr><!-- end: tr -->
		                              <tr>
		                                <td class="bg_light email-section">
		            	                    <div class="heading-section" style="text-align: center; padding: 0 30px;">
		            		                    <span class="subheading">Says</span>
		              	                    <h2>Testimonial</h2>
		              	                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
		            	                    </div>
		            	                    <table role="presentation" border="0" cellpadding="10" cellspacing="0" width="100%">
		            		                    <tr>
                                          <td valign="top" width="50%" style="padding-top: 20px;">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td>
                                                  <img src="http://dev.bellsfishshop.co.uk/images/emails/person_1.jpg" alt="" style="width: 100px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;">
                                                </td>
                                              </tr>
                                              <tr>
                                                <td class="text-testimony" style="text-align: center;">
                            	                    <h3 class="name">Ronald Tuff</h3>
                            	                    <span class="position">Businessman</span>
                             	                    <p>Far far away, behind the word mountains, far from the countries</p>
                             	                    <p><a href="#" class="btn btn-primary">Read more</a></p>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                          <td valign="top" width="50%" style="padding-top: 20px;">
                                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr>
                                                <td>
                                                  <img src="http://dev.bellsfishshop.co.uk/images/emails/person_2.jpg" alt="" style="width: 100px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;">
                                                </td>
                                              </tr>
                                              <tr>
                                                <td class="text-testimony" style="text-align: center;">
                            	                    <h3 class="name">Willam Clarson</h3>
                            	                    <span class="position">Businessman</span>
                                                  <p>Far far away, behind the word mountains, far from the countries</p>
                                                  <p><a href="#" class="btn btn-primary">Read more</a></p>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
		            	                    </table>
		                                </td>
		                              </tr><!-- end: tr -->
		          
		                            </table>

		                          </td>
		                        </tr><!-- end:tr -->
                          <!-- 1 Column Text + Button : END -->
                          </table>
                          <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
      	                    <tr>
                              <td valign="middle" class="bg_black footer email-section">
                                <table>
            	                    <tr>
                                    <td valign="top" width="33.333%" style="padding-top: 20px;">
                                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                        <tr>
                                          <td style="text-align: left; padding-right: 10px;">
                      	                    <h3 class="heading">RestoBar</h3>
                      	                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                                          </td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td valign="top" width="33.333%" style="padding-top: 20px;">
                                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                        <tr>
                                          <td style="text-align: left; padding-left: 5px; padding-right: 5px;">
                      	                    <h3 class="heading">Contact Info</h3>
                      	                    <ul>
					                                    <li><span class="text">203 Fake St. Mountain View, San Francisco, California, USA</span></li>
					                                    <li><span class="text">+2 392 3929 210</span></a></li>
					                                  </ul>
                                          </td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td valign="top" width="33.333%" style="padding-top: 20px;">
                                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                        <tr>
                                          <td style="text-align: left; padding-left: 10px;">
                      	                    <h3 class="heading">Useful Links</h3>
                      	                    <ul>
					                                    <li><a href="#">Breakfast</a></li>
					                                    <li><a href="#">Lunch</a></li>
					                                    <li><a href="#">Dinner</a></li>
					                                    <li><a href="#">Dessert</a></li>
					                                  </ul>
                                          </td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr><!-- end: tr -->
                            <tr>
        	                    <td valign="middle" class="bg_black footer email-section">
        		                    <table>
            	                    <tr>
                                    <td valign="top" width="33.333%">
                                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                        <tr>
                                          <td style="text-align: left; padding-right: 10px;">
                      	                    <p>&copy; 2018 Restobar. All Rights Reserved</p>
                                          </td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td valign="top" width="33.333%">
                                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                        <tr>
                                          <td style="text-align: right; padding-left: 5px; padding-right: 5px;">
                      	                    <p><a href="#" style="color: rgba(255,255,255,.4);">Unsubcribe</a></p>
                                          </td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
        	                    </td>
                            </tr>
                          </table>

                        </div>
                      </center>
                    </body>
                    </html>

@robinwilson16
Copy link
Author

I have done some more research and it seems these email clients do not support style tags so whilst it did actually work ok in Outlook on an iPhone, everything else I tried it ignored all the CSS.

I did find a workaround which was to use this CSS inliner tool on your template and now the email works in all clients:
https://templates.mailchimp.com/resources/inline-css/

Is this the recommended approach as I can see lots of other HTML email templates also use style tags? Or am I missing something?

Thanks though as after inlining your template it was just what I was after.

@charlottederome-git
Copy link

Hey

Same behaviour, the render is not good in Gmail, Hotmail or Yahoo. I have not the line under titles :(

@banagale
Copy link

banagale commented Jul 17, 2020 •
edited
Loading

@robinwilson16 @charlottederome-git It does appear that CSS inlining is pretty important / mandatory. This other repo mentions the need for it, and mailchimp itself addresses it and offers a tool to convert.

FWIW, it appears supporting regular css may be increasing. Here's a 2018 report on trends related to email clients and inlining.

@mrbrdo
Copy link

mrbrdo commented Feb 28, 2022

I don't want to be rude, but these are not email templates and should be not labeled as such. They don't work in most of major email clients. This is just a waste of time.

@banagale
Copy link

banagale commented Mar 7, 2022

@mrbrdo Did you perform the CSS inlining discussed above?

@mrbrdo
Copy link

mrbrdo commented Mar 12, 2022

@banagale yes, but an "email template" shouldn't require that, it should be adapted for emails, which this isn't. And obviously the code from the inlining tool is awful looking.

@Gene-Dana
Copy link

Yeah I'm kinda upset these are called email templates. They are websites 🤷🏻‍♂️

@banagale
Copy link

banagale commented Mar 16, 2022 •
edited
Loading

Gene, maybe you could explain your use case a bit more.

These are HTML email templates intended for transactional emails.

They are intended for integration by developers. The content is inserted programmatically, and sent via services like Amazon SES or Mailgun.

Regarding Jan's comment wondering why inline css might be a requirement: this is an industry-standard expectation (see also mailchimp's guidance) for ensuring styles show up most email clients.

As for the code looking awful, I recommend inspecting the code on great looking emails from services you receive from regularly. It isn't intended to be pretty because it is not intended to be seen.

One more note, this work is open source. If it does not meet your needs, it is reasonable to create a fork or build your own library that does and release it for free use as well.

Others may benefit from the changes that fulfill requirements you have, and hopefully encourage you to offer more of your work to the public at large.

@mrbrdo
Copy link

mrbrdo commented Apr 3, 2022

@banagale I will give you the point about inlining css. However even after doing that, you are using rgba colors (for no obvious reason), which it seems do not work in Zoho Mail. I really don't see the point in using rgba colors in the use cases (font on white background or font on grey background), especially keeping this incompatibility in mind.

@banagale
Copy link

banagale commented Apr 3, 2022

Glad to hear the references were helpful.

This is not my project.

My feedback was to help you and other people who come across this thread have information they need to make an informed decision about what these templates are and what is normal.

As for concerns about incompatibilities, I’d point to my previous comment about this being programming and open source.

If you’re aware of an incompatibility, fork the repo make a branch containing the rgb to hex conversions and submit it as a pull request.

If you don’t have time or aren’t sure how, write up an issue describing what could be done. If you use polite language, perhaps someone will create the PR and the maintainer will merge it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@mrbrdo @banagale @robinwilson16 @Gene-Dana @charlottederome-git