miércoles, 18 de febrero de 2015

4 formas de hacer Call-to-Actions efectivos.

Lo más importante de nuestro email es que nuestros contactos interactuen con nuestro mensaje. Acá es dónde entra en escena el Call-To-Action. Normalmente recaemos sobre imágenes para crear botones llamativos, pero más de una vez nos encontramos con el problema del bloqueo de imágenes y todo el esfuerzo que pusimos ahí queda en la nada. Entonces, hoy traigo 4 formas de crear botones increibles con código y sin necesidad de imágenes.


1) Botones VML
Estos son botones basados en darle estilo en el link en si mismo para la mayoría de clientes de emails. La estructura esta formada por line-height y width. Para Microsoft Outlook creamos una versión del boton con códigos condicionales de Outlook (acá es dónde entra el código VML).

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><!--[if mso]>
          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
            <w:anchorlock/>
            <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Click Aquí &rarr;</center>
          </v:roundrect>
        <![endif]--> 
      <a href="http://buttons.cm" style="background-color:#EB7035; border:1px solid #EB7035; border-radius:3px; color:#ffffff; display:inline-block; font-family:sans-serif; font-size:16px; line-height:44px; text-align:center; text-decoration:none; width:150px; -webkit-text-size-adjust:none; mso-hide:all;">Click Aquí &rarr;</a></td>
  </tr>
</table>

Este botón en general es bastante bien aceptado en todos los clientes de email y, como extra, todo el boton es clickeable.
Lo malo de este botón es el uso de VML, que es un lenguaje de aplicaciones de Microsoft Office. La verdad es que puede volverse bastante tedioso modificar este botón cada vez que lo incluimos en una pieza porque son dos versiones del botón y salvo que te quieras aprender el lenguaje VML (cosa que no creo) tal vez no sea la mejor opción.
Igual, Campaign Monitor creó una página para crear este tipo de botones con una app, te dejo el link: http://buttons.cm/


2) Botones con padding
Este tipo de botón usa una tabla con padding en la celda para la estructura.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#EB7035" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Click Aquí &rarr;</a></td>
        </tr>
      </table></td>
  </tr>
</table>

Este tipo de botón es bastante fácil de manejar y editar ya que utiliza HTML y CSS y son lenguajes con los que estamos familiarizados.
Lo malo de este botón es que no es enteramente clickeable, si no que solo el texto es clickeable y lo demás es de vista.


3) Botones con border
Este tipo de botón es bastante parecido al anterior, pero en vez de recaer sobre el padding en la celda, agregamos bordes directamente en el style del link.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <a href="http://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #EB7035; border-top: 12px solid #EB7035; border-bottom: 12px solid #EB7035; border-right: 18px solid #EB7035; border-left: 18px solid #EB7035; display: inline-block;">Click Aquí &rarr;</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Este botón tiene el estilo inline-block y los borders estan generando un falso padding, que nos asegura que toda el área del botón es clickeable.
Lo malo de este tipo de botón es que algunas versiones del outlook y el borde se va a pegar al texto. A pesar de esto, esta opción tiene varias ventajas:

  • Todo el estilo esta en el <a>, lo que simplifica mucho el código.
  • No necesitamos crear una segunda versión de botón como en el VML
  • Este tipo de botón es fácilmente adaptable a mobile. 

4) Botones con border+padding
Este tipo combina los botones 2 y 3.
Lo que hacemos es generar con padding en el <a> el tamaño del botón y le damos al menos 1px de border, y el color de relleno de lo damos con background a la celda.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">Click Aquí &rarr;</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

A pesar de que hay que usar dos styles (uno en el td y uno en el a) este botón no necesita una segunda versión como el VML, es fácilmente adaptable a mobile y podemos agregar imágenes de fondo, dado que el relleno se lo damos en el <td> y sabemos que en el <td> es la única etiqueta dónde se aceptan imagenes de fondo :)


MSO Hack
Cómo siempre, hay que atajarse a algunas cosas. En este caso, tenemos a nuestro querido Microsoft Outlook que no nos toma padding horizontal, entonces lo que necesitamos es agregar este condicional a ambos lados del link:

<!--[if mso]> <![endif]-->


Botones y Media-queries
Usando -webkit y -moz media-queries podemos crear mejores botones para algunos de nuestros usuarios que utilicen clientes y navegadores más nuevos. Nos da la posibilidad de agregar degradados, bordes, hovers, etc.

Para que vean como funcionan estos botones a través de los distintos clientes, les dejo este test de Litmus.


Qué opinan de estos botones? Cuentenme!


¡No te olvides de seguir el blog en las redes sociales!
Twitter: @haceloresponsiv
Facebook: Hacelo Responsive Che
Y todo se repostea en Medium.

También pueden seguirme a mi!
Twitter: @marieseen
Linkedin: Marie Seen

No hay comentarios:

Publicar un comentario