Advertisement
  1. Web Design
  2. Email Design
Webdesign

Construye desde cero una plantilla de email en HTML

by
Length:LongLanguages:

Spanish (Español) translation by Antonio Escudero (you can also view the original English article)

Final product image
What You'll Be Creating

La mejor manera de entender el proceso es hacerlo uno mismo desde los cimientos hacia arriba. Hoy vamos a realizar exactamente esto con el diseño de un email construyendo una plantilla en html desde cero.

Comenzando el proceso.

Para empezar es importante mencionar de donde obtuve algunos de los recursos.

Ahora, como ya discutimos en el anterior tutorial,  tendrás que empezar el documento html de tu email con un XHTML doctype:

Dicho esto, podemos comenzar a construir el resto de la estructura.

Creando el Body (cuerpo) y el Main Table (tabla principal)

Primero,  añadiremos una estructura general para nuestro email, empezando con un tag de <body>.  Pondremos  el margen (<margin>) y el padding en el tag body a cero para evitar espacios inesperados. También añadiremos un tag table con un width (ancho) del 100%. Éste actúa como un verdadero tag body para nuestro email porque introducir estilos en el body no está completamente soportado.

Por esto, si necesitas añadir un color de fondo (background-color) al ‘body’ de tu email, tendrás que añadírselo al tag table grande.

Tendrás que establecer el cellpadding y cellspacing a cero para evitar cualquier espacio inesperado.

Nota: Vamos a dejar el border=“1” en todas nuestras tablas, para que podamos ver el esqueleto de nuestro layout mientras avanzamos. Los quitaremos al final con un simple Buscar & Reemplazar.

1

Si existe un atributo en HTML, úsalo en vez de CSS

Ahora sitúa una tabla (table) centrada de 600 píxeles de ancho dentro de la tabla (table) contenedor. 600 píxeles es una ancho máximo seguro para que nuestros emails se muestren adecuadamente en casi todas la resoluciones de pantalla de ordenadores de sobremesa y clientes de webmail.

Establece este ancho usando HTML en vez de CSS a través del atributo width. La regla de oro en el desarrollo de emails en HTML es: si un atributo de HTML existe úsalo en vez de CSS.

Reemplazaremos nuestro pequeño saludo Hello! con esta tabla (table):

También hemos añadido una serie de propiedades de estilo inline que fija la propiedad border-collapse en collapse. Si no hacemos esto, versiones nuevas de Outlook añadirán un pequeño espacio entre nuestra tabla (table) y nuestro border(border).

2

Creando la Estructura y el Header.

En nuestro diseño podemos ver que el email está dividido en tres secciones lógicas, por lo que crearemos una fila para cada una.

Ahora duplicamos la fila individual que ya tenemos hecha para que tengamos en total las tres filas. He cambiado el texto de dentro de éstas para que podamos identificar fácilmente cada una.

3

Ahora les añadiremos color de acuerdo al diseño. Como bgcolor es un atributo HTML válido, lo usaremos para establecer el color de fondo en vez de utilizar CSS. Recuerda utilizar siempre los seis caracteres del código hexadecimal, ya que el shorthand de tres caracteres no funcionará siempre.

4

OK, a continuación nos vamos a centrar en la Fila 1. Queremos ajustar el padding de la celda y luego insertar nuestra imagen.

Usando el Padding

Cuando utilizas la propiedad padding en email, debes especificar siempre cada uno de sus posibles valores (arriba, derecha, abajo e izquierda), por ejemplo. padding: 10px 10px 8px 5px; pero si tienes problemas igual prefieres escribirla de la forma larga, por ejemplo. padding-top:10px; padding-right:10px; padding-bottom:8px ; padding-left:5px;.

Si tienes problemas más grandes todavía con el padding (por ejemplo, si tu plataforma de envío de mail está excluyendo tu CSS), no lo utilices. Simplemente utiliza celdas vacías para crear espacio. NO hay necesidad de utilizar GIFs para crear espacio, solamente estáte seguro de añadir style=“line-height: 0; font-size: 0” a la celda, coloca un &nbsp; dentro y asígnale un height o width explícito. Aquí tienes un ejemplo:

También ten en cuenta que es seguro utilizar padding en los tags td pero no en los tags p o DIVs. Se comportan de una manera más impredecible.

Usaremos CSS inline para añadir padding a la celda. Luego instaremos nuestra imagen, añadiendo el texto del alt y style=“display: block;” que es un arreglo común que evita que algunos clientes de email añadan espacios debajo de nuestras imágenes. Centraremos la imagen añadiendo align=“center;” a nuestro tag td. También añadiremos un tag alt que es importante para cuando nuestro email es inicialmente cargado, que en muchos casos será con las imágenes desactivadas.

Nota: Si el contenido de tu header es realmente importante para tu mensaje, no utilices un header de sólo imagen. Recuerda, las imágenes son bloqueadas por defecto por la mayoría de los clientes de email, por lo que si hay un aspecto que es crucial en tu email nunca lo incluyas como una imagen. En este ejemplo, mi header is superflúo.

6

Creando el área Del Contenido

Primero añadiremos algo de padding al centro de la celda para que la tabla (table) de dentro tenga algo de espacio alrededor.

7

Ahora añadiremos una tabla (table) con tres filas para nuestro contenido principal - uno para nuestro titular o encabezado, uno para el texto de introducción y otro para la fila con dos columnas. Fijaremos el ancho de la tabla (table) a 100%  ya que es mejor que usar valores en píxeles. Esto nos ayudará más adelante si queremos hacer nuestro diseño responsive. Si utilizas siempre píxeles en el ancho, puedes encontrarte que tendrás que sobre escribir muchos valores en tus media queries. Si el ancho de tus tablas anidadas está basado en porcentajes, luego cuando ajustes el ancho del elemento padre, todo se adaptará como corresponde.

8

Ahora añadiremos nuestro contenido y un poco de padding a la celda central.

9

Ahora vamos a añadir nuestras dos columnas de contenido a nuestra Fila 3. Como queremos un ‘margen’ entre medias de las dos celdas, pero no es soportado, crearemos una tabla de tres columnas  con una celda vacía entre las dos columnas exteriores.

Aunque nos gustaría ceñirnos al uso de porcentajes, pero cuando  tienes contenido con un tamaño específico puede ser complicado convertirlo en porcentajes (en este ejemplo, las columnas tendrán 48,1% lo cual podría ser confuso). Por esta razón, como nuestras dos imágenes tiene 260px de ancho, crearemos columnas que tienen  260px de ancho también, con un margen de 20px en la celda central.(El total será de 540px, que son los 600px de ancho de nuestra tabla menos el padding de 30px de cada lado.) Estate seguro de fijar a cero el font-size y el line-height y añade un carácter  de espacio &nbsp; en el margen de la celda.

También estableceremos el valing al “top”(arriba) para ambas celdas para que se alinean verticalmente a la parte de arriba, incluso si una columna tiene más texto que la otra. El alineamiento vertical (vertical alignment) por defecto es “middle”.

10

Ahora añadamos nuestras imágenes y contenido a esas columnas. Como necesitamos varias filas, anidaremos una nueva tabla(table porque nos podemos utilizar ningún tag tipo colspan o rowspan). También añadiremos algo de padding entre la imagen y el texto en cada columna.

Aquí hemos fijado el ancho de las imágenes al 100% del ancho de la columna usando HTML. Esto, otra vez, se hace para que podamos hacer nuestro email responsive, solamente tendremos que usar media queries para cambiar el ancho del elemento padre. Tendremos que sobre escribir el height(alto) en píxeles porque usando el style=“height:auto;” ahora no funcionará en todos los clientes (ejem, ejem, Outlook). Por lo que lo fijaremos usando píxeles. Esto significa que tendremos que fijar height: auto!important en las imágenes usando media queries para sobre escribir los valores en píxeles, pero podremos hacer esto con una sola clase. Por lo que si fijamos el ancho en porcentajes no necesitaremos sobre escribir nada. Las menos cosas que tengamos que sobre escribir mejor.

13

El Pie de Página (Footer)

Ahora añadiremos nuestro padding a la fila del footer.

14

Dentro de esta celda, anidaremos una nueva tabla (table) para crear nuestras dos columnas.

15

Crearemos otra pequeña tabla (table) para nuestros iconos de redes sociales. Fijaremos la celda padre a align=“right”. Estáte seguro de fijar el border=“0” en los links de éstas imágenes (para evitar el borde azul de los links) y no olvides el display:block.

17

Ahora añadiremos nuestro texto y un ancho a nuestras celdas, solo para estar seguros, aunque hay bastante espacio en blanco entre ellas. Fijaremos esta celda al 75% y la otra al 25%.

¡Y aquí lo tenemos! Nuestro layout está completo.

Validación

Comprobemos nuestro email a través de W3C Validator para estar seguros que nada está mal o roto. Si has seguido esta guía exactamente como decimos te saldrá que has pasado.

email-build-valid

A continuación vamos a pasar un test a través de Litmus para asegurarnos que la estructura de nuestro email funciona genial. Aquí tienes un resumen de mi test:

email-build-litmus
Online

Dando estilo a nuestro texto

Nuestra primera fila es el heading. Usaremos el tag <b> para crear text en negrita porque, como ya sabemos, si existe un atributo HTML lo usaremos en vez de CSS.

También añadiremos estos estilos inline a todas las otras celdas de texto.

A continuación tenemos que dar estilos al texto del pie de página (footer), y también limpiaremos un poco nuestro link para darse de baja. Lo haremos usando CSS y el tag HTML <font>. Este duplicado es la mejor manera de asegurarnos que nuestros links nunca se muestren en el azul típico que viene por defecto.

20

¡Y ahí lo tenemos! Todo está dentro. Ahora es el momento de quitar los bordes y ver lo bien que se ve. Revisa y reemplaza cada concordancia de border=“1” con border=“0”.

21

En este punto, se el diseño se ve un poco triste flotante entre tanto espacio en blanco, por lo que vayamos a nuestra primera tabla (table) de 600px de ancho y añadamos:

Ahora ya no parece como si estuviera flotando. Como toque final, voy a añadir un padding bottom de 30px a la parte de abajo de la primera celda de todas para prevenir que nuestro email se parece de una forma abrupta en algunos clientes webmail (como Apple Mail) en la parte de abajo y 10px de padding top para que nuestro header azul tenga un poco de aire y respire.

23
 

¡Y ya está! Estamos preparados para un test final.

email-build-litmus-finished
Online

Esto es un Consejo

Antes de terminar, si has utilizado comentarios en tu código deshazte de ellos. Algunos clientes de email pueden atragantarse con los comentarios por los que es bueno no tener código innecesario en nuestros archivos.

Ahora es el momento de hacer un test final, y tu email en html está preparado para enviarse.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.