¿Has creado html alguna vez para enviar en un email? ¿te ha vuelto loco algún cliente de email en particular no mostrando correctamente lo que ponías? dejame adivinar... ¿empezaba por ‘o’ dicho cliente? Bien vamos a intentar dar unas guías para que la próxima vez no sea una pesadilla crear algo que se vea bien en todos los clientes.
1) El doctype del documento es lo primero y de lo más importante, mi consejo es que utilices este:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2) Imagínate que las capas (divs) no existen y que volvemos a los inicios de html donde las tablas campan a sus anchas. La primera regla es pensar en tablas, todo el layout se construye con tablas.
3) Especifica siempre la anchura y altura, esta sólo cuando tu contenido vaya en altura fija, de la tabla (table) y celda (td). Las tablas siempre se definen con borde 0, espacio entre celdas 0 y padding entre celdas 0.
<table border="0" cellpadding="0" cellspacing="0" width="686">
4) Utiliza el alineado vertical de la celda para colocar los elementos interiores, donde normalmente pondremos valign=”top”
5) No hagas una gran tabla. Separa elemento colocando nuevas tablas dentro de celdas de otras, como si de divs se tratasen.
Ejemplo simplificado sin atributos en los elementos:
<table>
<tr>
<td>
<table><tr><td></td></table>
</td>
</tr>
</table>
6) Utiliza estilos en línea con el atributo style.
7) Las imágenes siempre llevan borde 0 (así evitaremos el borde azul si le ponemos un enlace) y display: block para evitar espacios del inline al final de la imágen.
8) Para texto utiliza divs con los tamaños de fuente y paddings que quieras dar en los estilos en línea, y no olvides darle la anchura de sus contenedor:
Ejemplo:
<div style="width: 514px; color: #FFFFFF; font-size: 13px; line-height: 15px; font-family: Arial; margin: 0; padding: 24px 30px 4px 30px;">Texto de prueba</div>
9) Para crear espacios utiliza una imágen, es decir si necesitas crear una línea negra de 10px de altura en el interior de la celda coloca un spacer.gif (imágen transparente de 1x1).
10) Para dar color de fondo utiliza el atributo bgcolor de la celda.
11) No uses color negro ni background negro, pues gmail no lo pinta, para ello utiliza 000001.
Comentarios