Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Email
Webdesign

Crear un Correo Electrónico Responsivo Perdurable sin Media Queries

by
Difficulty:AdvancedLength:LongLanguages:

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

Final product image
What You'll Be Creating

Hay suficientes dolores de cabeza por enfrentar cuando se codifica un correo electrónico en HTML. También difícilmente parece justo si también necesitamos mantenernos a la par de los nuevos clientes de correo y tamaños de los dispositivos que surgen cada semana. El soporte para CSS y media query puede variar de aplicación a aplicación haciendo imposible evitar ser presa del miedo cada vez que escuchas que hay una nueva emocionante aplicación de correo que no has probado.

Pero ¿Qué tal si pudieras crear una plantilla de correo electrónico que fuera responsiva, aún en ambientes con el más pobre soporte para CSS moderno? ¿Qué tal si cada vez que escuchaste sobre una nueva aplicación de correo electrónico que todo el mundo está probando, en lugar de temblar de miedo, pudieras sentirte seguro sabiendo que tus correos electrónicos probablemente se verán bien?

El método que expongo a continuación es sobre crear una buena experiencia para clientes de correo electrónico que no tienen soporte de media query.

Se llama el método híbrido fluído, a veces referido como el método esponjoso del desarrollo de correo electrónico. La parte fluída se refiere al hecho de que usamos muchos porcentajes. La parte híbrida es porque también usamos max-width para restringir algunos de nuestros elementos en pantallas más grandes.

Seis Problemas Principales que tenemos como Objetivo Resolver

1. La aplicación de Gmail para Android e iOS es un dolor

Es más popular que la aplicación de correo predeterminada en Android, pero Gmail no soporta media queries, en las que tradicionalmente dependemos para redimensionar y reformatear nuestros correos electrónicos para pantallas pequeñas. Éste tutorial te mostrará cómo elaborar correos electrónicos que son responsivos, aún en la aplicación de Gmail.

2. Nuevas aplicaciones de correo electrónico están siendo lanzadas todo el tiempo

Es difícil seguir la pista de todas las nuevas aplicaciones de correo que continúan apareciendo. Algunas de ellas realmente se preocupan por renderizar el correo electrónico y tener gran soporte para CSS y media query, pero algunas se enfocan más en flujos de trabajo de correo electrónico y no soportan media queries. Éste tutorial te enseñará cómo crear un correo electrónico que siempre es responsivo, sin importar el nivel de soporte de CSS.

3. El número de tamaños posibles de pantallas de dispositivos es casi infinita.

No solamente tenemos computadoras de escritorio y pequeños teléfonos inteligentes, sino también tenemos teléfonos inteligentes grandes y pequeñas laptops. Solo porque alguien está accesando a su Gmail vía su laptop no significa que su pantalla es lo suficientemente grande para ver un correo de 700px de ancho, y personas que usan un iPhone+6 pudieran manejar un maquetado de dos columnas, sino que  generalmente se apegan a una sola columna. Éste tutorial te muestra cómo elaborar un maquetado que se reformateará para encajar en el espacio disponible, aún en un correo basado en la web.

4. Crear un correo electrónico responsivo al apilar <td> en dispositivos móviles no funcionará en todos lados

Ciertos clientes de correo electrónico (en iOS e incluso en algunas de las aplicaciones de correo nativas en versiones previas de Android) no apilan adecuadamente dos celdas de tabla en la misma fila; solo apilarán dos tablas individuales. Éste tutorial usa un método completamente diferente que es completamente soportado en todas las aplicaciones y dispositivos. La solución usual al problema es utilizar tablas con el atributo align="left" o el atributo align="right", pero eso presenta otra dificultad:

5. Cuando se usa el método aligned table (tabla alineada) del desarrollo responsivo, tus tablas están alineadas a la izquierda o a la derecha en aplicaciones móviles que no soportan media queries.

El método en éste tutorial usa un planteamiento diferente que asegura que tus columnas se apilarán en el centro en dispositivos móviles, incluso en la aplicación de Gmail.  (También puedes fácilmente establecerlas para alinear a la izquierda o a la derecha si lo prefieres.)

Tablas alineadas a la izquierda o a la derecha en sus posiciones en aplicaciones móviles que no soportan media queries. No puedes ajustarlas usando CSS específico para dispositivos móviles
Éste tutorial te mostrará cómo tener tus columnas apiladas en el centro, aún en aplicaciones que no soportan media queries

6. Cuando usas el método tabla alineada del desarrollo responsivo, pierdes la capacidad de alinear contenido verticalmente en columnas adyacentes

Éste tutorial también te enseñará como alinear verticalmente dos columnas en la misma fila hasta arriba o en medio, como si fueran celdas de tabla en la misma fila que estaban usando el atributo valign.

Éste tutorial te enseñará el método 'híbrido fluído', que te permite alinear verticalmente tus columnas arriba, en medio o abajo

1. Comenzamos

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

Rápidamente recorramos todos los elementos en el código de arriba:

!DOCTYPE html PUBLIC ".//W3C//DTD XHTML 1.0 Transitional//EN" es el DOCTYPE que más me gusta-encuentro que no se vence ante los menores caprichos.

<meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> nos da soporte para todos los caracteres Unicode en nuestro documento.

<meta http-equiv="X-UA-Compatible"content="IE=edge" /> y <meta name="viewport" content="widht=device-width, initial-scale=1.0"> son usados aquí para que Windows Phones muestre nuestra versión móvil correctamente.

Incluiremos <title></title> aunque es mejor dejarlo vacío. Una pequeña etiqueta es requerida para validar XHTML, pero algunos clientes de correo Android nativos mostrarán éste título justo antes del preheader en la vista previa de la bandeja de entrada, lo cual generalmente no es lo ideal.

Verás que estoy utililzando una hoja de estilos externa para éste tutorial, pero el planteamiento que tomes depende de tí. Para seguir, ahora deberías crear un nuevo documento llamado styles.css y guardarlo en el mismo directorio de tu archivo HTML. Estaremos definiendo nuestro CSS en la estructura HTML al final.

Después, entre <!--[if (gte mso 9) | (IE) ]> y <! [endif]--> tenemos algún condicional CSS para Outlook para forzarlo a colapsar bordes en todas las tablas y evitar espacios no deseados. Ésta expresión condicional apunta a todas las versiones de Microsoft Outlook (mso) superiores o iguales a la versión 9 (que son todas ellas ya que la versión 9 es la más antigua: Outlook 2000) así como versiones de Outlook que usan Internet Explorer para renderizar (siendo Outlook 2000-2003).

Bajo el cuerpo, primero tenemos una etiqueta <center>, para centrar su contenido y actuar como nuestro portador de propiedades CSS globales útiles (ya que la etiqueta cuerpo con frecuencia no es bien interpretada en clientes de correo basados en la web). También tenemos <div class="webkit"> para versiones anteriores de clientes de correo que funcionan con Webkit (básicamente solo Apple Mail 6 y anteriores, y Outlook 2011 en algunos casos). Éstas versiones anteriores solo soportan max-width en elementos de nivel bloque y la forma más fácil de asegurar que nuestro maquetado se muestra en el tamaño correcto es encerrarlo en éste div, que nos ahorra tener que establecer las anchuras en un media query como en mi tutorial previo. (Gracias a zerocents por esta solución.)

2. Estilos Iniciales

Posteriormente, crea un archivo CSS en blanco llamado styles.css En tu archivo recientemente creado, pega lo siguiente:

Aquí estoy poniendo los márgenes y los padding del cuerpo en cero, las tablas y las celdas de las tablas y poniendo en cero todos los bordes que pudieran aparecer en imágenes enlazadas. Nuestro estilos para las etiquetas table y td tomarán el lugar de los atributos HTML cellpadding y cellspacing. Tu decides si prefieres usar en cambio los atributos HTML; en el pasado siempre ha soportado el uso de un atributo HTML en lugar de una propiedad CSS donde sea posible, sin embargo como he trabajado en proyectos cada vez más largos he descubierto que puede ser más manejable especificar éstos en el CSS, especialmente si generalmente estás trabajando en una plataforma que automáticamente maneja CSS dentro del HTML por tí.

Yo generalmente incluyo un min-width de 100% en la etiqueta <body> para evitar cualquier situación donde el contenido no toma el ancho total de la ventana gráfica en dispositivos móviles, y siempre es una buena idea establecer el color de tu fondo, aún si es todo blanco, para evitar que el color de fondo cause un fallo en Outlook o Lotus Notes.

También tenemos nuestros estilos para .wrapper con unas cuantas propiedades para evitar que el texto se redimensione de una forma extraña en Windows Phone e iOS, así como table-layout:fixed para asegurar que nuestro contenido centrado realmente estará centrado en el correo de Yahoo. Estableceremos un max-width de 600px de ancho en nuestro div .webkit para contener todo en Apple Mail 6 (y anteriores) y Outlook 2011.

Finalmente tenemos una ventana gráfica fija que, en conjunto con nuestras dos metaetiquetas en el head, asegurarán que todo se vea bien en Windows Phones.

3. Crear el Contenedor Estructural Exterior

Comenzaremos con una de los bloques de estructura claves para éste método: una tabla condicional para Outlook que está oculta para todos los demás clientes. Necesitamos éstas porque vamos a usar la propiedad max-width que Outlook no soporta. Por lo tanto necesitamos crear tablas especiales solo para Outlook con anchuras explícitas en pixeles para contener todo en Outlook.

Nuestra tabla condicional para Outlook es  usada porque Outlook no soporta la propiedad max-width

Así en nuestro archivo HTML, borremos el marcador de posición [content goes here] (el contenido va aquí) y pegamos el siguiente códgio. Intento mantener mis etiquetas de código condicional alineadas a la izquierda con el mismo nivel de indentación para legibilidad, pero la manera de formaterlas queda a tu elección.

Nota: no hay aplicación de estilo en mis etiquetas de tabla condicional. Voy a usar la herramienta inliner de Campaign Monitor, inliner.cm, que también aplica estilos inline en tablas condicionales. Si vas a usar un inliner diferente entonces, podría no hacer ésto, asi que asegúrate de agregar cellpadding="0" cellspacing="0" border="0" a tus tablas condicionales para Outlook.

Dentro de nuestra tabla condicional, verás que tenemos un <table class="outer"> que es nuestro elemento de estructura exterior clave para cada cliente excepto Outlook.

Queremos que ésta tabla exterior sea 100% ancha en pequeñas pantallas pero en pantallas grandes solo queremos que tengan un ancho máximo de 600px. Por lo tanto vamos a establecer su ancho hasta el 100% y darle un max-width de 600px.

Nuestra tabla es establecida para tener un ancho de 100% hasta que alcance una máximo de 600px.

Consejo útil: Para un fácil y rápido almacenamiento en buffer en dispositivos móviles, sin tener que lidiar con padding o media queries, cambia el width de tu tabla de 100 a 95%.

Así que peguemos éstos estilos en nuestro archivo styles.css:

También tenemos Margin: 0 auto; establecido aquí para centrar nuestra tabla en Yahoo en Chrome. Aunque éste uso del margen es para Yahoo, siempre pongo en mayúsculas Margin para que Outlook.com no lo quite-una solución gracias al comentario de Wiktor en éste artículo de blog.

Ahora tenemos nuestra estructura exterior, es momento de comenzar a añadir algún contenido.

4. Agregar una imagen en todo el ancho

Primero, descarga los archivos del tutorial y mueve el directorio /images para que esté en el mismo directorio de tu archivo index.html.

Ahora agreguemos una clase de full-width-image al td dentro de nuestra tabla .outer y luego remplazaremos nuestro marcador de posición [content goes here] con una etiqueta de imagen, para que toda la tabla se vea así:

Notarás que no me he molestado en poner ningún atributo width o height en la imagen. Voya a manejar todo esto en el CSS que vamos a añadir, que se ve así:

Ésto nos lleva a un punto extremadamente importante concerniente a imágenes cuando se usa éste método.

Imágenes siempre deben aparecer en su tamaño físico de pixeles

Éste método se trata de usar porcentajes para mantener las cosas bien y fluídas. Por lo tanto, casi siempre queremos que el ancho de nuestras imágenes se establezcan en 100% del contenedor. Si queremos hacer ésto, tenemos que insertar nuestras imágenes con el tamaño físico de pixeles correcto. Ésto es porque Outlook 2007, 2010 y 2013 no escalarán las imágenes hacia arriba o hacia abajo desde sus dimensiones fisicas a meno que establezcas una anchura explícita de pixeles en la imagen. Si fueras a colocar una imagen de una anchura de 1200px en una celda de 600px de ancho y establecer su anchura en 100%, Outlook desplegaría esa imagen con un ancho de 1200px. Por lo tanto si tienes una celda de 600px de ancho (en computadoras de escritorio), necesitas usar una imagen de 600px de ancho.

Para imágenes que son más chicas que la anchura mínima soportada por tu pantalla, podrías establecer una anchura explícita en pixeles en éstas (por ejemplo, 100px) y usa imágenes de alta resolución, porque en aplicaciones que no usan media queries su anchura siempre va a ser de 100px, que encaja muy bien dentro de cualquier ventana gráfica de dispositivos móviles. Si tuvieras una columna de 350px de ancho, podrías no establecer la imagen para que fuera de 350px de ancho, porque si fueras a ver esa imagen en la aplicación de Gmail en una ventana gráfica de 320px, sería demasiado ancha.

Con frecuencia es útil asegurar que todas las imágenes tengan su anchura establecida en 100%, aún si son más angostos que la ventana gráfica del dispositivo móvil más pequeño, porque te da más flexibilidad cuando se agrega mejora progresiva con media queries.

Mi regla de aceptación es que cualquier imagen siempre debería aparecer en su tamaño de pixeles físico a menos que sea un ícono más pequeño de 100px de ancho.

Así con todo eso en mente, hemos guardado una imagen llamada header.jpg que es exactamente 600px de ancho y colócala en el directorio de nuestras imágenes. Tómala, o guarda la tuya, y ahora podemos tener una vista previa de tu archivo HTML y apreciar cómo la imagen fluidamente se redimensiona basada en el tamaño de la ventana gráfica.

5. Agregar un Maquetado de una sola Columna.

Agrega otra fila a la tabla .outer con éste marcado:

Y agrega éste estilo a tu archivo CSS:

Notarás que he usado la etiqueta <p> y un conjunto de clases para darles estilo. Me gusta usar párrafos para aplicar estilo al texto, y puedes manejarlos realmente fácil por la solución de la M-Mayúscula Margin que mencioné anteriormente. También uso <p class="h1"> en lugar de <h1> porque Outlook.com tiene algunos estilos de h1, h2 y h3 que siempre sobreescriben tu estilo.

Así en el CSS de arriba establecimos un padding de 10px para nuestra columna, hemos restablecido todos los márgenes en <p>, establecido algunos estilos básico para los enlaces y mis clases .h1 y .h2, luego aseguramos que el contenido de nuestra columna estén alineados a la izquierda con párrafos con estilos aplicados.

Ahora a lo emocionante... ¡Columnas múltiples!

6. Agregtar un Maquetado de Dos Columnas*

*que estarán centradas cuando se apilan

Vamos a crear un maquetado de dos columnas en el escritorio que se apilan a una sola columna centrada en dispositivos móviles

Primero agrega ésta nueva fila a la tabla .outer. Contiene una celda con la clase .two-column y, dentro de ella, una tabla condicional para Outlook con dos columnas de 50% de ancho.

Éstas columnas condicionales son importantes, porque sin ellas Outlook no dejará que nuestras dos tablas flotantes se coloquen adecuadamente lado a lado. Como Outlook no soporta tampoco max-width, éstas columnas ayudan a restringir cada columna al tamaño correcto.

Visualizando la estructura de dos columnas

Ahora remplaza cada uno de los marcadores de posición [column to go here] con ésto:

La forma en la que vamos a tener flotando las dos columnas lado a lado en el escritorio, pero apiladas en el centro en dispositivos móviles, es usando una combinación de text-align:center y display:inline-block. Todos los elementos inline e inline-block obedecen a la propiedad text-align. Por lo tanto, si encerramos nuestras tablas en un div que se establece en inline-block, podemos muy fácilmente establecer su alineación cuando se apilan al establecer la propiedad text-align en su contenedor. Puedes elegir alineación izquierda, centro o derecha, y tus divs inline-block obedecerán. Puedes simplemente establecer la misma tabla en display:inline-block, pero solo si no vas a estar anidando más tablas adentro. Las cosas pueden empezar a comportarse de manera rara si anidas tablas dentro de tablas inline-block, así que si necesitas anidar, siempre asegúrate que el contenedor inline-block es un div.

Apliquemos estilo a nuestra celda contenedor .two-column con nuestra alineación elegida. También vamos a agregar font-size: 0 para librarnos de cualquier separación entre nuestras columnas dentro de ésta celda.

Ahora aplicaremos estilo a nuestro div inline-block que actúa como nuestra columna:

Estamos usando un ancho de 100% hasta un max-width de 300px para que ésta columna tenga un ancho de 100% en ventanas gráficas que son más pequeñas de 300px de ancho.

Puedes establecer tu vertical-align a lo que gustes: top, center, o bottom. Establecer vertical-align en top significa que cada columna actúa como si fuera una celda de tabla que usa la propiedad de HTML valign="top", mientras estableciéndolo a middle es como si tuviera valign="middle". Nota que puedes tener muchas filas de éstos divs dentro de la misma celda y la alineación vertical siempre dictará la alineación vertical en una base fila por fila. ¡Es muy elegante! También asegura que cualquiera que escojas coincide con el valign que estableciste en tu tabla condicional Outlook porque Outlook no soporta vertical-align. Si tienen algún problema con la alineación en Outlook, olvidar establecer el valign en las tablas condicionales es generalmente la causa.

Luego añadiremos una tabla con dos filas para cada columna. Ésto is para que cuando todo se apila en dispositivos móviles, cada imagen tenga su correspondiente texto directamente debajo.

Así que remplacemos nuestros dos marcadores de posición [content goes here] con lo siguiente:

Nuestra imagen aquí tiene una anchura de 280px. Como se discutió arriba, ha sido guardada en las dimensiones de pixeles para encajar en la celda en la que la colocaremos. Cada columna tiene 300px de ancho con 10px de padding a cada lado, dejando 280px para nuestra imagen.

Posteriormente aplicaremos estilo a la clase .contents al darle un anclho de 100%:

Y luego agreguemos nuestro estilo bajo el maquetado de dos columnas para establecer nuestro tamaño de fuente y alineación de texto, asegurando que nuestras imágenes se muestren en un ancho de 100%, y para dar a nuestro texto debajo un poco de padding:

Ahora deberías tener un maquetado de dos columnas, que se apila verticalmente cuando redimensionas el navegador y se encoge de forma correcta cuando haces la ventana gráfica menor a los 300px.

7. Añadir un Maquetado de tres columnas

De nuevo vamos a crear columnas lado a lado que se apilan en dispositivos móviles al usar la combinación de text-align: center y display: inline-block.

Vamos a usar text-align: center para que nuestra columna se apile en el centro, pero puedes también usar alineación de texo izquierda o derecha. Aquí está un ejemplo de como se apilarán elementos alineados al centro y a la izquierda:

Ejemplo de cómo se apilarán tres columnas, usando text-align: center en un contenedor
Ejemplo de cómo tres columnas se apilarán, usando text-align: left en un contenedor

Así que repetiremos el proceso de dos columnas con una columna adicional. Agrega ésta nueva fila a la tabla .outer. (Generalmente) prefiero usar anchura en porcentajes para las celdas en mis tablas condicionales para Outlook, pero en éste caso es más fácil establecer la anchura de cada uno en 200.)

Ahora agregamos el siguiente CSS para dar algo de padding adicional a ésta fila, así como establecer todas las propiedades que usamos en el maquetado de dos columnas para hacer que nuestras columnas se comporten como las queremos. También establecerá nuestros estilos para las columnas del div que añadiremos, que tendrán 200px de ancho en esta caso.

Insertemos ahora nuestras columnas al remplazar los marcadores de posición [column to go here] con una tabla cada uno:

¡Y terminamos! Ahora deberías tener un maquetado de tres columnas, donde las columnas se apilarán en ventanas gráficas más angostas.

Debiendo al hecho que éste maquetado tiene un número impar de columnas, a veces puedes encontrarte con dos columnas mostrándose en la fila superior, con solo una columna debajo. Mientras pienso que puedes realmente hacer ésta apariencia magnífica si diseñas para éste escenario, a veces puede parecer un poco desequilibrado. Con frecuencia la mejor forma de resolver ésto es o utilizar alineación a la izquierda, o usar múltiples filas de tres columnas para que cuando el contenido se apile en resoluciones de tamaño medio aún haya un número par de columnas por fila.

Agregar un maquetado de tres columnas con múltiples filas

Cuando quieres agregar más filas en tus maquetados de múltiples columnas puedes añadir tantos elementos inline-block a una sola celda contenedora como quieras. De ésta forma, cuando la ventana gráfica se hace demasiado angosta para dar cabida a todas las columnas, simplemente se adaptan para caber en el espacio disponible.

Mientras no necesites separar las filas de divs para la mayoría de los clientes, no necesitas agregar <tr> adicionales a tu tabla condicional para Outlook.

Así es como funciona nuestra tabla condicional para Outlook para mantener nuestras filas y columnas separadas

Tratemos ésto al comenzar una nueva fila en nuestra tabla .outer con la clase de .three-column. Aquí tenemos una nueva fila de tres columnas con una tabla condicional dentro. Verás que hay tres columnas en nuestra tabla condicional y luego finalizamos la fila de la tabla condicional con </tr> y abrimos un nuevo <tr>, que contiene otras tres celdas de 200px de ancho.

Después agregaremos una tabla como ésta a cada celda condicional, remplazando el marcador de posición [column to go here]:

Ahora si redimensionas tu ventana, de nuevo verás que las columnas se apilan para llenar el espacio disponible. Tres columnas se reducirán a dos columnas con tres filas, hasta que se colapsan finalmente a una sola columna con seis filas.

Agregar más columnas

No agregaremos mas maquetados multicolumnas en éste tutorial, pero puedes tener tantas columnas en un maquetado como desees. Todo lo que necesitas hacer es asegurar que tu contenido bloquea todo lo añadido a la anchura de tu contenedor, y que tu tabla condicional para Outlook tiene el número correcto de celdas y filas para contenerlas.

8. Agregar un Maquetado "Barra Lateral" de Dos Columnas

Luego crearemos un maquetado de dos columnas con una columna de 500px de ancho y después una barra lateral más angosta de 100px de ancho para un ícono.

Primeramente agregaremos una fila y una celda con la clase de .left-sidebar y dentro de ella presentaremos nuestra tabla condicional para Outlook que tiene una sola fila y dos columnas asimétricas:

Después en cada columna, remplazando el marcador de posición [column to go here], añadiremos una tabla. Ésta vez llamaremos una .column .left y una .column .right porque tienen diferentes anchuras.

Nota: aquí estoy usando múltiples clases en un solo elemento. Algunas herramientas inliner y/o ESPs podrían no soportar hacer esto, así que revisa primero tu sistema o plataforma. Como se mencionó arriba, uso inliner.cm para poner mi CSS en el mismo HTML, que no soporta múltiples clases.

En la primera columna, agrega la tabla de left-hand que contiene nuestro ícono:

Como éstas imágenes son muy pequeñas y siempre queremos que aparezcan del mismo tamaño, es seguro darles una anchura en pixeles.

Luego en la segunda columna, agrega la tabla derecha con el texto y el enlace:

Éstas tablas son super-sencillas con nada anidado, así que guarda el marcado que voy a establecer las tablas en display: inline-block en lugar de encerrarlas en un div. Como se discutió arriba, ésto es solo práctico cuando no vas a estar anidando más elementos adentro. Si estarás anidando mucho, encierra ésta tabla en un div, y pon la clase .column .right en ella.

Después apliquemos estio al contenedor y establezcamos las columnas:

Y finalmente establezcamos algún estilo para el texto y un color del enlace:

Ahora deberías tener tu maquetado de barra lateral izquierda y cuando redimensiones tu navegador para hacerlo más pequeño, el ícono saltará arriba del texto y se colocará en el centro.

9. Agregar un Maquetado "Lateral" al revés

Ahora queremos duplicar nuestro maquetado de barra lateral, y ésta vez queremos que el ícono esté en el lado derecho para crear interés visual en las computadoras de escritorio. Pero en los dispositivos móviles queremos que el contenido se apile exactamente en el mismo orden que nuestro maquetado de barra lateral previo, para que el ícono esté arriba del texto.

Primero, vamos a copiar y pegar la fila entera con nuestro .left-sidebar celda, y lo único que vamos a cambiar es la clase de la celda contenedora de .left-sidebar a .right-sidebar:

Absolutamente todo lo demás es exactamente lo mismo.

Lo que vamos a hacer es usar dir="rtl" (significa que la dirección es de derecha a izquierda) para nuestra ventaja. Ésta propiedad es para denotar alfabetos que se leen de derecha a izquierda, como el arábigo. Pero en nuestro caso simplemente va a decir a cada cliente de correo renderice nuestros elementos en el orden contrario.

Nuestros elementos se apilarán en el orden contrario si dir="rtl" se establece en su contenedor

Primero, para el contenedor (.right-sidebar), necesitas agregar dir="rtl". Ésto es decirle que renderice nuestras tablas flotantes dentro de derecha a izquierda. Así nuestra etiqueta de apertura ahora se ve así:

Luego, en el código condicional de Outlook, también necesitamos agregar dir="rfl" a <table> porque vamos a decirle a la tabla que renderice los <td> en el orden contrario.

Así que nuestro comentario condicional de apertura se debería ver así:

Y finalmente, necesitamos agregar dir="ltr" a nuestras tablas .column-left y .column-right, porque tienen el contenido dentro de ellas, y ya que el contenido está en Inglés, necesita ir de izquierda a derecha. Si no establecemos ésto en éstos elementos, heredarán la dirección de derecha a izquierda de sus elementos padres.

Nuestra .column-left debería verse así:

Y nuestra .column-right debería verse así:

Así para recapitular, nuestra fila entera debería ahora verse así:

Y finalmente, agreguemos nuestro estilo, que es exactamente el mismo que nuestra .left-sidebar, excepto el color del enlace:

¡Ahí lo tenemos! Así que ahora tenemos dos barras laterales en lados opuestos, pero cuando todo se apila en dispositivos móviles ambas barras laterales aparecen arriba del texto.

10. Agregar Mejora Progresiva con Media Queries

Ahora has completado una plantilla de correo electrónico que es responsiva en cualquier lugar ¡sin una sola media query! Pero claro hay unos cuantos clientes de correo que soportan media queries, así que ahora podemos ir sobre mejora progresiva de nuestro ya fabulosa plantilla con algunas modificaciones para hacer que todo se vea fantástico en un cliente como iOS Mail.

Primero, haremos que todas nuestras columnas se vean con una anchura de 100% de la ventana gráfica para cualquiera de hasta 400px. También limitaremos nuestras imágenes de tres columnas hasta un 50% de ancho para que no sean demasiado grandes. Todo lo que tenemos que hacer es restablecer el max-width de éstas columnas porque, como recordarás, ya tienen una anchura de 100% y es justo el max-width lo que está restringiéndolas.

Así que agreguemos ésto a tu archivo CSS:

Luego, entre una anchura de 401px y 600px, agregaremos lo siguiente para que los maquetados de dos y tres columnas aparezcan como lo harían en una computadora de escritorio, pero encogidas para caber.

Éstos son ajustes arbitrarios para demostrar lo que es posible-puedes experimentar con ésto tanto como quieras para lograr tu resultado deseado en diferentes tamaños de dispositivos que soportan media queries.

11. Poniendo tu código dentro del HTML

Finalmente, si necesitas poner tu código en línea, toma el contenido de style.css y pégalo en el <head> de tu documento index.html entre las etiquetas <style type="text/css">. Posteriormente copia y pega todo el archivo en la caja de inliner.cm y espera los resultados. Una vez que procesamos, copia el contenido de la caja ¡y estarás listo para actuar!

¡Y ahí lo tienes!

¡Bien hecho! Ahora tenemos un correo electrónico HTML responsivo totalmente funcional usando menos de veinte líneas de media queries.

Algunas notas y consejos finales

  • He encontrado en éste método de desarrollo de correo electrónico que la sencillez y la uniformidad son claves. Las cosas comienzan a salirse de control cuando tienes diferente padding en diferentes columnas. Para éste tutorial notarás que he mantenido el padding uniforme en 10px en la clase .inner que aplica a cada maquetado sencillo. Ésto es importante porque cuando todo se apila en dispositivos móviles quieres que el padding sea uniforme.
Siempre ten la misma cantidad de padding a la izquierda y a la derecha de tus elementos para que el padding sea uniforme en dispositivos móviles en clientes que no soporten media query
  • A veces puedes necesitar calcular hacia el exterior para establecer cuál va a ser la anchura exterior de tu maquetado, basado en cuál es el mejor valor uniforme de padding, en lugar de decidir sobre la anchura exterior y luego trabajar a tu manera hacia adentro.
  • Es frecuentemente una buena idea diseñar en en navegador con éste método, ya que con frecuencia puede ser todo un desafío actualizar ciertos diseños para que funcionen con éste planteamiento.
  • Cuando se usa éste método es muy seguro empezar a diseñar correos electrónicos que son mucho más anchos de lo habitual porque sabes que el maquetado va a ajustarse a sí mismo para encajar en ventanas gráficas más pequeñas, aún en clientes de correo basados en web. El único punto débil es Outlook, que aún requiere esas tablas condicionales para que todo se vea bien, y por lo tanto los usuarios de Outlook siempre van a ver todo el coreo electrónico en su máxima anchura. Aunque todavía necesitas tener en mente éste común denominador más bajo, definitivamente hay espacio para moverse más allá de la restricción usual de 550-600px que normalmente colocamos en el correo electrónico.
  • Y finalmente, siempre asegura que estás insertando imágenes en su tamaño físico en pixeles. Una buena forma de asegurar que vas a hacer ésto es codificar primero tu maquetado, luego usar el inspector en las herramientas de tu navegador para revisar que tan grande es el espacio final. Puedes luego asegurar que tu imagen sea creada a esas dimensiones exactas. Recuerda revisar ésto otra vez al final solo para asegurarte que todo está correcto. Si no haces ésto, Outlook mostrará gentilmente tu error porque va a desplegar cada imagen en sus dimensiones físicas.

Los íconos

Gracias de nuevo a Pierre Borodin por todos los íconos usados en mis tutoriales.

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

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