Crea un Correo Electrónico Responsive Perdurable sin Media Queries

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Al usar este método puedes crear un email responsive integrado en el diseño, sin necesidad de CSS o media queries en el <head>, así incluso en el peor de los casos al renderizar tu correo electrónico, tu diseño permanecerá intacto.

¿Desarrollar un Correo HTML aún es Difícil?

HTML ha avanzado mucho en los últimos diez años (sí, ¡era aún peor!) pero aún hay un sorprendente número de cosas que pueden salir mal cuando programas email responsive para la bandeja de entrada.

Hoy en día la mayoría de las aplicaciones para crear correos hacen un buen trabajo al apegarse a los últimos estándares HTML y CSS, pero la seguridad y otras restricciones a veces significan que los servicios se ajustarán o eliminarán partes clave del código , como el importantísimo <head>, que a menudo contiene CSS y media queries fundamentales. Es difícil realizar un seguimiento de todos los casos donde ocurren este tipo de cosas, y mucho menos de lo que tienes que hacer para mitigar los efectos en cada escenario.

Pero, ¿qué pasaría si puedes crear una plantilla email HTML que fuera responsive, aún en entornos sin soporte para CCSS moderno como media queries, o escenarios donde solo se entrega el <body> de tu correo? ¿Qué pasaría si, cada vez que te enteraras de una nueva aplicación para aprender cómo crear un email que todos estén probando, en lugar de temblar de miedo, te sintieras seguro sabiendo que tu email responsive probablemente se vean bien?

En este tutorial se trata de crear una gran experiencia para clientes de correo electrónico que no tengan CSS instalado o soporte para media query de ningún tipo, usando el método híbrido fluido para el desarrollo de email HTML. La parte fluida se refiere al hecho de que usamos muchos porcentajes y elementos que podemos mover y expandir para ajustarse al espacio otorgado.La parte híbrida es porque también usamos max-width para restringir estos elementos que fluyen libremente, y restringir el tamaño general de nuestro correo electrónico en tamaños de pantalla más grandes.

Considerando todo esto, este es un email responsive y liviano sin media queries que viene en un ordenado archivo de 17kb.

Plantillas Email HTML Populares en Envato Elements para Crear Correo

Si buscas una solución prefabricada y profesional, obtén una plantilla email HTML mejor vendidas en Envato Market. Contamos con cientos de opciones email responsive desde tan solo $5 dólares, con funciones fáciles de personalizar para ayudarte a comenzar.

best-selling HTML email templates on Envato Market — Las plantillas para crear correo mejor vendidas en Envato Market

¿No es lo que estás buscando? No hay problema, en este tutorial te mostraremos cómo crear un email.

La Plantilla Email que Construiremos

Aquí está una demostración en CodePen para mostrarte email HTML responsive que vamos a construir. ¡Siéntete con la libertad de ir en tu propia dirección y usarlo en tus proyectos!

Todos los elementos gráficos en la plantilla email son parte de la colección Personajes de Personajes Planos de alexdndz disponible en Envato Elements.

5 Problemas Importantes que Buscamos Resolver

1. La aplicación de Gmail aún no es compatible con la etiqueta `<style>`para cuentas que no son de Gmail

Este quizá sea lo más complicado. La aplicación de Gmail es muy popular en iOS y Android, puede ser configurada como aplicación de correo predeterminada en cualquier teléfono inteligente y es compatible con todas las cuentas que no sean de Gmail. Vistos en la aplicación Gmail, los correos electrónicos para cuentas que no son de Gmail no son compatibles con las etiquetas <style>, por lo que los media queries en los que usualmente podemos confiar para optimizar nuestros emails para pantallas, no son compatibles. En este tutorial te mostraremos cómo crear un email responsive, incluso en este escenario.

2. Es difícil mantenerse al día con los servicios de email y su nivel de soporte con CSS

Nuevos proveedores y aplicaciones aparecen todo el tiempo. Algunos de ellos cuentan con una gran compatibilidad con CSS y media query, pero otros de ellos se enfocan más en los flujos de trabajo del email y no son para nada compatibles con las <style> tags o media queries. Algunas de ellas difieren entre plataformas. Por ejemplo, la aplicación de correo de Yahoo para iOS es compatible con <style> en el encabezado, mientras que en Android no es así, a menos que incluyas tu <head> por completo dos veces, lo cual no es posible en todas las plataformas de envío.

Este tutorial te mostrará cómo crear un email que siempre sea responsive, aún en los peores escenarios donde no hay compatibilidad con CSS, así no te preocuparás por cómo se renderizan tus correos en todos esos escenarios desconocidos.

3. El uso de métodos tradicionales como `float`o `align` para crear columnas resulta en apilamiento poco atractivo en aplicaciones móviles sin compatibilidad de media query

El método en este tutorial utiliza un enfoque distinto, lo que se asegura que las columnas se apilarán en el centro del dispositivo móvil sin importar qué. (Puedes configurarlas fácilmente para que se alineen a la izquierda o derecha si lo prefieres).

Las tablas alineadas a la izquierda o derecha mantienen sus posiciones en las aplicaciones móviles que no son compatibles con media queries. No las puedes ajustar usando CSS específico para dispositivos móviles.

Este tutorial te mostrará cómo tener tus columnas aliadas en el centro, aún en aplicaciones no compatibles con media queries.

4. Cuando usas`float` o `align` para crear columnas, pierdes la habilidad de alinearlas verticalmente.

Este tutorial también te mostrará cómo alinear verticalmente varias columnas en la parte superior, media o inferior.

Este tutorial te enseñará el método “híbrido fluido”, que te permite alinear verticalmente tus columnas en la parte superior, media o inferior.

5. Cuando usas`float` o `align` para crear columnas, tienes que colocarlas en`div`S separados o filas de tablas, para que no fluyan y se apilen naturalmente en distintos tamaños de pantallas.

Este tutorial también te mostrará cómo hacer que los bloques de contenido se apilen y fluyan como esperarías, con control total sobre su alineación horizontal y vertical.

Al usar este método, tus bloques de contenido fluirán naturalmente basándose en el espacio disponible.

1.Comencemos

Comenzamos con un archivo en blanco y lo guardamos como index.html, luego copiamos y pegamos este código:

<!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">
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <title></title>
    <!--[if mso]>
    <style type="text/css">
        table {border-collapse:collapse;border:0;border-spacing:0;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]-->
</head>
<body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;">
    <div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;">
        <table role="presentation" style="width:100%;border:0;border-spacing:0;">
            <tr>
                <td align="center">
                    [content goes here]
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Repasemos todos los elementos anteriores a detalle.

DOCTYPE

<!DOCTYPE html> indica que queremos usar HTML5. Algunos clientes de correo HTML imponen un tipo de documento distinto y algunos puede eliminarlo, pero en la mayoría de los casos terminarás con el HTML5 de una u otra manera. (Ten en cuenta que no todos los elementos HTML5 son compatibles cuando cuando se trata de email HTML, así que siempre verifica los noveles de compatibilidad en el fantástico recurso caniemail.com).

HTML TAG

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"> comienza nuestro documento HTML y define los espacios de nombres XML y OOXML (por sus siglas en inglés, Office Open XML) que necesitamos para Outlook en Windows, como veremos a continuación.

Charset Meta Tag

<meta charset="utf-8"> define la codificación de caracteres Unicode para crear correo, que generalmente cubre la mayoría de los caracteres para muchos idiomas. Sin embargo, es posible que tengas que cambiar esto si necesitas usar caracteres que no estén incluidos en el conjunto UTF-8.

Viewport Meta Tag

<meta name="viewport" content="width=device-width,initial-scale=1"> nos permite especificar que el área de visualización de nuestro correo HTML debe tener el ancho de la pantalla del dispositivo, y que el acercamiento inicial debe ser 100%

Apple Scaling Meta Tag

<meta name="x-apple-disable-message-reformatting"> evita que Apple realice cambios de escala o alejamientos no deseados de tu email responsive en dispositivos iOS.

IE9 Meta Tag

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> se utiliza para mejores el rendering en Internet Explorer 9 o versiones anteriores, lo que es cada vez menos común, así podrías usar tu discreción con esto. Anteriormente también se usaba para mejorar el rendering en los teléfonos Windows. Está colocado entre  y , para que se oculte de Windows Live Mail, que de otra manera no mostrará páginas si se usa este tag. (Muchas gracias a Don Braithwaite por esta observación).

Title Tags

Incluiremos <title></title> aunque pienso que es mejor dejarlo vacío. Algunas veces te encontrarás una aplicación o plataforma de envíos de email que muestre este título inmediatamente después de la línea de asunto en el correo en la vista previa de la bandeja de entrada, lo cual no es ideal.

If MSO

A continuación, entre  tenemos algunos estilos que nada más aplican en Microsoft Outlook. Evitaremos espacios y cellpadding en nuestras tablas usando border-spacing:0;(el equivalente en CSS de usar cellspacing="0" en table de elementos). Luego colocamos cero márgenes en todos los elementos div y usamos !important de otro modo Outlook agrega mucho más espacio extra a nuestro diseño.

XML Tag

Luego tenemos nuestro XML tag y dentro nuestro elemento OOXML <o:OfficeDocumentSettings> con algunos ajustes que le dirán a Microsoft Outlook que estamos trabajando con una base de resolución de 96dpi. Esta configuración asegura que Microsoft Outlook siempre transformará con precisión todo en nuestro email responsive para adaptarse al porcentaje de zoom de la plantilla en la configuración de Windows para pantallas de alto DPI (que son la mayoría de las pantallas en estos días). Todo esto dentro de un <noscript> tag para que T-Online no muestre el “96” (gracias a Mark Robbins por esta corrección).

Inline CSS

Te darás cuenta que no hay un tag de <style> aquí. Haremos todo nuestro inline CSS, que sigue siento la mejor práctica para crear correo hasta que las cuentas que no sean de Gmail en la aplicación de Gmail dejen de eliminar el <head> de tus correos. Volveremos al final para agregar algunas media queries como una mejora para los clientes que sí las admiten.

Body Tag con Estilos Básicos

<body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;"> configura algunos estilos básicos en el body tag. El más importante es word-spacing:normal, otro gran arreglo de Mark Robbins, de otra manera Gmail establece el espacio entre palabras en 1px en el body, lo que agrega 1px de espacio a nuestras columnas y provoca que se apilen.

Wrapper Div

<div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;"> es nuestro wrapper exterior, también basado en el ejemplo de Mark. Tiene nuestro contenido principal, configura algo de CSS para garantizar el tamaño correcto del texto y establece nuestro lenguaje, en este caso en español. También contiene algunos ajustes para que nuestro email HTML sea accesible al definir la función del área de correo HTML principal como un artículo y ser un poco más especifico con aria-roledescription="email". Esto para que nuestros lectores en pantalla anuncien que se trata de un correo electrónico, o al menos que es un artículo, lo que lo define como una pieza principal de contenido y ayudará con la navegación.

Mientras este diseño se usará usando divs en vez de tablas donde sea posible, incluimos un gran wrapper <table> aquí para ayudarnos a centrar el cuerpo principal al interior del correo. Esto se necesitaba particularmente para el Comcast webmail (USA) y Libero webmail (Italia), ya que ambos omiten centrar nuestro contenido sin el. Siempre debemos ajustar el role en cualquier table que se utilice solamente para la composición de presentation así los lectores en pantalla no muestran la presencia y estructura de filas y columnas (lo que es útil para los datos tabulares reales), así solo anunciará el contenido que tiene.

2. Creación del Contenedor Exterior Estructural

En primer lugar, debemos agregar un contenedor exterior, que de hecho son dos contenedores, ya que necesitamos atender por separado a Outlook en Windows por u lado y a todos los demás clientes de correo electrónico por el otro.

Esto debido a que la mayor parte de nuestro correo HTML se creará usando <div>s que utilizan el max-width en CSS para establecer sus dimensiones y display:inline-block; en CSS para colocar múltiples columnas una junto a otra. Por desgracia, Microsoft Outlook en Windows no es compatible adecuadamente con nada de eso, así que necesitamos usar algunas tablas para que funcione. Solo queremos que estos diseños de tabla restrictivos apliquen en Outlook, por lo que instalaremos el código dentro de comentarios condicionales [if mso] que lo ocultan de otros clientes de email. Cualquier tabla configurada para Outlook como esta se conoce como tabla fantasma.

Necesitamos tablas fantasma para Outlook en Windows porque ignorará el ancho y posicionamiento de los div. — Necesitamos tablas fantasma para Outlook en Windows porque ignorará el ancho y posicionamiento de los `div`.

Para empezar, vamos a agregar una tabla fantasma y un div que juntos componen un wrapper con el ancho deseado para este correo HTML, 660px.

Nuestra tabla fantasma se emplea porque Outlook no es compatible con la propiedad de ancho máximo.

Reemplaza el marcador [content goes here] en tu archivo con el siguiente código:

<!--[if mso]>
<table role="presentation" align="center" style="width:660px;">
<tr>
<td style="padding:20px 0;">
<![endif]-->
<div class="outer" style="width:96%;max-width:660px;margin:20px auto;">
    [content goes here]
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

Aquí puedes ver que nuestra tabla fantasma es de 660 px de ancho y el div interior de 96% de ancho hasta un máximo de 660px. Esto significará que en pantallas más pequeñas, tendremos una pequeña barrera de 2% en cualquier lado, así como un poco de relleno.

Nuestra tabla esta configurada para ser 96% de ancho hasta que alcance un máximo de 600px.

Este div también tiene un margen superior e inferior de 20px, para otorgarle un poco de espacio para respirar verticalmente y debido a que no se renderizará en Outlook, también agregamos relleno superior al td de la tabla fantasma.

3. Agregar un Diseño de Columna Sencilla con una Imagen de Banner de Ancho Total

Ahora que tenemos la estructura exterior, es momento de agregar algo de contenido.

Si hasta ahora has seguido paso a paso, detente un momento y descarga los archivos del tutorial y mueve el directorio /images para que estén en la misma carpeta de tu archivo index.html. Puedes obtener los archivos de origen de las siguientes maneras:

Visita el archivo de Github para separarlo
Descarga el .zip directamente de Github
Visita la demostración en CodePen para separarlo

Como mencionamos, generalmente estaremos favoreciendo los divs sobre las tablas, pero para diseños de una sola columna, se usan menos especificaciones para usar una tabla para todos, en vez de un div con una tabla fantasma. Entonces reemplacemos [content goes here] con este código.

<table role="presentation" style="width:100%;border:0;border-spacing:0;">
    <tr>
        <td style="padding:10px 10px 20px 10px;font-family:Arial,sans-serif;font-size:24px;line-height:28px;font-weight:bold;">
            <img src="images/header.png" width="640" alt="" style="width:100%;height:auto;" />
        </td>
    </tr>
    <tr>
        <td style="padding:10px;text-align:left;">
            <h1 style="margin-top:0;margin-bottom:16px;font-family:Arial,sans-serif;font-size:26px;line-height:32px;font-weight:bold;">Creating responsive email magic</h1>
            <p style="margin:0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus!</p>
        </td>
    </tr>
</table>

<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;">&nbsp;</div>

En nuestra primera fila tenemos una celda con 10px de relleno en los lados y un extra en la parte inferior. Dentro de esta celda está la imagen de nuestro banner de cabecera en su propia celda, así que hay suficiente espacio para cualquier texto alternativo en un buen tamaño y fuente. (En mi caso, esta imagen es meramente decorativa, así que no necesita ninguno)

Ajustamos la imagen width="640" en el correo HTML para Outlook y luego en el CSS ajustamos style="width:100%;height:auto;" para que la imagen sea 100% amplia en otros clientes y siempre se mantenga en proporción.

En la segunda fila, aplicamos el mismo relleno de 10px a los lados, así como text-align:left; para evitar que el texto se centre en algunos clientes que lo obtengan del td align="center" anterior.

Para nuestro texto podemos usar las tags <h1> y <p> ya que margin es compatible con estas etiquetas en todos los ámbitos (con padding, no tanto). Aunque aplicamos todo nuestro estilo inline a estos elementos, porque algunos clientes de webmail tienen un estilo de fuente que se les aplicará a menos que tu expresamente lo anules a nivel de elemento.

En la parte inferior, puedes ver que estamos usando un espaciador div para crear algo de relleno entre este diseño y el siguiente. Yo prefiero usarlos entre bloques porque Outlook puede ser muy impredecible con los márgenes de los elementos a nivel de bloque, y es más sencillo mantener el espacio como discretas piezas de código cuando creas diseños modulares. Sin embargo, si lo prefieres, puedes aplicar el relleno dentro de tus elementos para crear espacio vertical. Cuando quieres crear espaciadores como este, puedes configurar una line-height, una height y fijar mso-line-height-rule:exactly;, que es una propiedad de Microsoft Office que evita tratar tu line-height como un mínimo.

También ten en cuenta que es muy importante aplicar el mismo relleno en la izquierda y en la derecha de todas tus columnas, así serán uniformes cuando se apilen una sobre otra.

Siempre mantén la misma cantidad de relleno en los lados derechos e izquierdos de tus elementos de tu plantillas para correo electrónico para que el relleno sea uniforme en clientes en móviles sin ayuda de media query.

Ahora deberías tener listo tu diseño de columna sencilla, así que pasemos a las columnas múltiples.

4. Agregar un Diseño de Dos Columnas que Estará Centrado en Móvil

We are going to create a two-column layout on desktop that stacks to a single, centered column on mobile — Crearemos un diseño de dos columnas en escritorio que apila a una sola columna centrada en móvil.

Directamente abajo la etiqueta de cierre </div> de espaciador anterior, pega lo siguiente:

<div class="two-col">
    <!--[if mso]>
    <table role="presentation" width="100%">
    <tr>
    <td style="width:50%;">
    <![endif]-->
    <div class="column">
        [content goes here]
    </div>
    <!--[if mso]>
    </td>
    <td style="width:50%;">
    <![endif]-->
    <div class="column">
        [content goes here]
    </div>
    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
</div>

Esto nos da un diseño muy básico de un div principal con dos columnas internas en su interior que están estructuradas por una tabla fantasma para Outlook con dos celdas, cada una de 50% de ancho.

Primero nos queremos asegurar que la font-size está ajustada a cero en nuestro contenedor, porque nuestras columnas necesitan caber con exactitud una al lado de la otra, sin esto puedes terminar con espacio adicional que provoque que se apilen. También necesitamos agregar una propiedad text-align que controlará el alineamiento de las columnas internas. Así que cambia la etiqueta div inicial con lo siguiente:

1	<div class="two-col" style="text-align:center;font-size:0;">

Para hacer que las columnas internas floten de un lado a otro en el escritorio, pero apiladas en el centro en el dispositivo móvil, combinaremos este text-align: center en el contenedor con display: inline-block en las columnas

Todos los elementos inline-block obedecen a la propiedad text-align en su principal, así que simplemente podemos ajustar left, center o right en el contenedor para especificar dónde deben ir las columnas cuando se apilen.

El conjunto de alineación de texto en el contenedor determinará la ubicación de las columnas de las plantilla email HTML

Lograr que Varias Columnas Funcionen

Entonces agregamos el ajuste de display a cada columna y especifica sus anchos. Queremos que sean 100% anchos en pantallas más pequeñas y hasta un máximo de 330px de ancho en escritorio.

Cambia cada etiqueta div.column para que ambas luzcan así:

1	<div class="column" style="width:100%;max-width:330px;display:inline-block;">

Ahora todo está configurado para funcionar como columnas múltiples.

A continuación, queremos ajustar el alineamiento vertical para nuestras columnas y puedes elegir ente la parte superior, el centro y la parte inferior. Cuando tienes un diseño de múltiples columnas, hablaremos de eso en el Paso 6, tu decisión también configurará el alineamiento vertical fila por fila, incluso cuando tus columnas se apilen en nuevas líneas ¡Es bastante ingenioso!

Las columnas se alinearán verticalmente a sus vecinos, aún cuando se apilen en nuevas líneas.

Para esto necesitamos agregar algo de código en dos lugares. En nuestra columna divs, agrega vertical-align:middle; al CSS para que luzca así.

1	<div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;">

Y para Outlook, agregamos el atributo HTML valign a cada celda también. Esto siempre tiene que coincidir con lo que hayas establecido en la columna correspondiente div, así si cambias las columnas a vertical-align:top; también tienes que configurar las celdas en la tabla fantasma a valign="top" .

Edita las celdas de la tabla fantasma para que se vean así:

1	<td style="width:50%;" valign="middle">

Y finalmente agregaremos un poco de relleno. Para Outlook, simplemente podemos agregar esto a las celdas fantasma:

1	<td style="width:50%;padding:10px;" valign="middle">

Para nuestras columnas, me gusta instalar un div extra dentro con el relleno. Hago esto porque el modelo de caja en CSS significa que cualquier relleno que agregues a un elemento se aplica al exterior, lo que incrementa su ancho total (por ejemplo una columna de 330px con 10px de relleno en cualquier lado se convierte en 350px de ancho). Normalmente en HTML puedes usar box-sizing: border-box; , así cualquier relleno estará incluido en el ancho, pero esto no es compatible con todos los clientes de correo electrónico. Así que para ahorrarme el inconveniente de hacer muchos cálculos de ancho de columna menos el relleno, prefiero instalar.

Así que dentro de cada div.column,, reemplazo [content goes here] con esto:

1	<div style="padding:10px;">
2	[content goes here]
3	</div>

Ahora que ya configuramos todo, ¡nuestra estructura está completa! El diseño de la plantilla email HTML y la tabla fantasma trabajan juntos para darnos nuestra composición de dos columnas.

Visualizando cómo funciona nuestra estructura de dos columnas

Configuración de Imágenes Híbrido Fluidas

Dentro de la primer columna agregaremos una imagen que envolveré en una etiqueta para el párrafo (así podrás agregar fácilmente algunos márgenes si los necesitas, y así cualquier texto alternativo tendrá un estilo agradable).

Reemplaza el primer [content goes here] con esto:

<p style="margin:0;font-family:Arial,sans-serif;font-size:14px;line-height:18px;">

    <img src="images/two-column-01.png" width="310" alt="" style="display:block;width:310px;max-width:100%;height:auto;" />

</p>

Analicemos la etiqueta img de arriba.

Tenemos 301px de espacio disponible en este caso (330px de columna menos 10px de relleno en ambos lados), así nuestra imagen tendrá un ancho de 310ox. Primero debemos configurar el width="310" con el tag img para Outlook en Windows, de otra manera mostrará la imagen en su tamaño físico.

A continuación, en el CSS, configuraremos display:block; para evitar un espacio debajo de la imagen en Gmail y Google Workspace. Luego, para asegurar que la imagen tenga siempre un máximo del 100% del ancho de la columna en todos los demás clientes móviles y de escritorio, establecemos max-width:100%;. También agregamos height:auto; para garantizar que nuestra imagen nunca termine alargada.

Para imágenes de ancho completo, puedes detenerte ahí, pero también agregué un width:310px; en caso de que tengas una imagen más estrecha. De ser así, cambia el valor 310px al ancho de tu imagen y asegúrate que también ajustes el width="310" para Outlook

(Puede que notes que en las imágenes que estamos configurando un ancho de pixel y un porcentaje max-width, que es lo contrario a lo que hicimos en nuestras columnas: que tienen un porcentaje de ancho y un max width de pixel. Hice este ajuste porque a mediados de 2021, las aplicaciones de Outlook para iOS y Android dejaron de admitir max-widths de pixeles en etiquetas img)

Cuando tu imagen es más estrecha, probablemente necesitas alinearla horizontalmente también y aquí hay dos opciones dependiendo de tu diseño.

Si no te importan los espacios debajo las imágenes en Gmail y Google Workplace, quita display:block; del CSS de la imagen. Luego en el CSS de la etiqueta <p> alrededor de ella, solamente configura text-align a lo que quieras. La imagen heredará el alineamiento de ahí.

Como alternativa, si no puedes tener ningún espacio debajo de las imágenes en Gmail y Google Workspace, debes conservar el display:block; y necesitaras usar una combinación de márgenes y alineamiento.

Para alinear a la izquierda una imagen, display:block agrega margin-left:0;margin-right:auto; a la etiqueta de la imagen CSS y añade align="left"a su celda principal en la tabla fantasma.
Para centrar una imagen, display:block agrega margin-left:auto;margin-right:auto; a la etiqueta de la imagen CSS y añade align="center"a su celda principal en la tabla fantasma.

Para alinear a la derecha una imagen display:block, agrega margin-left:auto;margin-right:0; a la etiqueta de la imagen CSS y añade align="right" a su celda principal en la tabla fantasma.

Ten en cuenta que Outlook aplicará la configuración de align a todo en la celda, así que si esto no se ajusta a tu diseño no necesitas modificar la configuración text-align en tus párrafos de texto.

Ahora Solo Necesitamos Agregar Nuestro Texto

En la segunda columna reemplaza el [content goes here] con este código, que incluye algunos párrafos de texto y un botón con un enlace que usa el método de Mark Robbins :

<p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Taciti nostra, per litora nostra</p>

<p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>

<p style="margin:0;font-family:Arial,sans-serif;"><a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff"><!--[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>

El segundo div ahora muestra texto centrado invisible, porque hereda el tamaño de la fuente cero y el alineamiento de texto centrado del contenedor. Así que agregaremos algunos tamaños de fuente y alineación del texto a la etiqueta DIV para que ahora todo junto se vea así:

<div style="padding:10px;font-size:14px;line-height:18px;text-align:left;">
    <p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Taciti nostra, per litora nostra</p>
    <p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>
    <p style="margin:0;font-family:Arial,sans-serif;"><a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff"><!--[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>

Toda tu sección combinada se debería ver así y también agregaremos un espaciador al final:

<div class="two-col" style="text-align:center;font-size:0;">
    <!--[if mso]>
    <table role="presentation" width="100%">
    <tr>
    <td style="width:50%;padding:10px;" valign="middle">
    <![endif]-->
    <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;">
        <div style="padding:10px;">
            <p style="margin:0;font-family:Arial,sans-serif;font-size:14px;line-height:18px;">
                <img src="images/two-column-01.png" width="310" alt="" style="display:block;width:310px;max-width:100%;height:auto;" />
            </p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:50%;padding:10px;" valign="middle">
    <![endif]-->
    <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;">
        <div style="padding:10px;font-size:14px;line-height:18px;text-align:left;">
            <p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Taciti nostra, per litora nostra</p>
            <p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>
            <p style="margin:0;font-family:Arial,sans-serif;"><a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff"><!--[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>
    </div>
    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
</div>

<div class="spacer" style="line-height:24px;height:24px;mso-line-height-rule:exactly;">&nbsp;</div>

¡Ya lo tienes! Ahora deberías tener un diseño de dos columnas que apile verticalmente cuando redimensiones tu navegador y se contraiga según corresponda cuando hagas que la ventana gráfica sea más estrecha que 330px.

5. Agregando un Diseño de Dos Columnas que se Invertirá cuando se Apile en un Dispositivo Móvil

Ahora vamos a duplicar el diseño anterior, pero volteado para que la imagen esté en la derecha y el texto a la izquierda cuando se vea en escritorio, mientras nos aseguramos que la imagen salga primero cuando se vea en un dispositivo móvil.

Cuando estés apilando, el objeto que aparece primero en el código siempre terminará en la parte superior. Para que así aún podamos programar nuestro diseño con la imagen primero y el contenido después, entonces usa el atributo dir="rtl" en la plantilla email HTML y con la propiedad correspondiente direction:rtl; en CSS para asegurar que las columnas están colocadas de derecha a izquierda cuando aparezcan una al lado de la otra.

Our elements will stack in the opposite order if dir="rtl" (HTML) or direction:rtl (CSS) is set on their container — Nuestros elementos se apilarán en orden inverso si `dir="rtl"` o `direction:rtl` (CSS) esta establecido en su contenedor.

Tradicionalmente esta propiedad es para designar texto que vaya de derecha a izquierda, por ejemplo el árabe. Cuando se aplica al diseño de los elementos, esto le dirá a cada cliente de correo renderizar nuestros elementos en el orden opuesto. Siempre usamos la versión CSS para nuestro contenido div porque GMX y Web.de no son compatibles con el atributo HTML dir pero sí admiten direction en CSS.

Entonces debajo del espaciador agregado anteriormente, podrías copiar y pegar de nuevo el div.two-col completo, o pegar el siguiente código, que tiene la misma estructura pero contenido ligeramente distinto.

<div class="two-col" style="text-align:center;font-size:0;">
    <!--[if mso]>
    <table role="presentation" width="100%">
    <tr>
    <td style="width:50%;padding:10px;" valign="middle">
    <![endif]-->
    <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            <p style="margin:0;font-family:Arial,sans-serif;">
                <img src="images/two-column-02.png" width="310" alt="" style="display:block;width:310px;max-width:100%;height:auto;" />
            </p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:50%;padding:10px;" valign="middle">
    <![endif]-->
    <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;">
        <div style="padding:10px;font-size:14px;line-height:18px;text-align:left;">
            <p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Conubia nostra, per inceptos himenaeos</p>
            <p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>
            <p style="margin:0;font-family:Arial,sans-serif;"><a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff"><!--[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;">Lock it in</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%">&nbsp;</i><![endif]--></a></p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
</div>

Ahora, todo lo que necesitamos hacer es decirle a la tabla fantasma y al div principal que coloquen sus elementos en dirección derecha a izquierda, así agrega direction:rtl; al contenedor div del CSS para que ahora se lea así:

1	<div class="two-col" style="text-align:center;font-size:0;direction:rtl;">

Y agrega dir="rtl" a la tabla fantasma:

1	<table role="presentation" width="100%" dir="rtl">

Si lo guardas ahora y echas un vistazo, verás que las columnas cambiaron de lados, pero el texto aún se ve extraño. Esto porque el texto también heredó la propiedad de dirección, así que necesitamos restablecerlo en las celdas de nuestros divs y tabla fantasma. Primero, agrega direction:ltr; a cada columna div, para que ahora se vean así:

1	<div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;direction:ltr;">

Y luego dir="ltr" a cada celda de la tabla fantasma:

1	<td style="width:50%;padding:10px;" valign="middle" dir="ltr">

Ahora nuestro texto corre de izquierda a derecha como debería.

Para recapitular, nuestra fila entera ahora se debe ver así, y también agregaremos otro espaciador en la parte inferior, de esta manera:

<div class="two-col" style="text-align:center;font-size:0;direction:rtl;">
    <!--[if mso]>
    <table role="presentation" width="100%" dir="rtl">
    <tr>
    <td style="width:50%;padding:10px;" valign="middle" dir="ltr">
    <![endif]-->
    <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;direction:ltr;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            <p style="margin:0;font-family:Arial,sans-serif;">
                <img src="images/two-column-02.png" width="310" alt="" style="display:block;width:310px;max-width:100%;height:auto;" />
            </p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:50%;padding:10px;" valign="middle" dir="ltr">
    <![endif]-->
    <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;direction:ltr;">
        <div style="padding:10px;font-size:14px;line-height:18px;text-align:left;">
            <p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Conubia nostra, per inceptos himenaeos</p>
            <p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>
            <p style="margin:0;font-family:Arial,sans-serif;"><a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff"><!--[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;">Lock it in</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%">&nbsp;</i><![endif]--></a></p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
</div>

<div class="spacer" style="line-height:24px;height:24px;mso-line-height-rule:exactly;">&nbsp;</div>

¡Y eso es todo! Creaste un diseño de columna volteado que se invertirá cuando se apile. Ahora deberías tener un diseño de tres columnas que se colapse a dos y finalmente a una en las pantallas más pequeñas. Un gran paso para tus plantillas de correo electrónico.

6. Agregando un Diseño de Tres Columnas con Filas Múltiples

Al igual que con nuestro diseño de dos columnas, aquí vamos a crear columnas que se apilen al centro del dispositivo móvil al usar la combinación de text-align: center en el contenedor y display: inline-block en las columnas externas.

Para realizar múltiples filas y columnas, puedes agregar todos los elementos de bloque inline que quieras al contenedor. De esta forma, cuando la ventana gráfica se vuelve demasiado estrecha para adaptarse a todas las columnas, se reajustan para adaptarse al espacio disponible. Esto significa que podrás realizar (por ejemplo) un diseño de columna de 3x2 que se apila hacia abajo a 2x3 columnas y finalmente 1x6 columnas en dispositivos móviles.

Los bloques de flujo libre se pueden aplicar desde 3x2 a 2x3 y hasta 1x6 en tus plantillas para correo electrónico.

Primeramente, aquí nuestra sección también tiene un encabezado de columna sencilla y la introducción, así que agregaremos eso primero. Como en el Paso 3, solo usaremos una table porque utiliza menos código que crear un div y una tabla fantasma. Entonces debajo del espaciado anterior, pega lo siguiente.

<table role="presentation" style="width:100%;border:0;border-spacing:0;">
    <tr>
        <td style="padding:10px;text-align:center;">
            <h1 style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-size:24px;line-height:28px;font-weight:bold;">Praesent laoreet malesuada cursus</h1>
            <p style="margin:0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;">Posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora!</p>
        </td>
    </tr>
</table>

Debajo de esto, agregaré nuestro contenedor de tres columnas con nuestro ajuste de alineamiento de texto:

1	<div class="three-col" style="font-size:0;text-align:center;">
2	[content goes here]
3	</div>

A continuación, reemplaza content goes here con la siguiente tabla fantasma.

1	<!--[if mso]>
2	<table role="presentation" width="100%" style="text-align:center;">
3	<tr>
4	<td>
5	<![endif]-->
6	<div class="column"></div>
7	<!--[if mso]>
8	</td>
9	<td>
10	<![endif]-->
11	<div class="column"></div>
12	<!--[if mso]>
13	</td>
14	<td>
15	<![endif]-->
16	<div class="column"></div>
17	<!--[if mso]>
18	</td>
19	</tr>
20	<tr>
21	<td>
22	<![endif]-->
23	<div class="column"></div>
24	<!--[if mso]>
25	</td>
26	<td>
27	<![endif]-->
28	<div class="column"></div>
29	<!--[if mso]>
30	</td>
31	<td>
32	<![endif]-->
33	<div class="column"></div>
34	<!--[if mso]>
35	</td>
36	</tr>
37	</table>
38	<![endif]-->

Lo más importante que debes observar en el código anterior es que en la mitad de la tabla fantasma, terminamos la fila y comenzamos una nueva con </td></tr><tr><td>. No necesitas separar las filas de los divs, sin embargo sí necesitas agregar <tr>s adicionales a tu tabla fantasma para Outlook para cada fila de columnas con las que vas a terminar. Esto crea un diseño como este:

Así es como funciona nuestra tabla fantasma en Outlook para mantener nuestras filas y columnas separadas en nuestra plantilla email HTML.

Para el resto de este diseño, el proceso es casi idéntico a lo que vimos en el Paso 3. La única diferencia es que aquí tenemos tres columnas que ya está configuradas para ser un tercio del ancho de nuestro correo HTML, 220px de ancho. En lugar de ajustar las celdas en la tabla fantasma como un porcentaje, ya que tendía que ser un 33% para Outlook, lo cual es ligeramente impreciso, lo configuraremos para que sea el ancho pixel en cada celda. Reemplaza cada td en la tabla fantasma con esta especificación:

1	<td style="width:220px;padding:10px;" valign="top">

Ten en cuenta que siempre es buena idea establecer el ancho de las celdas de píxeles al usar CSS en lugar de HTML, porque Outlook los trata con precisión cuando ajusta la escala DPI de Windows. Si configuras tus anchos de celda en HTML como width="220" puedes terminar con resultados impredecibles en Outlook o Windows.

Haremos coincidir el formato de la tabla fantasma para cada una de nuestras columnas, ajustando cada etiqueta div de las columnas para que todas se vean así:

1	<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">

Y una vez que se haya aplicado a cada una, simplemente necesitamos agregar el relleno interior div, algo de contenido, nuestro estilo de texto y espacio en la parte inferior. Agregando eso, se conjunta así:

<div class="three-col" style="font-size:0;text-align:center;">
    <!--[if mso]>
    <table role="presentation" width="100%" style="text-align:center;">
    <tr>
    <td style="width:220px;padding:10px;" valign="top">
    <![endif]-->
    <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            <p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="images/three-column-01.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
            <p style="margin:0;font-family:Arial,sans-serif;">Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:220px;padding:10px;" valign="top">
    <![endif]-->
    <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            <p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="images/three-column-02.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
            <p style="margin:0;font-family:Arial,sans-serif;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor.</p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:220px;padding:10px;" valign="top">
    <![endif]-->
    <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            <p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="images/three-column-03.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
            <p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    </tr>
    <tr>
    <td style="width:220px;padding:10px;" valign="top">
    <![endif]-->
    <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            <p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="images/three-column-04.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
            <p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:220px;padding:10px;" valign="top">
    <![endif]-->
    <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            <p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="images/three-column-05.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
            <p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:220px;padding:10px;" valign="top">
    <![endif]-->
    <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            <p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="images/three-column-06.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
            <p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
</div>

<div class="spacer" style="line-height:50px;height:50px;mso-line-height-rule:exactly;">&nbsp;</div>

¡Y eso es todo! Ahora deberías tener plantillas para correo electrónico de tres columnas que se colapse en dos y finalmente en una para las pantallas más pequeñas.

7. Agregar un Diseño de “Barra Lateral” de dos Columnas

Ahora crearemos un diseño con una columna ancha más una barra lateral más estrecha que contiene un icono.

Queremos que se apilen en el centro, así que configuraremos nuestro contenedor div con ese alineamiento de texto. Pega el siguiente código en el último espaciador:

1	<div class="sidebar" style="font-size:0;text-align:center;">
2	[content goes here]
3	</div>

Ahora reemplaza [content goes here] con nuestra tabla fantasma y columna divs. Una vez que la columna tenga 100px de ancho y la otra 560px.

<!--[if mso]>
<table role="presentation" width="100%">
<tr>
<td style="width:100px;">
<![endif]-->
<div class="small" style="width:100%;max-width:100px;display:inline-block;">
    [content goes here]
</div>
<!--[if mso]>
</td>
<td style="width:560px;">
<![endif]-->
<div class="large" style="width:100%;max-width:560px;display:inline-block;">
    [content goes here]
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

Ahora configuremos nuestro alineamiento vertical al agregar valign a las celdas de la tabla fantasma y vertical-align a cada div. El código de nuestra columna más pequeña se verá así:

1	<td style="width:100px;" valign="middle">
2	<![endif]-->
3	<div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;">

Y en de la más amplia así:

1	<td style="width:560px; valign="middle">
2	<![endif]-->
3	<div class="large" style="width:100%;max-width:560px;display:inline-block;vertical-align:middle;">

Ahora agregaremos nuestro relleno y alinearemos nuestro texto al centro en la celda de la tabla fantasma más pequeña:

1	<td style="width:100px;padding:10px;text-align:center;" valign="middle">

Y para la tabla fantasma más grande:

1	<td style="width:560px;padding:10px;text-align:center;" valign="middle">

Y para asegurar que nuestros divs coinciden, instalaré otro div dentro de cada uno, al remplazar los marcadores [content goes here] con esto:

1	<div style="padding:10px;font-size:14px;line-height:18px;">
2	[content goes here]
3	</div>

Ahora podemos agregar nuestro contenido. En la columna pequeña reemplaza [content goes here] con esto:

1	<img src="images/sidebar-01.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" />

Para la columna grande remplázalo con esto:

<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Read&nbsp;on</strong></a></p>

Al ponerlo todo junto, se debería ver así. También agregué un poco de estilo de fuente al relleno div en la columna pequeña, para cualquier texto alternativo que se muestre. Y añadimos un espaciador al final también:

<div class="sidebar" style="font-size:0;text-align:center;">
    <!--[if mso]>
    <table role="presentation" width="100%">
    <tr>
    <td style="width:100px;padding:10px;text-align:center;" valign="middle">
    <![endif]-->
    <div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;">
        <div style="padding:10px;font-family:Arial,sans-serif;font-size:14px;line-height:18px;">
            <img src="images/sidebar-01.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" />
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:560px;padding:10px;text-align:center;" valign="middle">
    <![endif]-->
    <div class="large" style="width:100%;max-width:560px;display:inline-block;vertical-align:middle;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            <p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Read&nbsp;on</strong></a></p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
</div>

<div class="spacer" style="line-height:10px;height:10px;mso-line-height-rule:exactly;">&nbsp;</div>

Ahora deberías tener el diseño de una barra lateral izquierda y cuando ajustes el tamaño del navegador para hacerlo más pequeño, el icono saltará sobre el texto y se colocará en el centro.

8. Agregar un Diseño de “Barra Lateral” Invertido

Para agregar más interés visual, invirtamos el diseño de nuestra segunda barra lateral para que el icono que esté a la derecha para computadoras de escritorio, pero que aún así se apile primero en dispositivos móviles. Seguiremos exactamente el mismo proceso que en el Paso 5. Básicamente podemos duplicar el diseño de la barra lateral anterior o tomar esta composición de ejemplo con contenido ligeramente distinto.

<div class="sidebar" style="font-size:0;text-align:center;">
    <!--[if mso]>
    <table role="presentation" width="100%">
    <tr>
    <td style="width:100px;padding:10px;text-align:center;" valign="middle">
    <![endif]-->
    <div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;">
        <div style="padding:10px;font-family:Arial,sans-serif;font-size:14px;line-height:18px;">
            <img src="images/sidebar-02.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" />
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:560px;padding:10px;text-align:center;" valign="middle">
    <![endif]-->
    <div class="large" style="width:100%;max-width:560px;display:inline-block;vertical-align:middle;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            <p style="margin:0;font-family:Arial,sans-serif;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Register&nbsp;today</strong></a></p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
</div>

Y al igual que en el Paso 5, para invertir el orden solamente necesitamos agregar nuestro direction:rtl; a div.sidebar, así como dir="rtl" a la etiqueta fantasma <table>.

Luego, para asegurar que los contenidos corran en la dirección correcta, agregamos direction:ltr; a ambas columnas y dir="ltr" a cada una de nuestras celdas fantasma.

Una vez hecho, todo se verá así, con nuestro espaciador final agregado debajo.

<div class="sidebar" style="font-size:0;text-align:center;direction:rtl;">
    <!--[if mso]>
    <table role="presentation" width="100%" dir="rtl">
    <tr>
    <td style="width:100px;padding:10px;text-align:center;" valign="middle" dir="ltr">
    <![endif]-->
    <div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;direction:ltr;">
        <div style="padding:10px;font-family:Arial,sans-serif;font-size:14px;line-height:18px;">
            <img src="images/sidebar-02.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" />
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:560px;padding:10px;text-align:center;" valign="middle" dir="ltr">
    <![endif]-->
    <div class="large" style="width:100%;max-width:560px;display:inline-block;vertical-align:middle;direction:ltr;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            <p style="margin:0;font-family:Arial,sans-serif;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Register&nbsp;today</strong></a></p>
        </div>
    </div>
    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
</div>

<div class="spacer" style="line-height:40px;height:40px;mso-line-height-rule:exactly;">&nbsp;</div>

¡Listo! Ahora tendremos dos barras laterales con icono en los lados contrarios pero que permanecen arriba del texto cuando todo se apile en los dispositivos móviles en las plantillas para correo electrónico.

9. Adición de Mejora Progresiva con Media Queries

¡Ahora tienes tus plantillas para correo electrónico responsive en todas partes sin un media query a la vista! Por supuesto que hay muchos clientes de email que admiten media queries, por lo que ahora podemos mejorar progresivamente nuestra de por si genial plantilla email con un par de ajustes para que se vea perfecto en la mayoría de los clientes posibles.

Agregar Media Queries

Antes que nada, ajustaremos nuestras columnas de tres columnas para que tengan un 100% de ancho en pantallas de hasta 350px de largo, y luego para pantallas que tienen entre 351px-460 de ancho, de hecho podemos colocar dos columnas una al lado de la otra, así que las ajustaremos al 50%. En las columnas todo lo que tenemos que hacer es anular el max-width porque, como te acordarás, ya tienen el ancho de 100% y solo es el max-width lo que las restringe.

Con nuestras columnas de dos columnas e imágenes, las ajustaremos para que sean 100% de ancho en todas las pantallas arriba de 460px.

Para pantallas que tienen un mínimo de 461px de ancho, especificaremos el porcentaje max-width para todas las columnas, así todas tendrán la misma proporción aún sí la ventana gráfica o la región visible (por ejemplo en Gmail webmail) es más estrecha que nuestro correo HTLM de 660px.

Así que agrega esto al <head> de nuestro doumento:

<style type="text/css">
    @media screen and (max-width: 350px) {
        .three-col .column {
            max-width: 100% !important;
        }
    }
    @media screen and (min-width: 351px) and (max-width: 460px) {
        .three-col .column {
            max-width: 50% !important;
        }
    }
    @media screen and (max-width: 460px) {
        .two-col .column {
            max-width: 100% !important;
        }
        .two-col img {
        	width: 100% !important;
        }
    }
    @media screen and (min-width: 461px) {
        .three-col .column {
            max-width: 33.3% !important;
        }
        .two-col .column {
            max-width: 50% !important;
        }
        .sidebar .small {
            max-width: 16% !important;
        }
        .sidebar .large {
            max-width: 84% !important;
        }
    }
</style>

¡Y listo! Perfección de diseño en todos los tamaños de pantalla.

Estos son solo algunos ajustes para mostrarte lo que es posible. Puedes jugar con esto tanto como quieras hasta alcanzar el resultado que quieres en una amplia gama de tamaños de dispositivos que admiten media queries.

¡Listo!

¡Bien Hecho! Ahora tenemos un email HTML responsive totalmente funcional que usa tan solo unas cuantas media queries y tiene un tamaño inferior a 17kb. Sigue experimentando con distintos diseños aplicando los principios que aprendiste en este tutorial. Hay mucho que puedes hacer una vez que domines los conceptos básicos.

Iconos e Ilustraciones

Todos los elementos gráficos de la plantilla email HTML son parte de la colección Personajes de Personas Planas de alexdndz disponible en Envato Elements.

No olvides que si vas a comenzar un nuevo proyecto, explora nuestras plantillas email responsive más vendidas en Envato Market.