Highlighted

outlook moving my button styles to other elements.

Contributor ,
Feb 16, 2018

Copy link to clipboard

Copied

Hey everyone,

| am working on an email and I'm having the usual outlook headaches. Code renders pretty decent in other clients.

Here are my issues:

1) Background image is missing in Outlook (of course) . I tried bulletproof background images but it isn't working.

2) It seems my yellow background is taking on the style of my button and the button is loosing the style. (Should the button styles be in the head rather than inline?)

3) The logo at the bottom is taking on the button style in it's table and the button has lost the style.

I've attached two screenshots. One of it rendering correctly in certain clients and one showing the issues I'm having.

The html is below...

Thank you in advance for any advice.

Screen Shot 2018-02-16 at 9.32.19 AM.pngScreen Shot 2018-02-16 at 9.50.31 AM.png

<!DOCTYPE html>

<html>

<head>

<title>Premier Executive Review</title>

<!-- Custom Theme files -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="Cool Berg Newsletter templates, Email Templates, Newsletters, Marketing  templates,

  Advertising templates, free Newsletter" />

<style>

  /*! CSS Used from: Embedded */

body{width:100%;background-color:#cccccc;margin:0;padding:0;-webkit-font-smoothing:antialiased;}

html{width:100%;}

table{font-size:14px;border:0;}

@media only screen and (max-width: 768px){

.container{width:650px;}

.container-middle{width:416px!important;}

}

@media only screen and (max-width: 622px){

.container{width:500px!important;}

.container-middle{width:416px!important;}

.mainContent{width:216px!important;}

}

@media only screen and (max-width: 480px){

.container{width:160px!important;}

}

@media only screen and (max-width: 479px){

.top-header-left{width:260px!important;text-align:center!important;}

.container{width:290px!important;}

.container-middle{width:260px!important;}

.mainContent{width:222px!important;}

table{width:100%!important;}

}

@media only screen and (max-width:320px){

.ban{background:url(file:///Volumes/Macintosh%20HD/Emails/Exec%20Communications/Executive%20Review%20Email/images/banner.jpg) no-repeat -260px 0px;background-size:cover;}

span.h-title{font-size:18px!important;line-height:1.8em!important;}

span.para{font-size:0.9em!important;line-height:1.8em;}

tr.ban{width:100%!important;height:256px!important;}

}

/*! CSS Used from: Embedded */

#footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:#666666;padding:30px 60px;}

@media screen and (max-width: 768px){

#footer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}

}

.social_icons{display:-webkit-box;display:-ms-flexbox;display:flex;}

@media screen and (max-width: 768px){

.social_icons{margin:15px 0 0 0;}

}

.social_icons div{margin:0 0 0 5px;}

#logo{width:216px;height:46px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png);}

#twiterr_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/twiterr_icon.png);}

#linkedin_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/linkedin_icon.png);}

#insta_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/insta_icon.png);}

#youtube_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/youtube_icon.png);}

#fb_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/fb_icon.png);}</style>

   

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

  <table border="0" width="100%" cellpadding="0" cellspacing="0">

        <tr bgcolor="00000">

            <td width="100%" align="center" valign="top" bgcolor="cccccc">

                <!-- main content -->

                <table width="700" border="0" cellpadding="0" cellspacing="0" align="center" class="container top-header-left" bgcolor="00000">

  <!-- Header -->

                <tr style="background:url(http://offers.premierinc.com/rs/381-NBB-525/images/building.jpg) no-repeat 0px 0px; background-size:cover;" height="300" class="ban">

                  <td>

                  <table border="0" width="650" align="center" cellpadding="0" cellspacing="0" class="container-middle">

  <tr><td height="30"></td></tr>

  <tr>

   <td><table width="100%" border="0" cellspacing="0" cellpadding="0">

   <tbody>

  <tr>

   <td>

  <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="mainContent">

  <tr align="center"><img style="margin:0 auto;display:block;margin-top:15px;margin-bottom:30px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png" alt="LineItemDetails" height="46" width="216">

  <hr style="width:73%;"><td style="padding:0px 0;"><span class="h-title" style="color:#fff;font-family: 'Roboto Slab'; font-size:57px;font-weight:300;line-height:1em;text-align:center;text-decoration:none;">Executive Review </span><hr style="width:80%;margin-top:15px;"></td>

  </tr>

  <tr>

  <td align="center" style="color:#ffffff; font-family: 'Roboto Slab'; font-size:16px;margin-bottom: 15px;" data-color="header small text" data-size="header small text" data-min="15" data-max="18">

  <span class="para">

  Insite. Spotlight. Engagement.

  </span><hr style="width:80%;">

  </td>

  </tr>

  </table>

  </td>

  </tr>

  </tbody>

  </table>

  </td>

  </tr>

  <tr><td height="22"></td></tr>

                  </table>

                  </td>

                </tr>

             

  <!-- second box-->    

                <tr>

      <td bgcolor="ffffff">

      <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="mainContent"> <tr>

  <td height="30"></td>

  </tr>

  <tr align="center">

  <td style="padding:10px 0;"><span class="h-title" style="color:#333333;font-family:Arial;font-size:30px;font-weight:600;line-height:1em;text-align:center;text-decoration:none;">Executive Leadership Track </span></td>

  </tr>

  <tr>

  <td align="center" style="color:#333333; font-family:Arial;font-size:16px;margin-bottom: 15px;line-height:1.5em;" data-color="header small text" data-size="header small text" data-min="15" data-max="18"> <div style="text-align: center;">

  <a style="margin-top:15px;margin-bottom:20px;padding:5px 26px 5px 26px;background-color:#transparent;border: 2px solid #ffc627;border-radius: 7px;line-height: 1.5;color:#ffc627;color:#ffc627;font-size:20px;text-decoration: none;font-family: 'Roboto Slab';font-weight:400;display: inline-block;text-align: center;"  href="#">Find Out Why</a></div>

  <span class="para">

  <b>Mike Alkire</b>, Premier’s Chief Operating Officer, discusses <br>

disruption in supply chain and what it means for you.

  </span>

  </td>

  </tr>

    

  <tr>

  <td height="30"></td>

  </tr>

      </table>

      </td>

    </tr>

  <!--third box-->

  <!-- yellow -->

  <td bgcolor="666666"height="3"></td>

                <tr style="background:url(http://offers.premierinc.com/rs/381-NBB-525/images/pattern.jpg) no-repeat 0px 0px; background-size:cover;" height="250" class="ban">

                  <td>

                  <table border="0" width="600" align="center" cellpadding="0" cellspacing="0" class="container-middle">

  <tr>

   <td><table width="100%" border="0" cellspacing="0" cellpadding="0">

   <tbody>

  <tr>

   <td>

  <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="mainContent">

  <tr align="center">

  <td style="padding:10px 0;"><span class="h-title" style="color:#333333;font-family:Arial;font-size:35px;font-weight:600;line-height:1em;text-align:center;text-decoration:none;">2018 Healthcare Trends </span></td>

  </tr>

  <tr>

  <td align="center" style="color:#333333; font-family:Arial;font-size:16px;margin-bottom: 15px;line-height:1.5em;" data-color="header small text" data-size="header small text" data-min="15" data-max="18">

  <span class="para">

  Premier Chief Executive Officer and President, Susan Devore<br> breaks down what to expect in 2018, and how to prepare for what’s next.

  </span>

  </td>

  </tr>

  </table>

  <div style="text-align: center;">

  <a style="margin-top:25px;padding:5px 26px 5px 26px;background-color:#0091b3;border: 2px solid #ffffff;border-radius: 7px;line-height: 1.5;color:#ffc627;color:#ffffff;font-size:20px;text-decoration: none;font-family: 'Roboto Slab';font-weight:400;display: inline-block;text-align: center;"  href="#">Learn More</a></div>

  </td>

  </tr>

  </tbody>

  </table>

  </td>

  </tr>

  <tr><td height="22"></td></tr>

                  </table>

                  </td>

                </tr><td bgcolor="666666"height="3"></td>

  <!-- second box-->    

                <tr>

      <td bgcolor="ffffff">

      <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="mainContent">

      <tr align="center"><img style="margin:0 auto;display:block;margin-top:25px;margin-bottom:15px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/brk-18-logo_1.png" alt="LineItemDetails" height="69" width="350">

  <td style="padding:10px 0;"><span class="h-title" style="color:#333333;font-family:Arial;font-size:30px;font-weight:600;line-height:1em;text-align:center;text-decoration:none;">Executive Leadership Track </span></td>

  </tr>

  <tr>

  <td align="center" style="color:#333333; font-family:Arial;font-size:16px;margin-bottom: 15px;line-height:1.5em;" data-color="header small text" data-size="header small text" data-min="15" data-max="18">

  <span class="para">

  Wednesday, June 20 and Thursday, June 21<br>Gaylord Opryland, Nashville, TN

  </span>

  </td>

  </tr>

      </table>

      <div style="text-align: center;">

  <a style="margin-top:25px;margin-bottom:45px;padding:5px 26px 5px 26px;background-color:#transparent;border: 2px solid #ffc627;border-radius: 7px;line-height: 1.5;color:#ffc627;color:#ffc627;font-size:20px;text-decoration: none;font-family: 'Roboto Slab';font-weight:400;display: inline-block;text-align: center;"  href="#">Register Now</a></div>

      </td>

    

    </tr>

  <!-- footer -->

  <tr>

  <td bgcolor="#3abac1">

  <div id="footer">

<div id="logo"></div>

<div class="social_icons">

<div id="twiterr_icon"></div>

<div id="youtube_icon"></div>

<div id="insta_icon"></div>

<div id="linkedin_icon"></div>

<div id="fb_icon"></div>

</div>

<!-- end social_icons -->

</div>

  </td>

  </tr>

  <!-- footer -->

  </table>

            

            </td>

        </tr>

  </table>

</body>

</html>

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

Email clients do not have the full range of interpreters that web browsers have. As such, most do not recognise HTML5, an XHTML document is more suited, limited interpretations for CSS, stay with CSS 1, and cetainly no support for media queries, I think that GMail is an exception for media queries. In other words, scrap what you have done till now and start with humble table layouts.

A great starting point is the Starter Email Templates found in Dreamweaver, File -> New -> Starter Templates -> Email Templates.

Another great resource is https://foundation.zurb.com/emails/email-templates.html

For the rest, it is a matter of trial and error and heaps of Googling.

Views

507

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

outlook moving my button styles to other elements.

Contributor ,
Feb 16, 2018

Copy link to clipboard

Copied

Hey everyone,

| am working on an email and I'm having the usual outlook headaches. Code renders pretty decent in other clients.

Here are my issues:

1) Background image is missing in Outlook (of course) . I tried bulletproof background images but it isn't working.

2) It seems my yellow background is taking on the style of my button and the button is loosing the style. (Should the button styles be in the head rather than inline?)

3) The logo at the bottom is taking on the button style in it's table and the button has lost the style.

I've attached two screenshots. One of it rendering correctly in certain clients and one showing the issues I'm having.

The html is below...

Thank you in advance for any advice.

Screen Shot 2018-02-16 at 9.32.19 AM.pngScreen Shot 2018-02-16 at 9.50.31 AM.png

<!DOCTYPE html>

<html>

<head>

<title>Premier Executive Review</title>

<!-- Custom Theme files -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="Cool Berg Newsletter templates, Email Templates, Newsletters, Marketing  templates,

  Advertising templates, free Newsletter" />

<style>

  /*! CSS Used from: Embedded */

body{width:100%;background-color:#cccccc;margin:0;padding:0;-webkit-font-smoothing:antialiased;}

html{width:100%;}

table{font-size:14px;border:0;}

@media only screen and (max-width: 768px){

.container{width:650px;}

.container-middle{width:416px!important;}

}

@media only screen and (max-width: 622px){

.container{width:500px!important;}

.container-middle{width:416px!important;}

.mainContent{width:216px!important;}

}

@media only screen and (max-width: 480px){

.container{width:160px!important;}

}

@media only screen and (max-width: 479px){

.top-header-left{width:260px!important;text-align:center!important;}

.container{width:290px!important;}

.container-middle{width:260px!important;}

.mainContent{width:222px!important;}

table{width:100%!important;}

}

@media only screen and (max-width:320px){

.ban{background:url(file:///Volumes/Macintosh%20HD/Emails/Exec%20Communications/Executive%20Review%20Email/images/banner.jpg) no-repeat -260px 0px;background-size:cover;}

span.h-title{font-size:18px!important;line-height:1.8em!important;}

span.para{font-size:0.9em!important;line-height:1.8em;}

tr.ban{width:100%!important;height:256px!important;}

}

/*! CSS Used from: Embedded */

#footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:#666666;padding:30px 60px;}

@media screen and (max-width: 768px){

#footer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}

}

.social_icons{display:-webkit-box;display:-ms-flexbox;display:flex;}

@media screen and (max-width: 768px){

.social_icons{margin:15px 0 0 0;}

}

.social_icons div{margin:0 0 0 5px;}

#logo{width:216px;height:46px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png);}

#twiterr_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/twiterr_icon.png);}

#linkedin_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/linkedin_icon.png);}

#insta_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/insta_icon.png);}

#youtube_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/youtube_icon.png);}

#fb_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/fb_icon.png);}</style>

   

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

  <table border="0" width="100%" cellpadding="0" cellspacing="0">

        <tr bgcolor="00000">

            <td width="100%" align="center" valign="top" bgcolor="cccccc">

                <!-- main content -->

                <table width="700" border="0" cellpadding="0" cellspacing="0" align="center" class="container top-header-left" bgcolor="00000">

  <!-- Header -->

                <tr style="background:url(http://offers.premierinc.com/rs/381-NBB-525/images/building.jpg) no-repeat 0px 0px; background-size:cover;" height="300" class="ban">

                  <td>

                  <table border="0" width="650" align="center" cellpadding="0" cellspacing="0" class="container-middle">

  <tr><td height="30"></td></tr>

  <tr>

   <td><table width="100%" border="0" cellspacing="0" cellpadding="0">

   <tbody>

  <tr>

   <td>

  <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="mainContent">

  <tr align="center"><img style="margin:0 auto;display:block;margin-top:15px;margin-bottom:30px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png" alt="LineItemDetails" height="46" width="216">

  <hr style="width:73%;"><td style="padding:0px 0;"><span class="h-title" style="color:#fff;font-family: 'Roboto Slab'; font-size:57px;font-weight:300;line-height:1em;text-align:center;text-decoration:none;">Executive Review </span><hr style="width:80%;margin-top:15px;"></td>

  </tr>

  <tr>

  <td align="center" style="color:#ffffff; font-family: 'Roboto Slab'; font-size:16px;margin-bottom: 15px;" data-color="header small text" data-size="header small text" data-min="15" data-max="18">

  <span class="para">

  Insite. Spotlight. Engagement.

  </span><hr style="width:80%;">

  </td>

  </tr>

  </table>

  </td>

  </tr>

  </tbody>

  </table>

  </td>

  </tr>

  <tr><td height="22"></td></tr>

                  </table>

                  </td>

                </tr>

             

  <!-- second box-->    

                <tr>

      <td bgcolor="ffffff">

      <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="mainContent"> <tr>

  <td height="30"></td>

  </tr>

  <tr align="center">

  <td style="padding:10px 0;"><span class="h-title" style="color:#333333;font-family:Arial;font-size:30px;font-weight:600;line-height:1em;text-align:center;text-decoration:none;">Executive Leadership Track </span></td>

  </tr>

  <tr>

  <td align="center" style="color:#333333; font-family:Arial;font-size:16px;margin-bottom: 15px;line-height:1.5em;" data-color="header small text" data-size="header small text" data-min="15" data-max="18"> <div style="text-align: center;">

  <a style="margin-top:15px;margin-bottom:20px;padding:5px 26px 5px 26px;background-color:#transparent;border: 2px solid #ffc627;border-radius: 7px;line-height: 1.5;color:#ffc627;color:#ffc627;font-size:20px;text-decoration: none;font-family: 'Roboto Slab';font-weight:400;display: inline-block;text-align: center;"  href="#">Find Out Why</a></div>

  <span class="para">

  <b>Mike Alkire</b>, Premier’s Chief Operating Officer, discusses <br>

disruption in supply chain and what it means for you.

  </span>

  </td>

  </tr>

    

  <tr>

  <td height="30"></td>

  </tr>

      </table>

      </td>

    </tr>

  <!--third box-->

  <!-- yellow -->

  <td bgcolor="666666"height="3"></td>

                <tr style="background:url(http://offers.premierinc.com/rs/381-NBB-525/images/pattern.jpg) no-repeat 0px 0px; background-size:cover;" height="250" class="ban">

                  <td>

                  <table border="0" width="600" align="center" cellpadding="0" cellspacing="0" class="container-middle">

  <tr>

   <td><table width="100%" border="0" cellspacing="0" cellpadding="0">

   <tbody>

  <tr>

   <td>

  <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="mainContent">

  <tr align="center">

  <td style="padding:10px 0;"><span class="h-title" style="color:#333333;font-family:Arial;font-size:35px;font-weight:600;line-height:1em;text-align:center;text-decoration:none;">2018 Healthcare Trends </span></td>

  </tr>

  <tr>

  <td align="center" style="color:#333333; font-family:Arial;font-size:16px;margin-bottom: 15px;line-height:1.5em;" data-color="header small text" data-size="header small text" data-min="15" data-max="18">

  <span class="para">

  Premier Chief Executive Officer and President, Susan Devore<br> breaks down what to expect in 2018, and how to prepare for what’s next.

  </span>

  </td>

  </tr>

  </table>

  <div style="text-align: center;">

  <a style="margin-top:25px;padding:5px 26px 5px 26px;background-color:#0091b3;border: 2px solid #ffffff;border-radius: 7px;line-height: 1.5;color:#ffc627;color:#ffffff;font-size:20px;text-decoration: none;font-family: 'Roboto Slab';font-weight:400;display: inline-block;text-align: center;"  href="#">Learn More</a></div>

  </td>

  </tr>

  </tbody>

  </table>

  </td>

  </tr>

  <tr><td height="22"></td></tr>

                  </table>

                  </td>

                </tr><td bgcolor="666666"height="3"></td>

  <!-- second box-->    

                <tr>

      <td bgcolor="ffffff">

      <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="mainContent">

      <tr align="center"><img style="margin:0 auto;display:block;margin-top:25px;margin-bottom:15px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/brk-18-logo_1.png" alt="LineItemDetails" height="69" width="350">

  <td style="padding:10px 0;"><span class="h-title" style="color:#333333;font-family:Arial;font-size:30px;font-weight:600;line-height:1em;text-align:center;text-decoration:none;">Executive Leadership Track </span></td>

  </tr>

  <tr>

  <td align="center" style="color:#333333; font-family:Arial;font-size:16px;margin-bottom: 15px;line-height:1.5em;" data-color="header small text" data-size="header small text" data-min="15" data-max="18">

  <span class="para">

  Wednesday, June 20 and Thursday, June 21<br>Gaylord Opryland, Nashville, TN

  </span>

  </td>

  </tr>

      </table>

      <div style="text-align: center;">

  <a style="margin-top:25px;margin-bottom:45px;padding:5px 26px 5px 26px;background-color:#transparent;border: 2px solid #ffc627;border-radius: 7px;line-height: 1.5;color:#ffc627;color:#ffc627;font-size:20px;text-decoration: none;font-family: 'Roboto Slab';font-weight:400;display: inline-block;text-align: center;"  href="#">Register Now</a></div>

      </td>

    

    </tr>

  <!-- footer -->

  <tr>

  <td bgcolor="#3abac1">

  <div id="footer">

<div id="logo"></div>

<div class="social_icons">

<div id="twiterr_icon"></div>

<div id="youtube_icon"></div>

<div id="insta_icon"></div>

<div id="linkedin_icon"></div>

<div id="fb_icon"></div>

</div>

<!-- end social_icons -->

</div>

  </td>

  </tr>

  <!-- footer -->

  </table>

            

            </td>

        </tr>

  </table>

</body>

</html>

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

Email clients do not have the full range of interpreters that web browsers have. As such, most do not recognise HTML5, an XHTML document is more suited, limited interpretations for CSS, stay with CSS 1, and cetainly no support for media queries, I think that GMail is an exception for media queries. In other words, scrap what you have done till now and start with humble table layouts.

A great starting point is the Starter Email Templates found in Dreamweaver, File -> New -> Starter Templates -> Email Templates.

Another great resource is https://foundation.zurb.com/emails/email-templates.html

For the rest, it is a matter of trial and error and heaps of Googling.

Views

508

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 16, 2018 0
Adobe Community Professional ,
Feb 16, 2018

Copy link to clipboard

Copied

Email clients do not have the full range of interpreters that web browsers have. As such, most do not recognise HTML5, an XHTML document is more suited, limited interpretations for CSS, stay with CSS 1, and cetainly no support for media queries, I think that GMail is an exception for media queries. In other words, scrap what you have done till now and start with humble table layouts.

A great starting point is the Starter Email Templates found in Dreamweaver, File -> New -> Starter Templates -> Email Templates.

Another great resource is https://foundation.zurb.com/emails/email-templates.html

For the rest, it is a matter of trial and error and heaps of Googling.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 16, 2018 1
Contributor ,
Feb 19, 2018

Copy link to clipboard

Copied

Hi Ben,

Thanks for your advice. I have found a few template sites that have code that works ok. I've used foundation. problem is my company wants all our emails to mimic the landing pages I create making things hard. Probably going to suggest simplifying the email version a bit to get around the problematic code. After using bulletproof button code my buttons look fine.

We use Marketo. Even their built in templates have issues. Mine even render better than theirs in most cases through litmus. I guess it all comes down to do you want it fancy and work on 80% of email clients or close to 100% with something simple with no background images.

Thanks again

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2018 0