Como crear un correo electrónico HTML responsivo simple (2022)

En este tutorial, te mostraré cómo crear un correo electrónico HTML responsive simple que funcionará en todos los programas de correo electrónico, incluidas las aplicaciones móviles y las tablets más problemáticas. Éste correo electrónico utiliza consultas de medios mínimas y un método "híbrido fluido" para garantizar la máxima compatibilidad.

Plantillas correo HTML populares en Envato Elements

Si estás buscando una solución profesional lista para usar, toma una de nuestras populares plantillas de email HTML en Envato Elements. Tenemos cientos de opciones responsivas, todas incluidas con tu suscripción de Elements, con funciones fáciles de personalizar para que puedas comenzar a trabajar.

Como crear un correo electrónico HTML responsivo simple (1)Como crear un correo electrónico HTML responsivo simple (2)Como crear un correo electrónico HTML responsivo simple (3)

¿No es lo que estás buscando? No hay problema, este tutorial te enseñará cómo construir el tuyo.

Lo que construiremos

Este es el email HTML responsive que crearemos. Siéntete libre de copiar este pen y usarlo en tu propio trabajo.

¿Cuál es la mejor manera de hacer que una plantilla email HTML sea responsiva?

El proceso de hacer que un correo electrónico HTML sea responsivo es un poco diferente a hacer que una página web sea responsiva.

Esto se debe a que el nivel de compatibilidad con los estándares HTML y CSS varía mucho entre los servicios y las aplicaciones de correo electrónico. Entonces, si bien podemos confiar en cosas como consultas de medios, flexbox, grid y JavaScript en la web, no siempre son compatibles con el correo electrónico HTML (y JavaScript nunca se puede usar en el correo electrónico porque representaría un riesgo para la seguridad, y como tal es siempre descartado).

Algunas aplicaciones de correo electrónico no admiten consultas de medios CSS, lo que significa que tenemos que pensar detenidamente cómo creamos plantillas de correo electrónico responsivas. Lo más importante en este campo es la aplicación Gmail para Android e iOS, que admite consultas de medios para cuentas de Gmail, pero cuando se usa para leer correos electrónicos de otro servicio (como Yahoo o una cuenta IMAP), las consultas de medios no son compatibles. La aplicación de Yahoo para Android es otro cliente que descarta tus consultas de medios a menos que puedas implementar un truco en el que incluya el encabezado completo de tu documento dos veces, pero tu plataforma de envío puede eliminarlo.

Este tipo de escenarios, junto con el hecho de que Outlook para Windows solo admite un subconjunto de la especificación CSS2.1, significa que puede ser un poco complicado crear un email responsive que se muestre perfectamente en todas partes.

La buena noticia es que puedes diseñar y crear un email simple que se verá excelente en todas las aplicaciones de correo, incluidas aquellas que no admiten consultas de medios, utilizando el método de codificación de correo electrónico híbrido fluido.

¿Por qué "híbrido fluido" es un gran método para crear correos electrónicos responsivos?

El término “híbrido fluido” ha evolucionado naturalmente con el tiempo dentro de la comunidad de desarrollo de correo electrónico. Es un método mediante el cual la capacidad de respuesta del correo electrónico se integra en el diseño en sí, sin necesidad de consultas de medios.

Se le conoce como fluido porque usamos muchos anchos porcentuales (o anchos máximos) para mayor flexibilidad, e híbrido porque los combinamos con anchos de píxeles fijos (o anchos máximos) para controlar el tamaño de nuestros elementos según el espacio disponible. Combinamos todo esto con el uso de tablas fantasmas, que es un marcado de tabla oculto dentro de comentarios condicionales que solo Outlook en Windows representará, otro aspecto que convierte todo el enfoque en un híbrido entre lo antiguo y lo nuevo. A menudo, la combinación exitosa de lo antiguo y lo nuevo para lograr resultados es de lo que se trata el desarrollo del correo electrónico.

Para una mirada más profunda al método, o si deseas crear un diseño más complejo, consulta mi otro tutorial:

  • Crea un Correo Electrónico Responsive Perdurable sin Media QueriesNicole Merlin21 Oct 2021

Usando este método, esto es lo que crearemos hoy:

Como crear un correo electrónico HTML responsivo simple (10)Como crear un correo electrónico HTML responsivo simple (11)Como crear un correo electrónico HTML responsivo simple (12)

Comenzando

Comencemos con nuestro lienzo en blanco.

Si estás comenzando desde cero, toma los archivos de GitHub y crea un nuevo documento HTML en el mismo directorio que la carpeta /images.

Luego, pega lo siguiente en tu documento en blanco:

<!DOCTYPE html><html lang="en" xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="x-apple-disable-message-reformatting"> <title></title> <!--[if mso]> <style> table {border-collapse:collapse;border-spacing:0;border:none;margin:0;} div, td {padding:0;} div {margin:0 !important;} </style> <noscript> <xml> <o:OfficeDocumentSettings> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> </noscript> <![endif]--> <style> table, td, div, h1, p { font-family: Arial, sans-serif; } </style></head><body style="margin:0;padding:0;word-spacing:normal;background-color:#939297;"> <div role="article" aria-roledescription="email" lang="en" style="text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#939297;"> [Scaffold goes here] </div></body></html>

Lo que estamos creando aquí es nuestra página básica con su header, doctype y body. Hay algunas etiquetas meta que ayudan a garantizar que nuestro correo electrónico se muestre correctamente en dispositivos móviles, y algunos restablecimientos de tamaño de CSS y PNG para Microsoft Outlook en Windows ocultos dentro de comentarios condicionales (los bits <!--[if mso]>). También hay un estilo básico con nuestra configuración font-family, principalmente para anular el correo web de Gmail que, de lo contrario, aplica sus propias fuentes a estos elementos.

Finalmente, configuramos nuestro cuerpo, y lo más importante aquí es restablecer el word-spacing, ya que Gmail lo establece en un valor más alto que puede alterar tus diseños (créditos a Mark Robbins). Para una mejor accesibilidad, configuramos un div con un role de article que luego describimos con mayor precisión como el "correo electrónico", el área clave de la página, para que los lectores de pantalla puedan proporcionar un contexto claro y opciones de navegación al usuario.

(Video) Tutorial - Plantilla de Email con HTML y CSS

Para obtener un desglose más detallado de todos los elementos aquí, consulta mi tutorial más extenso: Como crear un correo electrónico preparado para el futuro sin consultas de medios.

Creando el andamio exterior

Ahora reemplacemos el marcador [Scaffold going here] con el siguiente código:

<table role="presentation" style="width:100%;border:none;border-spacing:0;"> <tr> <td align="center" style="padding:0;"> [Ghost Table goes here] </td> </tr></table>

Este andamio es necesario para que nuestro correo electrónico se centre en todos los clientes de correo electrónico. Creamos una tabla de 100% de ancho y luego establecemos el border y el border-spacingen cero. Luego creamos una fila y una celda de tabla sin relleno que tiene align="center" establecido para que su contenido esté centrado.

Nota: los programas agregarán un poco de relleno a tus celdas sin relleno si no las estableces todas en cero, como lo hemos hecho aquí. (Establecer el padding en una celda de tabla es el equivalente al método anterior de establecer el cellpadding en el elemento de la tabla, y el border-spacing establecido en una tabla es el equivalente en CSS del atributo HTML cellspacing en el elemento de la tabla).

También hemos configurado el role de la tabla a presentation. Esto es muy importante para la accesibilidad, ya que garantiza que los lectores de pantalla solo anuncien el contenido de la tabla, en lugar de anunciar también la estructura por defecto, es decir, qué fila o columna se está leyendo actualmente. (Ese comportamiento es útil para datos tabulares reales, pero no cuando se usa una tabla para el diseño).

Creando una tabla fantasma para Outlook en Windows

Antes de agregar nuestro contenedor de contenido principal, debemos configurar una tabla fantasma: una tabla rígida con un ancho fijo que solo se muestra en Outlook porque está oculta dentro de algunos comentarios condicionales especiales solo de Outlook. Necesitamos hacer esto porque nuestro contenedor principal va a usar la propiedad de max-width de CSS y no todas las versiones de Outlook para Windows la admiten. Sin la compatibilidad con el max-width, el contenedor principal se expandiría al ancho completo cuando se viera en Outlook para Windows, por lo que debemos restringirlo.

Reemplaza el marcador [Ghost Table going here] con el siguiente marcado:

<!--[if mso]><table role="presentation" align="center" style="width:600px;"><tr><td><![endif]--> [Container goes here]<!--[if mso]></td></tr></table><![endif]-->

Ten en cuenta que el ancho de píxel se establece usando CSS dentro del atributo de style, y no usándolo como atributo HTML, es decir, width="600". Esto es para garantizar que Outlook calcule correctamente el ancho cuando se ajuste a diferentes configuraciones de DPI en Windows. Si usas el atributo HTML, encontrarás que el ancho de tu correo electrónico se calcula incorrectamente y terminará siendo demasiado estrecho.

Ahora podemos agregar nuestro contenedor de contenido principal, que en realidad será una tabla.

Aparte: ¿Deberías usar tablas o divs para crear un email responsive?

Históricamente, casi todos los correos electrónicos se han desarrollado utilizando tablas, porque esta ha sido la única forma confiable de hacer que las cosas se muestren correctamente en todo, desde Lotus Notes hasta iOS Mail. La preferencia hoy en día es, por supuesto, usar divs y HTML moderno siempre que sea posible: para reducir la cantidad de marcado, mejorar la accesibilidad y, en general, tratar de mover el correo electrónico en una dirección más moderna.

Sin embargo, la continua popularidad de Outlook para Windows significa que aún debemos lograr un equilibrio entre lo antiguo y lo nuevo, ya que Outlook en Windows solo es compatible con la especificación CSS2.1 y, a veces, de una manera bastante irregular. Es por eso que tenemos que usar tablas fantasmas si queremos crear diseños basados en div, como se mencionó anteriormente. Pero un problema con este enfoque es que debes duplicar gran parte de tu CSS, ya que Outlook en Windows ignora o agrega de manera poco confiable una gran cantidad de estilo aplicado a los divs, por lo que también debes aplicar gran parte de tu estilo por separado a la tabla fantasma.

A veces, esta duplicación no importa, particularmente con diseños complejos, ya que ahorras mucho código (y complejidad) al usar divs en lugar de tablas, por lo que el marcado adicional no es una gran preocupación. Además, tu CSS específico de Outlook puede vivir en el encabezado del correo electrónico, dentro de los comentarios condicionales, por lo que no es necesario aplicar tus estilos entre línea.

Sin embargo, al crear un email simple de una columna, a veces me parece excesivo (para mí) crear y diseñar todos los divs y luego tener que envolverlo todo en una tabla fantasma, donde también debes agregar el relleno, los márgenes y diseñar nuevamente las diferentes tablas o celdas, todo esto, cuando una sola tabla habría funcionado para absolutamente todos los clientes. Puede que no sea súper moderno, pero ahorra bastante en el tamaño del archivo, que después de todo es un factor muy importante cuando se trata de correo electrónico que, en principio, no creo que valga la pena sacrificar. También hace que el correo electrónico sea más fácil de depurar y mantener.

Por lo tanto, como esta plantilla email HTML es bastante simple, con el fin de simplificar y para ahorrar en el tamaño del archivo, sigo usando una sola tabla que contiene todo el contenido y el estilo para cada cliente. Pero es solo eso: una sola tabla. Todo el diseño solo usa dos tablas y una tabla fantasma, y tengo mucho cuidado de asegurarme de que todas estén configuradas en role="presentation" para garantizar que sean accesibles. Sin embargo, si tuviera que incluir más de dos o tres tablas, estaría empezando a replantearme las cosas.

Con eso fuera del camino, sigamos adelante y agreguemos la tabla en cuestión para crear nuestro contenedor principal.

Agregar nuestro contenedor de contenido principal

Reemplaza el marcador [Container goes here] con el siguiente:

<table role="presentation" style="width:94%;max-width:600px;border:none;border-spacing:0;text-align:left;font-family:Arial,sans-serif;font-size:16px;line-height:22px;color:#363636;"> [Rows go here]</table>

Aquí estamos utilizando el primer principio importante del método híbrido fluido: crear un contenedor que tenga un ancho de porcentaje fluido pero limitado a un ancho máximo fijo en píxeles.

Aquí puedes ver que el nuestro está configurado para tener un 94 % de ancho en pantallas pequeñas, hasta que haya suficiente espacio para que la tabla alcance su max-width de 600 px de ancho. Puedes jugar con ambos anchos, por ejemplo, si configuras el width al 100%, no habrá "relleno" en los lados cuando se vea en una pantalla pequeña.

(Video) How to Create HTML Email in Gmail

Debido a que esta tabla va a contener todo nuestro contenido, he agregado CSS para el estilo del texto que heredarán las celdas y los párrafos dentro de la tabla. (La única excepción a esto es Comcast y Libero, dos clientes de correo web que establecen un estilo de texto predeterminado en el nivel de encabezado y párrafo. Aquí usamos tipos de letra bastante neutrales, por lo que no se nota en este diseño, pero si usas una fuente web o un tipo de letra más distintivo, deberás configurar tu estilo de fuente en las etiquetas de encabezado y párrafo para estos clientes).

Ahora agreguemos nuestra primera fila de contenido.

Agregando un encabezado con una imagen de logotipo

Reemplazando el marcador [Rows go here], agrega el siguiente marcado de fila de tabla:

<tr> <td style="padding:40px 30px 30px 30px;text-align:center;font-size:24px;font-weight:bold;"> <a href="http://www.example.com/" style="text-decoration:none;"><img src="images/logo.png" alt="Logo"></a> </td></tr>

Aquí tenemos nuestra celda con algo de relleno, y adentro hay un logo envuelto en un enlace. En la celda, también configuré la alineación, el tamaño y el peso del texto, de modo que nuestro texto ALT se vea bien si las personas tienen las imágenes desactivadas o no se cargan.

Configurando nuestra imagen de logotipo

Queremos que la imagen del logotipo tenga un ancho de 165 px, pero también para asegurarnos de que nunca ocupe demasiado de la pantalla en móviles más pequeños.

Aquí quiero que tenga un máximo del 80 % de ancho en pantallas pequeñas hasta el punto en que alcance un máximo de 165 px en pantallas más grandes. Para implementar todo esto, podemos reemplazar la etiqueta img por esta:

<img src="images/logo.png" width="165" alt="Logo" style="width:165px;max-width:80%;height:auto;border:none;text-decoration:none;color:#ffffff;">

El width="165" es muy importante para Outlook en Windows. Para todos los demás clientes, en nuestro atributo de estilo, lo configuramos para que tenga 165 px de ancho con un max-width del 80 % y la altura configurada en automático para que la imagen conserve su relación de aspecto. También he incluido algunos estilos para evitar que el texto ALT vinculado se muestre en azul con un subrayado.

¡Y allá vamos! Nuestro logotipo está listo, y si cambias el tamaño de tu ventana, verás que fluye entre el 80 % de ancho y 165 px, el que sea más pequeño.

(Puedes notar que en las imágenes estamos configurando un ancho de píxel y un ancho máximo de porcentaje, que es lo opuesto a lo que aplicamos a nuestras tablas y divs: obtienen un ancho porcentual y un ancho máximo de píxel. He hecho este ajuste porque a mediados de 2021, las aplicaciones de Outlook para iOS y Android dejaron de admitir anchos máximos de píxeles en las etiquetas img).

Creando un encabezado con texto

Ahora podemos insertar nuestra primera fila de contenido, que tiene un encabezado y un texto introductorio. Después del cierre </tr> desde arriba, podemos insertar una nueva fila:

<tr> <td style="padding:30px;background-color:#ffffff;"> <h1 style="margin-top:0;margin-bottom:16px;font-size:26px;line-height:32px;font-weight:bold;letter-spacing:-0.02em;">Welcome to our responsive email!</h1> <p style="margin:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, <a href="http://www.example.com/" style="color:#e50d70;text-decoration:underline;">eget accumsan dictum</a>, nisi libero ultricies ipsum, in posuere mauris neque at erat.</p> </td></tr>

Este es un módulo bastante simple: aquí acabamos de configurar los estilos de nuestra celda y agregamos un encabezado y un párrafo que contiene un enlace. También hemos agregado algunos estilos a nuestras etiquetas h1 y p para que podamos personalizar sus márgenes y ajustar la apariencia del encabezado.

Agregando una imagen de ancho completo

Este es un asunto simple, porque la imagen será 100% ancha. Solo necesitamos configurar el width="600" para Outlook en Windows para asegurarnos de que no se muestre en su tamaño nativo allí.

Simplemente podemos agregar lo siguiente después de </tr> arriba:

<tr> <td style="padding:0;font-size:24px;line-height:28px;font-weight:bold;"> <a href="http://www.example.com/" style="text-decoration:none;"><img src="images/1200x800-2.png" width="600" alt="" style="width:100%;height:auto;display:block;border:none;text-decoration:none;color:#363636;"></a> </td></tr>

Agregando una sección de dos columnas que se apila en dispositivos móviles

Para agregar este diseño, inserta una nueva fila después del cierre </tr>anterior:

<tr> <td style="padding:35px 30px 11px 30px;font-size:0;background-color:#ffffff;border-bottom:1px solid #f0f0f5;border-color:rgba(201,201,207,.35);"> [Multiple columns go here] </td></tr>

Puedes ver que estamos configurando el font-size en cero en esta celda. Esto se debe a que vamos a colocar dos divs de inline-block uno al lado del otro dentro de esta celda, y si hay un tamaño de fuente mayor que cero, puede aparecer un espacio que hace que se apilen.

También agregué un borde inferior de 1px en esta fila. Agregué un borde alternativo de un sólido #f0f0f5, pero luego, como mejora, especifico un color RGBA que usará algo de transparencia: rgba(201,201,207,.35). Este es solo un pequeño truco para ayudar a mejorar la apariencia del correo electrónico cuando se ve en modo oscuro. Outlook.com en particular no ajusta el border-color en el modo oscuro, por lo que puedes quedarte con un correo electrónico generalmente oscuro con bordes realmente brillantes. Sin embargo, respetará la transparencia dentro de nuestra configuración RGBA, por lo que el tono semitransparente se colocará sobre el fondo ajustado, lo que resultará en menos conflicto. Cualquier cliente que no respete RGBA simplemente volverá al color hexadecimal.

Configurando de nuestros anchos de columna

Quiero una columna a la izquierda de 145 px y una columna a la derecha de 395 px. Las columnas híbridas fluidas funcionan de manera similar a la envoltura exterior. Están configuradas para ser fluidas (aquí, 100% de ancho) hasta un max-width de píxel fijo, y en su max-width deberían sentarse cómodamente una al lado de la otra, brindándonos un diseño de varias columnas en pantallas más grandes.

Como crear un correo electrónico HTML responsivo simple (13)Como crear un correo electrónico HTML responsivo simple (14)Como crear un correo electrónico HTML responsivo simple (15)

Tan pronto como no haya suficiente espacio para que las columnas se unan una al lado de la otra, aún se apilan una encima de la otra, y a medida que el tamaño de la pantalla se vuelve más pequeño que el ancho máximo de la columna, se mantienen fluidas al 100 % del ancho. De esta manera, tenemos un conjunto de columnas con capacidad de respuesta incorporada, lo que significa que no dependemos de las consultas de medios para realizar estas transformaciones por nosotros. Podemos aplicar consultas de medios además de este comportamiento para ajustarlo aún más en los clientes que lo admiten.

(Video) The RIGHT WAY to Build HTML Email Templates 2022

Al igual que con nuestro contenedor externo, necesitamos usar una tabla fantasma para Outlook en Windows, porque no es compatible con el CSS que necesitamos para lograrlo. Entonces, necesitamos configurar una tabla fantasma de dos columnas para Outlook en Windows.

Reemplaza el marcador [Multiple columns go here] con el siguiente:

<!--[if mso]><table role="presentation" width="100%"><tr><td style="width:145px;" align="left" valign="top"><![endif]--> <div class="col-sml" style="display:inline-block;width:100%;max-width:145px;vertical-align:top;text-align:left;"> [Left column content] </div><!--[if mso]></td><td style="width:395px;padding-bottom:20px;" valign="top"><![endif]--> <div class="col-lge" style="display:inline-block;width:100%;max-width:395px;vertical-align:top;padding-bottom:20px;"> [Right column content] </div><!--[if mso]></td></tr></table><![endif]-->

Como se mencionó en el aparte anterior, puedes ver cómo este método requiere algo de duplicación. Tenemos la primera columna en nuestra tabla fantasma, donde configuré el ancho, la alineación del texto a la izquierda y la alineación vertical hacia arriba, todo hecho usando una combinación de HTML y CSS. Luego, el div interno, div.col-sml, vuelve a tener la misma configuración, esta vez en el CSS.

En la columna derecha div, div.col-lge, sigue una configuración similar, y también puedes ver que tenemos que duplicar el relleno. Outlook en Windows no aplica el relleno a los divs de manera confiable (y por esta razón lo deshabilito por completo configurando padding:0; en todos los divs en el bloque condicional <style> para Outlook en el encabezado de nuestro documento). Por lo tanto, debemos agregar el mismo relleno tanto al div como a la celda contenedora en la tabla fantasma. Outlook no aplicará el relleno div, y otros clientes obviamente ignoran el código exclusivo de Outlook. Sin embargo, a pesar de todo esto, esta es una forma extremadamente estable y confiable para crear este tipo de diseño, y podemos estar seguros de que las cosas se renderizarán perfectamente en todas partes.

Finalmente, el ingrediente crucial en los divs es display:inline-block, que garantizará que las columnas floten una al lado de la otra, y como divs inline-block, obedecerán la propiedad text-align en su contenedor. Recordarás que configuramos text-align:left; en toda esta tabla, por lo que estos divs se pegarán a la izquierda cuando se apilen.

¡Ahora nuestra estructura de dos columnas está lista! Es hora de algunos ajustes estéticos y de agregar nuestro contenido.

Agregando estilo de fuente

Necesitamos volver a agregar un poco de estilo de fuente a nuestros divs, ya que no lo heredan de manera confiable en todos los clientes de correo, además, redujimos nuestro tamaño de fuente a cero un par de niveles más. Así que agreguemos esto al atributo de estilo de div.col-sml:

font-family:Arial,sans-serif;font-size:14px;color:#363636;

Del mismo modo, agrega esto al atributo de estilo de div.col-lge:

font-family:Arial,sans-serif;font-size:16px;line-height:22px;color:#363636;

Ahora, dentro de div.col-sml, agregaremos una imagen híbrida fluida, configurada de manera muy similar a nuestro logotipo de encabezado. Reemplaza [Left column content] con esto:

<img src="images/icon.png" width="115" alt="" style="width:115px;max-width:80%;margin-bottom:20px;">

Y dentro de div.col-lge agregaremos algo de texto y un enlace que sigue la plantilla de Mark Robbin para enlaces con estilo de botones. Reemplaza [Right column content] con esto:

<p style="margin-top:0;margin-bottom:12px;">Nullam mollis sapien vel cursus fermentum. Integer porttitor augue id ligula facilisis pharetra. In eu ex et elit ultricies ornare nec ac ex. Mauris sapien massa, placerat non venenatis et, tincidunt eget leo.</p><p style="margin-top:0;margin-bottom:18px;">Nam non ante risus. Vestibulum vitae eleifend nisl, quis vehicula justo. Integer viverra efficitur pharetra. Nullam eget erat nibh.</p><p style="margin:0;"><a href="https://example.com/" style="background: #ff3884; text-decoration: none; padding: 10px 25px; color: #ffffff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ff3884"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt">&nbsp;</i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%">&nbsp;</i><![endif]--></a></p>

Toda la fila se une así:

<tr> <td style="padding:35px 30px 11px 30px;font-size:0;background-color:#ffffff;border-bottom:1px solid #f0f0f5;border-color:rgba(201,201,207,.35);"> <!--[if mso]> <table role="presentation" width="100%"> <tr> <td style="width:145px;" align="left" valign="top"> <![endif]--> <div class="col-sml" style="display:inline-block;width:100%;max-width:145px;vertical-align:top;text-align:left;font-family:Arial,sans-serif;font-size:14px;color:#363636;"> <img src="images/icon.png" width="115" alt="" style="width:115px;max-width:80%;margin-bottom:20px;"> </div> <!--[if mso]> </td> <td style="width:395px;padding-bottom:20px;" valign="top"> <![endif]--> <div class="col-lge" style="display:inline-block;width:100%;max-width:395px;vertical-align:top;padding-bottom:20px;font-family:Arial,sans-serif;font-size:16px;line-height:22px;color:#363636;"> <p style="margin-top:0;margin-bottom:12px;">Nullam mollis sapien vel cursus fermentum. Integer porttitor augue id ligula facilisis pharetra. In eu ex et elit ultricies ornare nec ac ex. Mauris sapien massa, placerat non venenatis et, tincidunt eget leo.</p> <p style="margin-top:0;margin-bottom:18px;">Nam non ante risus. Vestibulum vitae eleifend nisl, quis vehicula justo. Integer viverra efficitur pharetra. Nullam eget erat nibh.</p> <p style="margin:0;"><a href="https://example.com/" style="background: #ff3884; text-decoration: none; padding: 10px 25px; color: #ffffff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ff3884"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt">&nbsp;</i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%">&nbsp;</i><![endif]--></a></p> </div> <!--[if mso]> </td> </tr> </table> <![endif]--> </td></tr>

¡Y ahí lo tienes! Si actualizas y luego cambias el tamaño de tu navegador, verás que nuestras columnas ahora se apilan cuando el espacio disponible se vuelve demasiado pequeño y vuelven a sentarse una al lado de la otra cuando hay suficiente espacio.

Agregando una imagen de ancho completo y texto con relleno

Esto es básicamente idéntico a nuestros módulos anteriores de imagen y texto de ancho completo, excepto que hay un borde debajo de la imagen y un relleno generoso. Dado que estamos usando un relleno de 30 px, desde un diseño de 600 px de ancho, eso nos deja 540 px para la imagen.

Todo este bloque puede sentarse después del cierre </tr> anterior :

<tr> <td style="padding:30px;font-size:24px;line-height:28px;font-weight:bold;background-color:#ffffff;border-bottom:1px solid #f0f0f5;border-color:rgba(201,201,207,.35);"> <a href="http://www.example.com/" style="text-decoration:none;"><img src="images/1200x800-1.png" width="540" alt="" style="width:100%;height:auto;border:none;text-decoration:none;color:#363636;"></a> </td></tr><tr> <td style="padding:30px;background-color:#ffffff;"> <p style="margin:0;">Duis sit amet accumsan nibh, varius tincidunt lectus. Quisque commodo, nulla ac feugiat cursus, arcu orci condimentum tellus, vel placerat libero sapien et libero. Suspendisse auctor vel orci nec finibus.</p> </td></tr>

Creando el pie de página

Agrega una nueva fila después del anterior </tr>:

<tr> <td style="padding:30px;text-align:center;font-size:12px;background-color:#404040;color:#cccccc;"> [Footer content goes here] </td></tr>

Esto configura un color de fondo oscuro, así como la alineación del texto y un tamaño de fuente base que heredarán nuestras imágenes para su texto ALT.

A continuación, agregaremos nuestros dos íconos sociales. Estos solo se agregarán dentro de una etiqueta de párrafo, con un espacio simple entre ellos. Configuraremos nuestras imágenes a display:inline-block para asegurarnos de que obedezcan nuestra configuración de alineación de texto centrado.

Podemos reemplazar el marcador [Footer content goes here] con nuestro párrafo que contiene los íconos:

(Video) 👉🏼 Como CREAR FORMULARIO de CONTACTO (FUNCIONAL) HTML y CSS

<p style="margin:0 0 8px 0;"><a href="http://www.facebook.com/" style="text-decoration:none;"><img src="images/facebook.png" width="40" height="40" alt="f" style="display:inline-block;color:#cccccc;"></a> <a href="http://www.twitter.com/" style="text-decoration:none;"><img src="images/twitter.png" width="40" height="40" alt="t" style="display:inline-block;color:#cccccc;"></a></p>

Debajo de esto, agrega otro párrafo con información de derechos de autor y un enlace para cancelar la suscripción. Agregaremos la clase unsub a la etiqueta a para que podamos mejorarla un poco más tarde:

<p style="margin:0;font-size:14px;line-height:20px;">&reg; Someone, Somewhere 2021<br><a class="unsub" href="http://www.example.com/" style="color:#cccccc;text-decoration:underline;">Unsubscribe instantly</a></p>

Nuestro diseño está listo

Esa es nuestra fila final, ¡así que el diseño ahora está completo! Si vas a la vista previa en tu navegador, todo debería verse genial.

En este punto, podemos agregar algunas consultas de medios para mejorar la forma en que nuestro correo electrónico se muestra en dispositivos más pequeños que lo admitan. Como todavía estamos mirando el pie de página, comenzaremos con el botón para cancelar la suscripción mencionado anteriormente.

Optimizando botones para móviles

Convertiremos nuestro enlace de pie de página en un bonito botón grande en dispositivos más pequeños, ya que esto hará que sea más fácil tocar con un dedo.

Si volvemos al <head> del documento, podemos insertar el siguiente código dentro de nuestro bloque <style> debajo de nuestra regla de fuente:

@media screen and (max-width: 530px) { .unsub { display: block; padding: 8px; margin-top: 14px; border-radius: 6px; background-color: #555555; text-decoration: none !important; font-weight: bold; }}

Esta consulta de medios cambiará la apariencia de nuestro botón en pantallas que tienen menos de 530 px de ancho.

Ahora, si actualizas y haces que tu pantalla sea más pequeña, verás que el enlace se convierte en un botón que se puede tocar muy bien.:

Como crear un correo electrónico HTML responsivo simple (16)Como crear un correo electrónico HTML responsivo simple (17)Como crear un correo electrónico HTML responsivo simple (18)

Más mejoras con consultas de medios

Ahora también podemos agregar algunas otras mejoras a nuestro diseño. Por el momento, cuando se ven en pantallas más pequeñas, nuestras dos columnas se apilan una encima de la otra, pero en algunos tamaños, la columna de texto es mucho más estrecha que la pantalla. Dado que la mayoría de las aplicaciones admiten consultas de medios, tenemos buenas posibilidades de mejorar su apariencia en muchos lugares. Dentro de la misma consulta de medios que la anterior, @media screen and (max-width:530px), después del cierre } del bloque de declaración .unsub, podemos agregar

.col-lge { max-width: 100% !important;}

Esto anulará el max-width por defecto de 395 px y garantizará que el texto abarque todo el ancho en todos los tamaños de pantalla hasta 530 px de ancho.

Otra cosa que podemos ajustar es el hecho de que las columnas se apilan inmediatamente una vez que no hay suficiente espacio para que se sienten juntas. En realidad, puede haber algunos casos en los que la pantalla de un usuario sea un poco más pequeña que 600 px de ancho, tal vez en una aplicación de tablet con una barra lateral gruesa o porque está usando el correo web de Gmail con un panel de vista previa estrecho habilitado. En estos casos, es posible que deseemos asegurarnos de que se muestre el diseño de dos columnas, por lo que podemos configurar esto con nuestro CSS.

Después del cierre } de la consulta de medios anterior, agrega una segunda:

@media screen and (min-width: 531px) { .col-sml { max-width: 27% !important; } .col-lge { max-width: 73% !important; }}

Este continúa donde lo dejó el anterior: subió a un máximo de 530 px, luego de 531 px en adelante nos aseguraremos de que las columnas siempre aparezcan una al lado de la otra anulando nuestros anchos máximos de píxeles y en su lugar especificando porcentajes.

¡Así que ahí lo tenemos! En conjunto, tu etiqueta <style> debería verse así:

<style> table, td, div, h1, p { font-family: Arial, sans-serif; } @media screen and (max-width: 530px) { .unsub { display: block; padding: 8px; margin-top: 14px; border-radius: 6px; background-color: #555555; text-decoration: none !important; font-weight: bold; } .col-lge { max-width: 100% !important; } } @media screen and (min-width: 531px) { .col-sml { max-width: 27% !important; } .col-lge { max-width: 73% !important; } }</style>

Si hay algo más que desees modificar con consultas de medios, ¡adelante, hazlo aquí!

¡Prueba y listo!

Por último, como siempre, asegúrate de realizar una buena prueba con dispositivos en vivo y un servicio de vista previa web como Litmus o Email on Acid.

¡Disfruta creando plantillas de email responsive que se vean geniales en todos los clientes de correo electrónico!

Descarga plantillas correo HTML

Si necesitas más opciones, entonces una de nuestras plantillas de email responsive puede ser justo lo que necesitas. Suscríbete a Envato Elements y obtendrás acceso ilimitado a cientos de plantillas correo HTML personalizables, así como fotografías de stock, íconos, gráficos y muchos otros recursos creativos para tus proyectos.

  • 13 geniales plantillas Campaign Monitor para emails y boletinesBrittany Jezouit14 May 2019
  • Las Mejores Plantillas de Mailchimp para Newsletter de Empresa (2022) Brad Smith24 May 2022
  • Domina MailChimp: plantillas MailChimp y tips para newslettersBrittany Jezouit10 Sep 2018

Más tutoriales de email HTML

¡Para llevar lo que has aprendido al siguiente nivel! Consulta nuestra guía de aprendizaje sobre cómo dominar el email HTML para obtener más tutoriales sobre plantillas correo HTML, diseño de correo electrónico, codificación de correo electrónico receptivo, accesibilidad, marketing, correo electrónico transaccional, proveedores de servicios de correo electrónico (ESP), sugerencias de flujo de trabajo de desarrollo y más.

(Video) CÓMO CREAR FORMULARIOS EN HTML QUE ME ENVÍE UN MAIL | HACER FORMULARIOS EN HTML FÁCIL AVANZADOS

  • Lo Que Usted Debería Saber Acerca del Correo Electrónico HTMLNicole Merlin10 Jun 2013
  • La guía completa para diseñar por correo electrónicoNicole Merlin13 Dec 2013
  • Guía de Principiante al Correo Accesibilidad (Checklist + Recursos)Stig Morten Myre11 Sep 2018
  • Crea un Correo Electrónico Responsive Perdurable sin Media QueriesNicole Merlin21 Oct 2021

FAQs

¿Cómo hacer un template en HTML? ›

Crear una página HTML a partir de una plantilla
  1. Elige Archivo > Nuevo.
  2. En el cuadro de diálogo Crear un nuevo documento o plantilla selecciona la opción Un nuevo documento basado en una plantilla.
  3. Pulsa el botón Elegir archivo … y elige la plantilla anteriormente creada.
  4. Clic en el botón Crear.

¿Cómo enviar una imagen HTML por correo? ›

Consiste en poner una etiqueta <IMG> en el código HTML de tus correos. Estas imágenes deben estar alojadas en un servidor de correo público de forma que cuando las personas reciben el correo puedan descargarse las imágenes.

¿Cómo enviar un correo con diseño? ›

En la computadora, ve a Gmail. En la esquina superior izquierda, haz clic en Redactar . En la parte inferior de la ventana, haz clic en Diseños . Si nunca usaste los diseños, haz clic en Personalizar estilo.

¿Cómo enviar correos electronicos desde angular? ›

Todo lo que tiene que hacer es publicar una solicitud Http desde su aplicación angular) y este servicio se encarga del resto.
  1. cree una cuenta en formspree.io.
  2. haga clic en el botón "+ Nuevo formulario"
  3. ingrese un correo electrónico que desea recibir.

¿Cómo crear un correo HTML en Gmail? ›

Como insertar HTML crudo en correos Gmail
  1. Contratar un servicio profesional como Mailchimp.
  2. Usar un cliente de Gmail que permita el envío de HTML crudo.
  3. Copiar HTML y pegarlo en el editor de Gmail.
  4. Usar la extensión de Chrome Gorgias.
  5. Posiblemente otras que no conozco.
Feb 24, 2016

¿Cómo hacer un correo HTML en Outlook? ›

Enviar un correo con HTML desde MS Outlook

2) Hacemos clic en [Insertar/Archivo adjunto] y seleccionamos el archivo que contenga el código HTML que queremos insertar. 3) Haremos ahora clic en menú desplegable del botón [Insertar] y seleccionaremos la opción [Insertar como texto]. Por último, haremos clic en [Enviar].

¿Qué es un template en HTML? ›

El elemento HTML <template> es un mecanismo para mantener el contenido HTML del lado del cliente que no se renderiza cuando se carga una página, pero que posteriormente puede ser instanciado durante el tiempo de ejecución empleando JavaScript.

¿Cómo usar templates HTML? ›

La etiqueta <template> es esencialmente un elemento clonable del DOM para ser reutilizado en tu sitio o aplicación web. Para crear un template simplemente escribes HTML común y lo colocas dentro de la etiqueta <template>.

¿Cómo se comparte un archivo HTML? ›

Cuando publicas un archivo en la Web, creas una copia de él como página web única con su propia URL.
  1. En Google Drive, abre tu archivo.
  2. En Documentos, Hojas de cálculo, Presentaciones, selecciona Archivo. ...
  3. Haz clic en Publicar.
  4. Copia el enlace y envíalo a las personas con las que quieras compartir el archivo.

¿Cómo puedo compartir un archivo HTML? ›

Paso a paso
  1. Elige una URL o una página. Elige la URL del sitio web o la página de Facebook que deseas compartir.
  2. Configurador de código. Pega la URL en el configurador de código y ajusta el valor layout del botón "Compartir". ...
  3. Copia y pega el fragmento de código HTML.

¿Cómo insertar una imagen en un código HTML? ›

Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este elemento puede ir acompañado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGHT BORDER VSPACE HSPACE.

¿Cómo insertar HTML en Outlook 365? ›

Cargue un archivo HTML en Outlook 365

2. Haga clic con el botón derecho en el área de la barra de herramientas y seleccione "Personalizar la cinta". 3. Seleccione" Adjuntar archivo "y luego haga clic en el botón Agregar para que se pueda agregar a su barra de herramientas.

¿Cómo ver el HTML en Outlook? ›

Aunque haya establecido la visualización de los mensajes como texto sin formato, Outlook ofrece la posibilidad de mostrar un mensaje en formato HTML: tras abrir el mensaje, haga clic en la barra de información y luego en la opción Mostrar como HTML; la opción Seguridad de correo electrónico abre el cuadro de diálogo ...

¿Cómo insertar una página web en Outlook? ›

En Outlook 2007, haga clic en Vea > Barra de herramientas > Diseño Web para mostrar Buscar en la Web campo. Ver captura de pantalla: 3. Luego, pegue el vínculo de la página web en el Buscar en la Web campo y presione Enviar tecla en el teclado.

¿Qué es un template ejemplo? ›

Por ejemplo, una plantilla puede ser definida con toda la estructura de la fila de una tabla ( table ), pero sin el contenido de cada celda. Un programa puede más tarde tomar esta plantilla, clonarla y rellenar las celdas con información recuperada de una base de datos.

¿Qué es y para qué sirve un template? ›

Es un medio o aparato o sistema, que permite guiar, portar, o construir, un diseño o esquema predefinido.

¿Qué es un template en programación? ›

Una plantilla es una manera especial de escribir funciones y clases para que estas puedan ser usadas con cualquier tipo de dato, similar a la sobrecarga, en el caso de las funciones, pero evitando el trabajo de escribir cada versión de la función.

¿Cómo enviar un archivo en HTML? ›

Procedimiento
  1. Abra este archivo HTML en un navegador web.
  2. Escriba un nombre de archivo en el campo Archivo o pulse Examinar para navegar hasta el archivo.
  3. Pulse Subir para someter la solicitud de carga.

¿Qué es usar Gmail en HTML? ›

Puedes ver Gmail en el navegador en la "Vista estándar" o en la "Vista básica en HTML".
...
Cuando estés en la vista básica en HTML no verás algunas de las funciones de Gmail, tales como:
  1. Chat.
  2. Corrector ortográfico.
  3. Combinaciones de teclas.
  4. Creación o importación de contactos.
  5. Direcciones "De" personalizadas.
  6. Texto con formato.

¿Cómo cambiar el modo de Gmail? ›

Cómo buscar parámetros de configuración y hacer cambios
  1. En la computadora, ve a Gmail.
  2. En la esquina superior derecha, haz clic en Configuración. ...
  3. En la parte superior, elige una página de configuración, como General, Etiquetas o Recibidos.
  4. Realiza tus cambios.

¿Cómo cambiar la versión de Gmail? ›

Para actualizar Gmail solo hay que ir a la rueda de configuración y seleccionar la opción “Prueba la nueva versión de Gmail”. El siguiente paso es elegir entre la visualización predeterminada, la normal o la compacta.

¿Cómo entrar a mi cuenta de Gmail? ›

Cómo acceder
  1. En la computadora, ve a Gmail.
  2. Ingresa el correo electrónico (o número de teléfono) y la contraseña de tu Cuenta de Google. Si ya se completó la información y debes acceder a otra cuenta, haz clic en Usar otra cuenta.

Videos

1. How To Send Email from HTML Contact Form Without Any Backend Language
(EGATOR)
2. HTML Email [No Coding] Beefree.io Tutorial | HTML Email Template
(Sam Dey - DeyTips)
3. Create an HTML email in minutes
(Email and Landing Page Design with BEE)
4. 4 formas de enviar correo desde formulario HTML
(lasfito)
5. Como enviar un correo con PHP | En 20 minutos ( Facil y sencillo )
(CodyTron)
6. Formulario de contacto responsive con HTML y CSS
(J&G Proyectos Web)

You might also like

Latest Posts

Article information

Author: Amb. Frankie Simonis

Last Updated: 07/21/2022

Views: 5577

Rating: 4.6 / 5 (56 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Amb. Frankie Simonis

Birthday: 1998-02-19

Address: 64841 Delmar Isle, North Wiley, OR 74073

Phone: +17844167847676

Job: Forward IT Agent

Hobby: LARPing, Kitesurfing, Sewing, Digital arts, Sand art, Gardening, Dance

Introduction: My name is Amb. Frankie Simonis, I am a hilarious, enchanting, energetic, cooperative, innocent, cute, joyous person who loves writing and wants to share my knowledge and understanding with you.