Blog de Fidelizador.com

Tips y artículos para optimizar tu Email Marketing.

El acercamiento híbrido a la programación de correos

El acercamiento híbrido a la programación de correos

Las Media Queries son un modo fantástico de optimizar los diseños para pantallas más pequeñas, son el estándar actual después de todo, la comunidad web puede que ya (de hecho siempre) esté buscando por el siguiente paso (flexbox, etc.). Pero las Queries son ideales para los correos como son esenciales para activar un grupo de reglas CSS dependientes del tamaño de la pantalla (real o aparente), sin la necesidad de un Javascript o nada externo.

Pero, hay algunos “escenarios más pequeños” donde las Media Queries no son soportadas (i.e. algunas aplicaciones de correo nativas de Android). Soporte parcial significa que la Media Query es analizada pero el Doctype es extraído, forzando el Quirk mode (o equivalentes) y descartando algunos atributos, como por ejemplo haciendo que los elementos no se comporten como bloques cuando se les dijo que actuasen como, causando graves problemas de diseño.

Esto es frustrante por decir lo menos.

Como siempre, hay atajos para esto. Más importante aún para diseñar y programar para permitir la optimización sin que las Media Queries sean esenciales. Por supuesto estás pueden seguir siendo añadidas y en agregarlas, florecerlas, por lo que son leer proporcionalmente más seguido que no, otra buena referencia aquí, es mejor no perder de vista esto, aunque el núcleo del correo funcionará sin estos. Pude que a veces sea un gran “lograr salir de la cárcel” si el usuario final te pide o eres algún tipo de inconformista el cual no quiere dejar que las cosas como Gmail App lo detengan.

Para lograr esto, significa hacer que el correo con porcentajes flexibles como primer paso. El problema con esto es, como alguien que nunca ha programado un correo te dirá, sin fijar al menos algunos anchos de tu correo este no se mostrará muy bien y desafortunadamente, fijar anchos significa que el correo será rígido a menos que sea roto por alguna regla.

Entonces para moverse en eso, la solución lógica es el uso de max-width y min-width para imponer referencias rígidas, pero permitiendo movimiento. Desafortunadamente esto no funciona en Outlook. Realmente quiero decir que no funciona, lo destruye. Por suerte, hay un segundo paso para solucionar esto:

1. Usa una declaración condicional para imponer un ancho fijo para Outlook y mantén la flexibilidad en todo lo demás.

<!--[if mso>

<table width="640" border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<![endif]-->

<===CÓDIGO DEL CORREO AQUÍ===>

<!--[if mso>

</td>

</tr>

</table>

<![endif]-->

Esta es una buena solución – pero, no funciona en los antiguos Outlooks (antes de 2007). Es aquí donde el siguiente paso de la solución entra.

2. Usa una segunda declaración condicional la que apunte al mecanismo más antiguo de muestra

<!--[if (IE)]>

Contenido

<![endif]-->

Etc. en efecto después envuelve doblemente lo que resultará en una solución muy limpia para un correo de una sola columna.

También hay un tercer paso para Apple:

3. Agrega un IOS fix al tag body y a la Media Query min-width para Apple Mail o si no logras entender el 100% de lo que esto realmente significa… (obtuve esto de una particularmente buena presentación por Fabio Carneiro):

<body width:100%; min-width:100%;>

===Y===

@media screen and (min-device-width: 640px), screen and (min-width: 640px) {

*[class=wrapper]{width:640px !important; height:auto !important

}

Ahora puedes hacer imágenes completas con un % del ancho, por ejemplo 100%, deja de lado el height para prevenir daños, y aplica max-width inline para ayudar a prevenir que la imagen salte.

Aquí hay un ejemplo bastante simple para ver la optimización sin Media Queries: http://codepen.io/actionrocket/pen/zHkgx

Para reordenar y apilar múltiples columnas de contenido necesitarás ser un poco más inteligente – entonces no lo recomendaría. Aún aquí? insistiendo? OK… entonces un camino que hemos encontrado es usar una combinación de widths fijos y flexibles.

Entonces la teoría es tener un wrapper flexible y después hacer bloques dentro rígidos (y separados) entonces ellos están forzados a apilarse. Los problemas aquí son que el width fijo del elemento ahora de transforma en un nuevo “min-width” del correo.

Los bloques puestos lado a lado tienen sus propias consideraciones especialmente en Outlook. Puedes revisarlo aquí. Disculpas, probablemente lo he repetido, escribí esto un tiempo atrás, dejándolo en el casillero, pero la esencia es: usar una estructura falsa para apuntalar el correo.

Esto funcionará bastante bien con 2 columnas, pero no muy bien con 3 dependiendo con el total del width del correo. Discutiblemente, la regla recomendada está entre los 600px a 650px, no cuenta si programas de manera hibrida, tomando todos los tamaños de pantalla en consideración. 600px sería la “mejor práctica” para hacer de un correo móvil amigable, pero si queremos estar seguros de que nuestro correo está optimizado y activamente cambiando el diseño para todos los tamaños, entonces podemos fácilmente y seguramente agrandar a digamos 900px (300×3). Obviamente, no recomendando que si agrandas más que eso, de todos modos seguimos limitados por el reino físico, y algunas personas tienen computadoras con pantallas muy pequeñas corriendo Lotus Notes, pero divago…

Como no podemos cambiar el tamaño de un elemento seguramente sin el uso de Media Query diciendo que lo haga o indirectamente diciendo a un elemento padre que lo haga, entonces buscaríamos hacer los bloques de 300-320px de width para mantenerlo luciendo bien. Hay otras consideraciones aquí, como optimización parcial que se ve mucho en algunas combinaciones de Android. Aquí podríamos obtener el apilado, pero los elementos no serán cambiados de tamaño. De hecho con algunos widths rotundamente descartados, terminando en un correo bastante cuadrado. Esto puede ser homogeneizado con un cuidadoso uso del background color e imágenes para forzar los widths de las cosas, aunque no es lo mejor y requiere algunas consideraciones adicionales de diseño. Pero entonces, estoy seguro que da para todo un post…

Fuente: Labs actionrocket.co

Suscríbete a nuestro newsletter

Y recibe todos los tips de nuestros expertos para tus campañas de Email Marketing.

Pruébalo gratis durante 15 días utilizando todas sus funcionalidades.

[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']