jueves, 20 de noviembre de 2014

El ABC del código para emails

Maquetar un email no es como maquetar una web. Cada cliente de email interpreta a su gusto el código y lo muestra como le parece. Además, no hay estándares a seguir.
En esta nota vas a encontrar todos los tips básicos que necesitas para no volverte loco y que tus htmls queden 10 puntos.


Con qué vas a trabajar?

La verdad es que yo personalmente uso Dreamweaver. Me resulta práctica la vista doble (yo uso la vertical) ya que puedo ir escribiendo el código y a la vez veo como me va quedando el email. Creo que es muy muy muy útil esto.
Si no sabes nada de código y querés hacerlo con DW, adelante, pero tenés que saber que te va a agregar un montón de código extra inservible que puede provocar errores y fallas en tu email.
Si sabes código y no te gusta DW, podés usar cualquier editor de código que te guste: Sublime, Notepad++, Coda, Textmate, el básico Notepad de Windows o cualquiera que uses que te resulte cómodo.

POR FAVOR, no armes tu email en Word y luego lo guardes/exportes en HTML. Esto es un error ENORME. No hay chances de que tu email se vea bien si haces esto asi que ¡evitalo!


Ya tenemos nuestro editor de código, ahora...
La Estructura

Para ahorrarte disgustos usa siempre tablas. Si, ya sé, volvemos a los 90 pero ¿Qué va ser?
Sé que muchos de ustedes (como yo también) aprendimos a base de divs, asique les dejo acá como es el código de una tabla de una fila x dos columnas:
<table cellspacing="0" cellpadding="0">
      <tr>
         <td>HOLA!</td>
         <td>Esto es un ejemplo de tabla</td>
     </tr>
</table>


<table> define la tabla
<tr> define la fila.
<td> define la columna o celda.

Normalmente yo creo una gran tabla contenedora alineada al centro y dentro de esta anido tablas de contenido.
<!-- inicia contenedor  -->
<table align="center" cellspacing="0" cellpadding="0">
                     <tr>
                        <td>
                           <!-- inicia contenido -->
                           <table cellspacing="0" cellpadding="0">
                           <tr>
                                  <td>HOLA! </td>
                                  <td>Esto es un ejemplo de tabla</td>
                                </tr>
                           </table>
                          <!-- fin contenido -->
                        </td>
                     </tr>
</table>
<!-- fin contenedor -->
¡Importante!
Sé que muchos los usan, pero yo estoy totalmente en contra de utilizar COLSPAN y ROWSPAN.
No tuve más que problemas con estos atributos, por lo que te recomiendo que ¡no los uses!. Es preferible que anides tablas antes de que utilices dichos atributos, de esta forma todo va a tener una caja contenedora y te va a ser fácil identificar que todas las etiquetas estén cerradas y te vas a ahorrar dolores de cabeza.
<p></p> / <h1></h1> y este tipo de etiquetas no siempre funcionan, asique mejor si querés hacer varios párrafos utiliza <td></td> o separalos con <br>

Estilos: CSS Si! Pero inline

No podemos incluir el CSS en una stylesheet ni ponerlos en el head de nuestro email. ¿Por qué? Porque hay clientes de email que eliminan el head del HTML y ¡chau! Te quedaste sin estilos en tu email. Cómo se ve el css inline? Así, mirá:
<td style="font-size:12px; text align:center; font-family: courier; color:#000000;">Hola!</td>
Ojo! Porque no todos los estilos son aceptados por todos los clientes de email.
margin, padding, line-height, entre otros, son estilos que no son interpretados de igual forma por todos los clientes de email. Las imágenes de fondo son otro ejemplo: no todos los clientes de email las muestran y depende si usas background o background-image la van a tomar de una forma u otra.
Cuando indiques colores utiliza códigos hexadecimales con sus seis dígitos: #000000, #CCCCCC, #CECECE
¡No escatimes en detalles!
Que cada cosa este bien especificada: font-size, color, font-family, etc. No tomes el camino fácil usando estilos que combinan muchos estilos, porque esto no siempre te va a funcionar bien.

Links

Para los links tenemos que usar la etiqueta <a>. No uses mapas, ya que algunos clientes de correo no los interpretan. Un link debería verse de esta forma en el código:
<a href="http://www.link.com">Esto es un link</a>
Si, ya sé, lo ves todo azul y subrayado ¡horrible!. La solución? Usar un poquito de css:
<a href="http://www.link.com" style="text-decoration:none; color: #2388c9;">Esto es un link</a>

Imágenes

Todos tenemos email, y a todos nos pasó abrir un email y tener que autorizar la descarga de las imágenes. Entonces: no te confíes enviando un email que sea pura imagen, equilibra tu contenido con texto.
Además, siempre asegúrate que tus imágenes tengan rutas absolutas y no te olvides el atributo “alt”:
<img src="http://www.misitio.com/imagen.jpg" alt=”Esto es una imagen”>
Tené en cuenta:
• Usa archivos gif o jpg.
• Agrega el atributo border=”0”
• Agrega style=”display:block;” y no vas a tener espacios indeseados entre las imágenes.
• Agregá, al menos, el width o ancho a cada imagen.



Otra info que te va a servir

• No uses flash, ni javascript, ni nada que tenga interactividad. No funciona. Tampoco formularios.
• Los .gif animados normalmente funcionan ok, pero en Outlook 2007/2010 solo te muestra el primer fotograma.
¡Analiza tu audiencia! Tenés más usuarios Hotmail o Gmail? Conociendo tu audiencia, vas a saber dónde poner más esfuerzo.
• Por ultimo… ¡No te olvides de testear en la mayor cantidad de clientes de email posibles!

¿Tenés otros tips útiles? ¡Dejalos en los comentarios!



¡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

2 comentarios: