Template email Outlook

Template email Outlook / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Template email Outlook

Realizar el HTML para email con responsive, es en principio algo sencillo, pero hemos de valorar todas las plataformas para correo, en concreto Outlook y algunas de sus versiones, para evitar errores de antemano, hemos de usar condicionales específicos para internet explorer.

 

!--[if (condicional) IE (versión)]
HTML
![endif]--

 

Este template tiene tres botones con flotación, ambos aspectos generan problemas en los servicios de Microsoft en sus gestores de correos en Windows.

Este es un ejemplo de uno de los tres botones. Por un lado el HTML de la tabla y por otros los condicionales adaptados para explorer. Todo esto dentro de etiquetas table.

<!--[if (gte mso 9)|(IE)]>
  <table width="15" align="left" cellpadding="0" cellspacing="0" border="0" style="width: 15px;margin-left:">
      <tr>
          <td>
          <![endif]-->
          <table class="col25" align="left" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td style="padding-bottom: 30px;">
                <!--[if mso]>
                <table width="100" align="center" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td style="margin-left: 6%;">
                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:200px; margin-bottom: 20px;" arcsize="50%" stroke="f" fillcolor="#6dcafb">
                        <w:anchorlock/>
                        <center style="color:#ffffff;font-family:sans-serif;font-size:16px; text-transform: uppercase;">
                          <a href="" target="_blank" style="color: #ffffff;">
                            link I
                          </a>
                        </center>
                    </v:roundrect>
                   </td>
                  </tr>
                </table>
                <![endif]-->
                <!--[if !mso]> <!-->
                <table align="center" cellspacing="0" cellpadding="0">
                  <tr>
                    <td align="center" width="200" height="40" style="-webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; color: #ffffff; text-transform: uppercase; margin-bottom: 20px;border: 1px solid #6dcafb;background-color: #6dcafb;">
                        <a href="" target="_blank" style="color: #ffffff; font-size:16px; text-decoration: none; line-height:40px; width:100%;">
                          link I
                        </a>
                    </td>
                  </tr>
                </table>
                <!-- <![endif]-->
              </td>
            </tr>
          </table>
          <!--[if (gte mso 9)|(IE)]>
          </td>
      </tr>
  </table>
<![endif]-->

 

Descargar template

Mariano J.

Escribe un comentario

Tu email no se hará visible