Advertisement
  1. Web Design
  2. Email Design

Construye desde cero una plantilla de email HTML responsive

by
Read Time:18 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

La mejor manera de entender cualquier proceso consiste en llevarlo a cabo uno mismo, desde el principio hasta el final. Hoy vamos a hacer exactamente esto con el diseño de un email creando una sencilla plantilla de email HTML responsive desde cero.

Cuanto antes dejes de pelearte contra las peculiaridades del email, antes podrás usarlos en tu propio beneficio.” – Caity G. O'Connor

Populares plantillas de email HTML responsive disponibles en Envato Elements

Si estás buscando una solución profesional ya construida, hazte con una de las populares plantillas de email HTML de Envato Elements. Disponemos de cientos de opciones de plantillas de correo electrónico responsive todas incluidas en tu suscripción de Elements, con características fáciles de personalizar para ponerte en marcha.

Populares plantillas de email HTML disponibles en Envato Elements
Populares plantillas de email HTML disponibles en Envato Elements

La plantilla de email HTML responsive que vamos a crear

Aquí está la plantilla HTML de email responsive que estamos construyendo, siéntete libre de guardar el pen y de usarlo tú mismo. Ten en cuenta que cuando vemos esta plantilla a través de un navegador web, probablemente no nos toparemos con el tipo de problemas que sí encontraremos en los clientes de correo electrónico.

1. Empieza tu documento de plantilla de email HTML responsive

Para empezar, es importante mencionar de dónde obtuve algunos de los recursos. 

Ahora, tal y como vimos en el anterior tutorial, tendrás que empezar tu plantilla HTML para email con un tipo de documento HTML, y el lenguaje correcto para tus suscriptores. En este caso vamos a usar el tipo de documento HTML5, estableciendo nuestro idioma a inglés con <html lang="en">, e incluyendo también los namespaces de XML y de Microsoft Office (los fragmentos xmlns). Vamos a necesitarlos unas líneas más abajo, tal y como explicaré.

 

En el código de arriba hay unas cuantas cosas, pero es lo mínimo que necesitas para asegurarte que tu correo electrónico final se renderice perfectamente en cualquier sitio.

En primer lugar, tenemos algunas etiquetas meta para asegurarnos que la codificación del texto sea la adecuada, el escalado de la ventana gráfica en los distintos dispositivos móviles, y uno para evitar que Apple ajuste el tamaño de forma extraña en sus aplicaciones de correo electrónico.

Bajo la etiqueta <title></title> verás algo de código entre <!--[if mso]><![endif]-->. Al colocar el código dentro de esas dos etiquetas significa que solo Microsoft Outlook en Windows lo aplicará (mso = 'Microsoft Outlook'). Y ahí, tenemos una pequeña cantidad de XML que asegurará que las imágenes PNG se muestren en el tamaño adecuado en Outlook en Windows. Los ajustes xmlns que ponemos en la etiqueta HTML aseguran que este código se va a interpretar adecuadamente. 

Bajo esto, tenemos una etiqueta style con tan solo un par de reglas CSS. La primera establece la fuente para todos nuestros principales elementos, y esto es para beneficio del correo electrónico web de Gmail, el cual sobreescribirá nuestros ajustes de fuente a menos que incluyamos esto. Si al final más adelante cambias tus fuentes, asegúrate de hacer el cambio aquí también.

Por último, estamos incluyendo table, td {border:2px solid #000000 !important;} que dibujará un borde en cualquier cosa. Esto es simplemente para que podamos ver lo que estamos haciendo mientras construimos, y lo eliminaremos todo al final.

Sorteado esto, podemos empezar a construir el resto de la estructura.

2. Creación del cuerpo y la tabla principal

Primero, añadiremos una estructura general para nuestro email, empezando con una etiqueta <body>. Añade el siguiente código directamente bajo la etiqueta </head>:

Puedes ver que los márgenes y los espacios de relleno (padding) de la etiqueta body están establecidos en cero para evitar cualquier espacio no deseado.

También hemos añadido una tabla con una anchura del 100%. Esto funciona realmente como una etiqueta body para nuestro email, ya que en ocasiones la etiqueta body es eliminada por los clientes de correo electrónico. Aplica cualquier color de fondo que desees al 'body' en esta etiqueta de tabla.

Todas nuestras tablas serán establecidas a role="presentation". Esto las hace más accesibles, ya que le indica a los lectores de pantalla que las traten como tablas visuales, no como tablas de datos.

Hemos establecido border-collapse a collapse, y tanto border como border-spacing a cero para evitar cualquier espacio no deseado en la tabla.

Habrás notado que estamos usando <td align="center">, y si ya estás familiarizado con HTML te estarás preguntando por qué, si align es realmente ya una propiedad obsoleta. La usamos porque los clientes de correo electrónico varían mucho en cuanto a su soporte de CSS, y con frecuencia seguimos necesitando usar HTML obsoleto para asegurarnos de que todo se muestre adecuadamente en cualquier sitio. En esta instancia, lo hacemos porque Outlook para Windows no obedece al CSS margin:0 auto; para centrar las cosas.

Por último, asegúrate de que siempre estableces el espacio de relleno en las celdas de tus tablas a cero en los estilos en línea, por ejemplo, <td style="padding:0;">, de no hacerlo los clientes de email añadirán su propia cantidad de espacio de relleno. Cuando añadimos espacio de relleno nosotros mismos, podemos ajustar este valor, pero si no existe espacio de relleno aplicado a ninguno de los lados, debes establecerlo explícitamente a cero.

Una nota sobre el uso de las abreviaturas para especificar el espacio de relleno

Cuando uses el espacio de relleno CSS en las celdas de tablas, puedes escribirlo de forma segura de tres formas. O bien especificando un valor, por ejemplo, padding:20px lo cual aplicará 20 píxeles de espacio de relleno en cada lado de tu celda (arriba, a la derecha, abajo, y a la izquierda), o especificar el espacio de relleno en pares, por ejemplo, padding: 10px 20px, lo cual añadirá 10 píxeles de espacio tanto arriba como abajo, y 20 píxeles tanto a la izquierda como a la derecha. Si ninguno de estos son adecuados, deberías declarar cada lado, es decir padding: 10px 10px 0 5px. En todos los casos debes establecer cada valor, incluso aunque algunos de ellos tengan un valor de cero. Además, especificar tres valores puede tener resultados impredecibles entre los distintos clientes de correo electrónico. 

El espaciado de relleno funciona de forma confiable en las celdas de tabla en todos los clientes de correo electrónico, pero si estás teniendo problemas con él, no es necesario recurrir a GIF espaciadores. En un apuro puedes recurrir a divs o celdas espaciadoras. Simplemente incluye dentro de ellos un carácter de espacio irrompible (&nbsp;), establece una correspondiente altura (height) y una altura de línea (line height), y asegúrate de incluir mso-line-height-rule:exactly lo que se asegurará de que Microsoft Outlook para Windows lo renderice en un tamaño de píxeles perfecto. (Si estás creando espacios horizontales, tienes que especificar una anchura (width) en lugar de una altura, y podrías necesitar añadir también font-size:0;.) Aquí tienes un ejemplo de un espaciador dentro de una fila:

 

Y esto es un div espaciador:

 

Añadir la tabla principal

Coloquemos ahora una tabla con una anchura de 602 píxeles dentro de la tabla contenedora.

600 píxeles es una anchura máxima segura para que tu email HTML se presente cómodamente dentro de la mayoría de clientes de correo electrónico tanto de escritorio como web en la mayoría de las resoluciones de pantalla, y estamos añadiendo 2 píxeles de manera que tengamos un borde de 1 píxel alrededor del exterior, lo cual añadirá un píxel en cualquier lado.

Sustituiremos nuestro pequeño ‘Hello!’ de bienvenida con esta tabla.

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 anchura máxima segura para que nuestros emails se muestren adecuadamente en casi todas las resoluciones de pantalla de ordenadores de sobremesa y clientes web de correo electrónico.

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):

 

¡Excelente! Ahora tenemos nuestra tabla, y nuestra tabla de contenido principal dentro, preparada para algunas filas de contenido.

La tabla contenedora para nuestro diseño de email HTML

3. Creación de la estructura HTML de la plantilla y la cabecera del email

En nuestro diseño de plantilla de email HTML responsive podemos establecer que este esté dividido en algunas secciones lógicas, de manera que vamos a crear una fila para cada una.

Dupliquemos la fila única de la última tabla que añadimos de manera que tengamos tres en total, copiando todo lo existente entre (e incluyendo) las etiquetas <tr> y </tr> y pegándolo a continuación dos veces.

He cambiado el texto 'Hello!' para que lea Row 1, Row 2, y Row 3 de manera que ahora tenga el siguiente aspecto:

 
Filas adicionales en nuestro diseño de email HTML

Ahora les aplicaremos color de acuerdo al diseño añadiendo una propiedad CSS de background a la etiqueta style. Recuerda usar siempre todos los seis caracteres del código hexadecimal, como por ejemplo #ffffff, ya que las abreviaturas como #fff no funcionan siempre en todos los clientes de email.

 
Filas coloreadas

Bien, lo siguiente en nuestro diseño de plantilla de correo electrónico en lo que nos vamos a centrar es en la primera fila, es decir, Row 1. En la celda, cambiemos el espacio de relleno de 0 a 40px 0 30px 0. Luego, dentro de la celda insertaremos nuestra imagen:

 

Especifica siempre la anchura de tus imágenes usando el atributo de anchura HTML en lugar de hacerlo con CSS, por ejemplo, width="300" tal y como se ve arriba, en lugar de style="width:300px;". Si no lo haces, Microsoft Outlook para Windows mostrará tu imagen a su tamaño físico.

También hemos establecido la altura de la imagen (height) a auto para evitar cualquier aplastamiento, y display a block, lo cual evitará que aparezcan huecos bajo ellas en algunos clientes de correo electrónico.

Por último, si tu imagen contiene información importante no mencionada en el texto de tu email, asegúrate de añadir una descripción de la misma en la etiqueta alt de manera que sea anunciada por los lectores de pantalla para aquellos que los estén usando.

Nota: Las imágenes no siempre se cargan y los textos alt no siempre se muestran como alternativa, así que cualquier información crucial siempre debería estar incluida como texto en vivo en tu correo electrónico en lugar de estar incrustado en una imagen.

¡Y esta es la cabecera terminada de nuestra plantilla de email HTML responsive!

La cabecera del email HTML con una imagen

4. Creación del área de contenido

A continuación de la cabecera, concentrémonos en el área de contenido de nuestro email. En primer lugar, añadiremos algo de espacio de relleno a las celdas de Row 2 de manera que la tabla de dentro tenga algún espacio a su alrededor, conforme a nuestro diseño, así que su aspecto ahora será el siguiente:

 
Espacio de relleno añadido a la celda intermedia
Espacio de relleno añadido a la celda intermedia

Ahora sustituiremos el texto ‘Row 2’ con otra tabla para anidar dentro nuestro contenido principal dentro de ella. Al crear una plantilla HTML para email usando tablas, tenemos que anidarlas porque colspan y rowspan no son soportadas en todos los clientes de correo electrónico.

Hemos establecido la anchura de esta tabla al 100%. Es una buena práctica usar porcentajes para las anchuras siempre que sea posible en lugar de usar un valor en píxeles, ya que esto te ayudará posteriormente si quieres hacer tu email responsive, e incluso si simplemente necesitas ajustar más adelante la anchura de tu email. Las anchuras en porcentaje se adaptarán automáticamente al nuevo tamaño del contenedor, mientras que las anchuras en píxeles tendrían que ser actualizadas individualmente.

Dos filas anidadas para nuestro contenido principal
Dos filas anidadas para nuestro contenido principal

Ahora añadiremos nuestro contenido a la fila superior, que es una cabecera, un párrafo de texto, y un párrafo final con un enlace dentro. En este momento, no vamos a añadir a todos estos elementos.

Contenido y espacio de relleno añadidos a la fila superior
 

Sustituye el texto 'Row 1' con lo siguiente:

A continuación vamos a añadir nuestras dos columnas de contenido a Row 2. Como queremos un huevo entre estas dos celdas, crearemos una tabla de tres columnas con una celda vacía entre las dos columnas exteriores. Existen unas cuantas formas de crear este diseño, pero esta es la más fiable para nuestros propósitos.

Aunque a mi me gusta adherirme a los porcentajes, cuando tengas contenido de un tamaño concreto, puede resultar confuso convertirlo a porcentajes (en este ejemplo, las columnas tendrían una anchura de 48.1%, lo que puede confundir). Por este motivo, dado que nuestras dos imágenes tienen una anchura de 260 píxeles, crearemos dos columnas con que también tienen una anchura de 260 píxeles, una celda haciendo de margen entre medias de 20 píxeles. (Esto hace un total de 540 px, que es igual a la anchura de nuestra tabla menos el espacio de relleno a cada lado de 30 px.) Asegúrate de asignar un valor de cero al tamaño de tu fuente (font-size) y a la altura de línea (line-height) y de añadir un carácter de espacio irrompible (&nbsp;) en la celda intermedia. 

También estableceremos la alineación vertical (vertical-align) a top para ambas celdas de manera que se alineen verticalmente en la parte superior, incluso aunque una columna tenga más texto que la otra. La alineación vertical predeterminada es al medio (middle). 

Sustituye 'Row 2' con esta tabla:

Dos columnas para la fila dos

Ahora, añadamos nuestras imágenes y contenido a estas columnas. Los márgenes en las etiquetas <p> son bien soportados entre los clientes de email, así que envolveremos nuestro texto e imágenes entre etiquetas <p> y ajustaremos el espacio entre ellos usando más adelante un margen (margin) cuando añadamos todo nuestro estilo al texto. 

 

Añadamos contenido a las columnas 1 y 2 de manera que toda la tabla tenga ahora el siguiente aspecto:

Aquí hemos establecido la anchura de las imágenes usando de nuevo el atributo HTML width, de la misma manera que hicimos cuando insertamos la imagen de cabecera.

Imágenes en las columnas
Imágenes en las columnas

5. Aplicar estilo al pie de la plantilla de email HTML responsive

Ahora añadiremos nuestro espacio de relleno a la fila del pie.

Aplicar espacio de relleno a la fila del pie del email
Aplicar espacio de relleno a la fila del pie del email
 

Dentro de esa celda, sustituiremos el texto ‘Row 3’ con otra tabla para obtener dos columnas, cada una con una anchura de 50%, estando la izquierda ajustada a align="left" y la derecha aalign="right" de manera que el contenido en cada una de ellas esté alineado a esos lados y no proporcione un diseño de email equilibrado.

Dos columnas en el pie de la plantilla de email
Dos columnas para el pie de la plantilla de email HTML

Sustituye 'Left Column' con un párrafo de texto:

Crearemos otra pequeña tabla para los iconos de nuestras redes sociales, ya que es la mejor forma de obtener el espaciado más preciso que se renderice adecuadamente en cualquier lugar. Sustituye el texto 'Right Column' con la siguiente tabla.

Habrás notado que no estamos especificando una anchura de tabla, y esto es así de manera que la anchura de la tabla esté determinada por las celdas que contiene. Cada una tiene 38 px de anchura (igual que la anchura de nuestros iconos) más 10 píxeles de espacio de relleno a la izquierda.

Tabla para los iconos de redes sociales
Tabla para los iconos de redes sociales

Y aquí lo tenemos, ¡el diseño de nuestra plantilla de email HTML responsive está completado! 

6. Aplicar estilo al texto

Aplicar estilo al texto contenido en nuestra plantilla de email HTML es un paso muy importante. Primero, veamos la fila de contenido superior con nuestro texto h1 introductorio.

Nota importante sobre el uso de las etiquetas de párrafo y de encabezados

Cuando uses etiquetas de párrafo y de encabezados  (p, h1, h2, etcétera) debes especificar tus ajustes de margen superior e inferior, de no hacerlo cada cliente de correo electrónico aplicará sus propios y extremadamente distintos márgenes predeterminados a estos elementos. También tienes que asegurarte de que tus márgenes superior e inferior estén establecidos a cero en el caso de que no desees ninguno de ellos, en ese caso establecerías tu encabezado a margin:0;. Si solo quieres un margen inferior, aun así debes establecer el margen superior a cero, por ejemplo, margin:0 0 10px 0;

Con esto en mente, estableceremos nuestros deseados márgenes en todas nuestras etiquetas, y también queremos establecer el color del texto a #153643, el cual podemos aplicar a la celda, ya que todo lo que esta contiene heredará este color. Después de estos cambios, el total de la celda tendrá el siguiente aspecto:

Habrás notado que arriba también hemos establecido la familia de la fuente (font-family) en cada elemento individual h1 y p, y posiblemente te estés preguntando por qué no podemos simplemente establecer esto en la etiqueta del cuerpo o en la de la tabla. Esto es así porque algunos clientes de correo electrónico sobreescriben tus fuentes si no las estableces en línea en cada elemento de párrafo o de encabezado. Hay otras consideraciones y enfoques a este problema, pero para simplificar y para asegurarnos de que nuestra plantilla de correo electrónico se renderice perfectamente en cualquier sitio en esta fase, las estableceremos en línea en cada elemento.

Ahora, avanzando a nuestra área de dos columnas, añade color a cada una de las celdas de 260px de anchura de manera que ambas tengan el siguiente aspecto:

 

Como arriba, añadiremos algo de estilo al texto y márgenes a nuestros párrafos y enlaces, y estableceremos un tamaño base de fuente a toda la tabla. Con todo esto, la tabla tiene ahora el siguiente aspecto:

 

Por último, aplicaremos estilo al pie. En primer lugar, añadiremos algo de estilo a la fuente de la tabla principal del pie, dentro de nuestra celda roja del pie con un espacio de relleno de 30 px, de manera que ahora se vea así:

 

En la columna izquierda de esta tabla, podemos actualizar nuestro párrafo y enlace para que incluir estilo y color:

Y en nuestros iconos de redes sociales, aplicaremos estilo a los enlaces para que sean blancos, de modo que si las imágenes no se cargan, cualquier texto alt sea visible sobre el fondo rojo. Ajusta cada enlace de manera que tenga el siguiente aspecto:

y

Plantilla de email HTML casi terminada

¡Casi acabada!

¡Y ahí la tenemos! Todo en su sitio.

7. Realiza algunas pruebas

En este punto, es buena idea ejecutar tu código HTML a través de un servicio para realizar pruebas de email como Litmus, o Email on Acid. Dejar todos los bordes en todas las tablas y celdas puede ser útil para ver qué está ocurriendo en cada cliente de correo electrónico. (Dependiendo de cómo estés comprobando tu email, podrías necesitar primero alojar de forma remota tus imágenes, e insertar las URL remotas de cada imagen en tu código. Consulta el sitio web de tu servicio de pruebas para aprender cómo comprobar tu HTML.)

Aquí tienes algunos de los resultados de mi prueba en Email on Acid:

Resultados de las pruebas del HTML de la plantilla de email realizadas en Email on Acid:

Ahora ha llegado el momento de eliminar esos bordes y ver el atractivo diseño de la plantilla de email. En la etiqueta style dentro de head, elimina la siguiente línea:

La plantilla de email sin los bordes
La plantilla de email sin los bordes

¡Y eso es todo!

¡Has creado una sencilla plantilla HTML para email!

Antes de acabar la jornada, si has usado cualquier comentario en tu CSS en la cabecera de tu archivo por cualquier razón, deshazte de ellos. Algunos clientes de email pueden tener conflicto con los comentarios CSS así que es más inteligente no incluirlos.

Ahora es buen momento para hacer una prueba final con Litmus, o Email on Acid, ¡y después tu email HTML estará listo para ser enviado!

Descarga plantillas de email HTML responsive

Si necesitas más opciones, entonces es posible que nuestras plantillas de email HTML responsive sean justo lo que necesitas. Suscríbete a Envato Elements y obtendrás acceso ilimitado a cientos de plantillas de email HTML responsive personalizables, así como fotografías, iconos, y gráficos de stock, y muchos otros recursos digitales para tus proyectos. 

Aprende más sobre cómo crear una plantilla HTML para email

¡Para llevar lo que has aprendido al siguiente nivel! Consulta nuestra guía de aprendizaje Dominar el email HTML para encontrar más tutoriales sobre las plantillas de email HTML, el diseño de emails, la codificación de emails resposive, la accesibilidad, el marketing, el email transaccional, los proveedores de servicios de email (ESPs), consejos para el flujo de trabajo de desarrollo, ¡y mucho más!

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.