Diseño responsive: cómo dominar los correos electrónicos responsive

En este artículo te mostramos cómo dominar las tablas, estilos en línea y soporte inconsistente de CSS para crear un moderno diseño responsive para tus correos electrónicos.

Es el momento que temías: el proyecto de rediseñar todos los correos que llegan a los consumidores. Convertirlos en responsive es tu responsabilidad. Has escuchado los rumores que diseñar correos electrónicos significa programar como en 1999, crear tablar y añadir estilos en línea y tirar las mejores prácticas de compatibilidad por la ventana. Desafortunadamente, los rumores son ciertos.

Para los principiantes, las tablas son la única forma confiable de crear diseños consistentes de correos. Los estilos en línea son un requisito porque muchos clientes de correos electrónicos no admiten hojas de estilo externas y Gmail no admite el elemento <style>. A eso añade la compatibilidad inconsistente de CSS entre clientes de correos, y parece que los correos electrónicos responsive están hechos para el desastre.

¡No te preocupes! En este tutorial, te ayudaremos a poner tus correos en forma y listos para la alfombra responsive. Te mostramos:

• Qué es lo importante del diseño —y cómo un poco de investigación te ahorrará mucho tiempo.
• Por qué necesitas una plantilla (o tres) sostenible y reusable y cómo diseñar una.
• Cuándo y cómo usar los media queries y el siempre controversial !important
• Cómo hacer que tu clientes móviles, de escritorio y web trabajen juntos (y de quiénes cuidarse)

Empecemos. Al iniciar el diseño de un correo electrónico, lo primero y más importante es establecer una audiencia. ¿Dónde revisan sus correos y qué tipos de dispositivos usan? ¿Cuánto tiempo de invierten revisando cada correo? ¿Son más visuales o analíticos?

Necesitas determinar los dispositivos y clientes desde los cuales tus usuarios revisan sus correos. Apuntar hacia dispositivos y cliente específicos te limita el trabajo de implementación y te ahorra tiempo. Por ejemplo, saber que la mayoría de tus usuarios revisan sus correos en dispositivos móviles significa que puedes pasar más tiempo concentrado en diseño de correos móviles que de escritorio. O si sabes que solo el 0.5 % de tus clientes usan Outlook2000, tal vez quieras no admitir ese tipo de cliente.

Elementos de diseño

Conocer los elementos que la mayoría de tus consumidores usa te ayuda a diseñar para un minimum touchable area (MTA) (área táctil mínima). Esto puede ser visto como el tamaño de un botón para dispositivos móviles.

Con frecuencia escuchas el uso de 44 px por 44 px en discusiones de diseño móvil acerca de MTA. Desafortunadamente, estas cifras llegan de las normas de interfaz humana del primer iPhone. Es otras palabras, están bastante desactualizadas. Las cifras más precisas deben ser basadas en el tamaño promedio del pulgar humano (cerca de 0.4 pulgadas) y los píxeles por pulgada (PPP) del dispositivo.

Un rápido cálculo te dará la dimensión mínima de píxeles (MPD por sus siglas en inglés)

El contenido above the fold (encima de doblez) es otro aspecto crucial del diseño responsive que debes considerar. Tu información más importante debe ir en la parte superior de cualquier dispositivo. Si tu imagen destacada es muy larga y tiene márgenes enormes, tu texto título puede ser empujado debajo del doblez dispositivos móviles.

Incluso es posible que las personas no piensen en desplazarse hacia abajo (scroll), dejando de lado tu correo. Ten esto en mente cuando diseñas tu correos y asegúrate de usar una suite de pruebas para correos o una biblioteca de dispositivos para que puedas ver cómo tu contenido se ve en distintos móviles y clientes de correos electrónicos.

Una vez que tengas un diseño inicial, la mejor idea es realizar pruebas A/B para determinar los tipos de correos electrónicos y diseños que son más efectivos para tu usuarios. Se cree que las imágenes generan más compromiso, pero, a veces, los correos con texto resultan en mejores tasas de clics. La única forma de saber esto y realizando pruebas a todos tus correos.

Usando plantillas

Las plantillas pueden ahorrarte tiempo si sigues el principio DRY (Don’t repeat yourself – No te repitas). También te permite abstracción de programación y el reuso de estilos y snippets en varios tipos de correos. Es probable que cuentes con una plantilla principal que contenga estilos bases para todos tus correos, elementos snippet para partes de programación que aparecen en la mayoría de tus correos y varias plantillas únicas que representan un correo.

Considera tu plantilla principal como un tipo de contenedor para todos tus correos. Usa un max-width de 550×600 px, una cifra basada en la hoja de previsualización típica de clientes de correos. Con el max-width, el contenido quedará dentro de aquellos bordes, asegurando que los usuarios no tengan que desplazarse o escanear de lado a lado. Ten en mente que OutLook 2007, 2010 y 2013 no son compatibles con max-witdh.

Lo siguiente que debes considerar los elementos de diseño que son probables que reuses. Por ejemplo, tal vez usus el mismo encabezado, pie de página y llamadas a la acción de social media en muchos de tus correos. Estas son tus plantillas snippets. Para tus snippets, usa un sistema de plantillas que rompan esas proporciones de programación en sus propios archivos separados. Luego, cada correo que use esos snippets puede incluir un archivo abstracto en un plantilla única, lo que te ahorra la escritura de los mismos código una y otra vez.

Derribando las tablas

Mozzila Developer Network afirma que «antes de la creación de CSS, los elementos HTML <table> eran usados como un método para diseño de páginas web. Ya no se recomienda esto desde la llegada de HTML4, y el elemento <table> no debería ser usado para este propósito». Sin embargo, cuando se habla de correos electrónicos, sabemos que las tablas son necesarias para el diseño.

Sin un elemento <table> externo, todos los correos desaparecerían del Apple Mail y Outlook 2011. Pero, incluso si usamos un elementos <outer> inicial, solo sería el inicio. Mientras más complicado el diseño, más complicado el <table>.

Ya que los correos contienen multitudes de tablas anidadas, los comentarios, usualmente, nos salvan el día. Añade comentarios afirmando el propósito de una tabla al inicio y fin de los HTMLs de la página para ayudarte a ti y a tus colegas a leer con rapidez tus códigos de correo.

Necesitas configurar <table> en display:block o los clientes de correos de Chrome ignorarán tu max-width. Esto es algo que debes tener en mente si notas problemas con tus anchos de tabla.

Estilos en línea

Como se menciona líneas arriba, debido a inconsistencia de compatibilidad de <style>, <link> y <head>, los estilos en línea son necesarios para crear un estilo a tus correos electrónicos. Puedes ahorrar tiempo al encontrar una herramienta inliner de CSS que transformará tus estilos de un <style> o una hoja de estilo externa, de modo que no tengas que escribir CSS en varios lugares.

Existen muchas herramientas inliner de donde escoger en la web. Las empresas reconocidas como Campaign Monitor, MailChimp y Zubr, al igual que muchas personas, brindan inliners CSS gratis. La mayoría solo requiere que pegues tu HTML con un <style> en su página. Para una solución más permanente, algunas herramientas pueden ser incorporadas directamente en tu proyecto como un plugin.

De manera alterna, escribir siempre tus estilos en línea, por lo general, te permite la creación más rápida de prototipos, lo que también te ahorra tiempo. Cuando tus estilos están en línea a lo largo de todo tu proceso de programación, es fácil cambiarlos en el HTML e, inmediatamente, ver cómo el correo renderizado es afectado.

Cuando depuras códigos de correos, ten en mente que los estilos en línea se encuentran en la parte más alta de la jerarquía CSS, con la excepción de estilos que usan el elemento !important. Así que, cuando trates de encontrar el punto de origen de lo estilos, revisa tus hoja de estilos externa, <style> en HTML y estilos en línea, luego busca el elemento !important en cada una de esas ubicaciones.

Apostando por el diseño responsive

El diseño responsive depende mucho de los media queries. Estos media queries apuntan a diferentes tipos de medios, anchos, dimensiones de píxeles de dispositivos (para pantallas de alta resolución) y más. Aunque no sea muy útil para los correos, los media queries con compatibles con iOS7, iPad, AppelMail y clientes de correos electrónico.

Existen varios anchos de puntos de ruptura asociados con dispositivos específicos que puedes usar para tu beneficio si deseas mostrar u ocultar contenido específico en distintos momentos. Siempre ten cuenta qué clientes de correos admiten y no admiten media queries.

Al diseñar de forma responsive, recuerda emparejar tus media queries con diseños fluidos. Estos diseños usan anchos basados en porcentajes, de modo que el contenido fluya y encaje en pantallas pequeñas. Con frecuencia, en el diseño de correos electrónicos, verás un max-width en dimensiones px emparejado con un ancho de 100 %. Esta estrategia limita a los clientes de correos electrónicos de escritorio a un max-width de 550x60px, pero permite los correos llenen las pantallas de los dispositivos móviles que no tienen los mismos píxeles.

Como se mencionó anteriormente, Outlook 2007, 2010 y 2013 ignoran el max-width y el mid-width; por lo tanto, necesitarás un puente para que tus correos luzcan de forma correcta. Este puente emplea diseños fluidos para la mayoría de clientes de correos y un ancho de fijo (en lugar de ancho máximo) dentro de un media query para clientes de correos de pantalla ancha.

Con frecuencia, los desarrolladores web afirman que nunca se debe usar !important. Sin embargo, los estilos en línea sobrescriben en los estilos contenidos en media queries. En este caso, la única forma que los estilos en un media query tenga precedencia sobre los estilos en línea es usando !important.

Ten en cuenta que, si decides usar !important en estilos en línea, Outlook 2007 lo ignorará completamente.

Peculiaridades de los correos

Los clientes de correos hacen muchas cosas raras. Puedes prepararte para algunas de estas. Por ejemplo, muchos clientes, automáticamente, ocultan imágenes y requieren que los usuarios las habiliten para ser mostradas. Para combatir esto, es una buena idea incluir un atributo estilo alt y/o background-color para cada de una de tus imágenes. De este modo, al menos, algo de contenido se mostrará en lugar de tus imágenes.

En otras ocasiones, las peculiaridades de los clientes son completamente impredecibles. Por ejemplo, el espacio en blanco de tus correos, a veces, puede afectar el renderizado. Una vez notamos que las imágenes de Gmail incluían un delgado borde gris. Con el tiempo descubrimos que se podría remover este borde al remover el espacio entre el <img> y bordear el <a>.

A la mitad de nuestro diseño de correo, descubrimos que Gmail estaba causando otro problema con los elementos <a>, no renderizaba los enlaces con el color personalizado aplicado. Luego recordamos que Gmail no admite <style> o <link> en el <head>. Desde entonces decidimos sobrescribir el color de enlace por defecto, para eso se debió agradar un estilo de color para cada <a> de nuestro código de correos.

Probando, probando y probando

Realizar pruebas A/B en tus correos electrónicos es importante para determinar contenidos y evaluar la interacción de los usuarios. Se necesita una prueba integral para asegurar que los usuarios puedan incluso ver tus correos. Las suites de pruebas de correos de muestran cómo tus correos se muestran en diversos programas de clientes. Todo lo que necesitas es enviar un correo a sus sistema y las suites muestran todos los resultados en una página. Con frecuencia, también admiten correos spam y pruebas de solo textos.

Las suites de pruebas te sirven de mucho porque te ayudan en el renderizado en tus correos, pero no lo suficiente. Aunque, normalmente, estas suites incluyen, al menos, una versión para la mayoría de sus clientes de correos, por lo general, olvidan los sistemas operativos de escritorio y móviles más populares, algo que puede afectar mucho el renderizado, incluso dentro del mismo cliente de correo. También toman bastante tiempo en actualizarse para clientes nuevos.

Se recomienda realizar pruebas en dispositivos reales o, al menos, implementar cualquier suite de pruebas de correo. Recomendamos lo primero, ya que puedes crear una biblioteca de dispositivos más rápido que una suite. Si compras dispositivos, tendrás el beneficio adicional de probar páginas web en distintos navegadores, sistemas operativos y dispositivos móviles.

Futuro incesante

Todo lo que mencionamos en este artículo te ayudará en emprender tu viaje de diseño de correos responsive. Eso es solo la punta del iceberg, así que asegúrate de conocer las últimas tendencias, realizar tú mismo las pruebas, prestar atención a los lanzamientos de nuevas versiones de clientes de correos y revisar los recursos que te brindamos.

Este artículo fue originalmente publicado en Creative Bloq, y ha sido traducido y adaptado al español por Staff Creativa, agencia de marketing digital en Lima, Perú. Si encuentras contenido online en inglés sobre diseño de páginas web, gestión de imagen corporativa, marketing digital o packaging, no dudes en contactarnos. Nos encargaremos de traducirlo y publicarlo, y te avisaremos!