Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Creando un sencillo email HTML responsive

by
Length:LongLanguages:

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

En este tutorial os mostraré cómo crear un sencillo email HTML responsive que funcionará en todos los clientes de email, incluyendo todos los nuevos clientes de correo de smartphones y aplicaciones. Hace uso de 'media queries minimal' y un enfoque 'fluid width' para asegurar la máxima compatibilidad.

Media Queries: Sólo la Mitad de la Solución

Hubo un tiempo en el que las 'media queries' eran suficientes para conseguir que emails responsive funcionasen en las aplicaciones de correo de iOS y Android, ambos soportaban 'media queries'.

Desde entonces, hubo una proliferación de aplicaciones de correo creadas tanto para iOS como para Android, con diversos grados de soporte para los métodos de desarrollo de los emails responsives.

La más notable es la última actualización de la app de Gmail para Android, la cual es el doble de popular que la aplicación de correo por defecto para los usuarios de Android (que ahora abarca el 11% de todas las aperturas). Nunca soportó 'media queries', y sigue sin hacerlo, sin embargo ahora escala tus emails comprimiendo el tamaño de la tabla exterior para encajarla al área visible de la pantalla. Es difícil de controlar y, cuando todo tu correo electrónico se basa en 'media queries' para visualizarse correctamente en móviles, genera algunos resultados muy desagradables.

Por qué 'Fluid' es la Nueva Moda

Las buenas noticias son que tú puedes diseñar y construir un email que se vaya a ver genial en todas las aplicaciones de correo, incluyendo aquellas que no soporten 'media queries'. Puedes hacer ésto utilizando una estructura 'Fluid'.

Hay, sin embargo, unos cuantos compromisos de diseño que debes realizar. Aquellas geniales plantillas con el mismo número de columnas que se apilan en una única columna no funcionan demasiado bien usando este método. Si puedes aprender a vivir sin ellas, hay unos cuantos diseños muy funcionales que pueden funcionar extremadamente bien.

Ésto es lo que crearemos hoy:

Final-Product-Both

Comenzando

Vale, empecemos por nuestra plantilla vacía.

Lo que estamos creando aquí es nuestra página básica con su header, doctype y tabla de contenido con un color de fondo aplicado (tanto al cuerpo como a la tabla contenedora más grande, ya que el estilo de la etiqueta del cuerpo no es totalmente compatible). Para más información sobre esta configuración básica, mira Construir una plantilla HTML para email.

He añadido nuestra tabla de contenido principal en el centro con una clase de 'contenido'.

Presta atención

Nota: Te darás cuenta de que en este tutorial pondré el CSS al principio de nuestro documento. Generalmente coloco los estilos al principio cuando voy a reutilizarlos, y los pongo todos seguidos.

Importante: Siempre que uses reglas CSS al principio del documento, debes usar una herramienta para traerlos todos seguidos al final del proceso. Si usas un servicio como MailChimp o Campaign Monitor, automáticamente te ofrecerán poner los estilos por ti cuando importes tu diseño. Debes hacer estos porque algunos clientes, como Gmail, ignorarán o quitarán tus contenidos dentro del tag <style>, o simplemente lo ignorarán. Puedes también usar una herramienta como Premailer para poner tu propio CSS. Si usas Premailer o una herramienta similar, recuerda quitar tus 'media queries' antes de procesar (queremos que permanezcan intactas), luego reinsértalas al final. MailChimp y Campaign Monitor automáticamente tienen esto en cuenta por ti.

Ocultando estilos móviles de Yahoo!

Te darás cuenta de que el tag 'body' tiene un atributo extra. A Yahoo Mail le encanta interpretar tus 'media queries' como un evangelio, así que para prevenir esto, es necesario usar selectores de atributos. Encontré que la manera más sencilla de hacer esto (como sugieren en Email on Acid) es sencillamente añadir un atributo arbitrario al tag 'body'. Utilizo el sugerido 'yahoo' pero podría ser cualquiera que os guste:

Puedes seleccionar clases específicas usando el selector de atributo de tu tag 'body' en el CSS.

Dos Trucos Para Dominar el Método Fluid

Como puedes ver, nuestra tabla de 'contenido' está especificada a un ancho del 100% y así será fluid y cogerá el ancho total de la pantalla de los smartphones o tabletas. También estableceremos un ancho máximo de 600px para evitar que el email ocupe la pantalla entera en dispositivos más grandes.

Ahora hay dos pequeñas peculiaridades que debemos tener en cuenta para asegurarnos de que todo se muestra según lo previsto en todos los clientes de email. Estos dos arreglos son gracias al excelente tutorial de Tina Yesobre este método, el cual está disponible en FogCreek Blog.

1. Superando el lastre del soporte para Max-Width

Desafortunadamente, max-width no está soportado en todos los clientes de email. Para que nuestro email se muestre correctamente en Outlook y Lotus Notes 8 & 8.5, necesitamos envolver cada tabla en código condicional que crea una tabla con un ancho establecido para contenerlo todo dentro. Se dirige a IE (que es el motor de renderizado usado por Lotus Notes) y Microsoft Outlook.

Envolvemos nuestra tabla entre código condicional:

2. Un arreglo para Apple Mail

Paradójicamente, Apple Mail (normalmente un muy avanzado cliente de email) no soporta tampoco la propiedad max-width. Soporta sin embargo las 'media queries', por lo que podemos usar una que ponga el ancho de nuestra clase 'contenido' de la tabla, siempre que el dispositivo pueda mostrar los 600px.

Creando la Cabecera

Ahora insertaremos la primera fila de nuestra tabla - la cabecera. Añade el siguiente estilo a la fila que acabamos de crear:

Y después en tu CSS, añade el 'padding' para la cabecera:

Añadiendo la primera fila responsiva

Ahora vamos a crear nuestra primera fila responsiva. La forma en que haremos estos es creando dos tablas en las que 'float' una al lado de la otra usando la propiedad HTML 'align'.

Columna Izquierda

Cambia nuestro título "Hello!" por lo siguiente:

Creamos nuestra tabla de 70px y también añadimos un 'padding' que actuará como separador de las dos columnas. El 'padding' de debajo añadirá un poco de margen cuando las dos columnas se solapen en el dispositivo móvil.

Columna Derecha

Crearemos la columna derecha otra vez alineando la tabla a la izquierda. Esta tabla tendrá un ancho de 445px, lo que nos deja 25px para dejar en el lado derecho. Esto es muy importante porque Outlook automáticamente apilará las tablas si no hay al menos 25px de separación entre cada fila.

Responsive-AlignedTables

Tan pronto como permitas al menos 25px de separación, tus tablas se comportarán según lo esperado.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
Perminite al menos 25px de separación para impedir que Outlook apile tus tablas

En la más ancha, la tabla de la derecha, vamos a usar el mismo sistema que utilizamos para nuestra tabla contenedora, lo que implica crear una clase y añadir el código condicional también. Queremos que esta tabla sea 100% de ancho en el móvil, donde se desplegará por debajo de la tabla de la izquierda.

Aquí puedes ver que he creado una clase llamada 'col425' para esta tabla, nuestra columna de 425px de ancho. He envuelto la tabla entre código condicional que la encapsulará en una tabla de 425px de ancho. Añadiremos también nuestra clase al 'media query' que hemos creado para Apple Mail.

Ahora dentro de nuestra celda añadiremos la cabecera con estilo.

He añadido algunas clases a cada celda para darles estilo, así como otros estilos que utilizaré más adelante para tipos de texto:

Nuestra cabecera está ahora completa, y puedes ver cómo las dos columnas se apilan en el móvil. (Para previsualizar ésto mientras trabajas, necesitarás comentar temporalmente las 'media queries' min-device-widht, porque están obligando a fijar el ancho como el del escritorio).

01-header

Creando una Sóla Fila de Columnas de Texto

Para crear una sóla fila de columnas de texto, simplemente añadiremos una nueva fila a nuestra tabla '.content'. Añadiremos una clase 'innerpadding' a estas filas con unos valores de 'padding' reutilizables. También añadiremos una clase 'borderbottom' para aplicar un borde a cada fila.

Nuestro CSS para esta sección:

Creando el Artículo a Doble Columna

Ahora crearemos una fila responsiva exactamente igual que nuestra cabecera, pero con una pequeña diferencia de dimensiones para así poder tener una imagen más grande.

Hemos añadido un botón aquí con la clase 'buttonwrapper'. Contiene una celda con margen interior y un color de fondo, y además un link de texto en el interior. Prefiero utilizar este método ya que te permite tener botones con ancho 'fluid' lo cual es muy útil cuando creamos una plantilla reutilizable, donde el ancho de cada botón será diferente cada vez que se utilice. Si tienes un ancho fijo para tus botones seguramente prefieras utilizar el Bulletproof Button Generator antes que el Campaign Monitor.

Nuestro estilo para el botón:

Así como nuestro ancho para esta nueva clase 'col380', añadiremos nuestro tamaño a nuestra lista de estilos para tener en cuenta a Apple Mail. Ahora se vería tal que así:

Email-TwoCol

Creando la Imagen de una Columna

Esta es una fila muy simple; sólamente estableceremos la imagen para que sea el 100% del ancho del email y nos aseguraremos que su altura se establezca automáticamente usando CSS.

En nuestro CSS:

Creando la última Fila de Texto Plano

Finalmente añadiremos una fila de texto sin el borde de abajo:

Creando el Footer

Para crear el footer, añadiremos una nueva fila a la tabla interior. Una de las filas contendrá a otra tabla para nuestros iconos de redes sociales.

Añadiremos los estilos requeridos por nuestro footer al CSS:

Optimizando los Botones Para Móviles

En móviles, es ideal que el botón entero sea un link, y no sólo el texto, porque es mucho más difícil apuntar a un pequeño link de texto con tu dedo. Al no ser posible hacer funcionar esto en todos los clientes de escritorio (el 'padding' no está totalmente soportado en los tags <a>), es algo que añado a las versiones móviles utilizando 'media queries'.

Tendremos que quitar el color de <td> al cual está siendo aplicado, y luego aplicarlo de vuelta al tag <a> con mucho 'padding'.

Usaré tanto max-width como max-device-width en este 'media query' con el fin de evitar un bug en Outlook.com de IE9.

Ahora cuando pulses en cualquier sitio de tu botón coloreado en tu móvil, es un link!

Mejoras a Mayores con los 'Media Query'

Si quieres, puedes empezar a hacer mejoras a tu plantilla aplicando nombres de clases a elementos que quieras controlar, y luego creando nuevas reglas dentro del 'media query' que hemos creado antes.

Como ejemplo, convertiremos nuestro link de 'darse de baja' en un botón, añadiendo una clase al link:

y añadiendo el siguiente CSS al media query:

Email-Footer-MQs

Puedes también seleccionar las clases .innerpadding, .header y .footer para reducir la cantidad de 'padding' en los clientes que soporten 'media queries'.

Probar y Listo!

Finalmente, como siempre, asegurate de validar (usando el validador W3C — sólo deberías obtener un error para el atributo propietario 'yahoo' en el tag del body) y probarlo realmente a fondo usando dispositivos reales y un previsualizador web como Litmus o Email on Acid.

Disfruta creando emails responsivos que se vean bien en cada cliente de email!

¡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.