Existen decenas de aplicaciones de correo, tanto para PC (que se instalan la pc) y en versiones web. Y cada uno de ellos interpreta el correo a su manera. Existen aplicaciones que no quieren saber nada de estándares como Outlook y otras como Thunderbird, que respetan perfectamente los estándares.
Por lo que al momento de redactar un email con formato, este mensaje se puede visualizar de manera diferente entre todos los programas de correo: Algunos pueden cambiar el tamaño de la letra, el tamaño de las imágenes, mover todos los elementos y desordenarlos, por lo que tener el mismo diseño y que se vea igual en todas las aplicaciones, supone todo un reto.
Es probable que cuando nos respondan o reenvíen un mensaje (incluso un mensaje anterior propio), al pasar por el programa de correo de la otra persona, se haya alterado o combinado el formato. Lo que puede traer, como consecuencia, que el diseño se altere: Letras o imágenes grandes.
Si el diseño ya se alteró, por más que se cambie de plataforma o aplicación, dicha alteración permanecerá para todos los mensajes anteriores. Salvo se cambie a un nuevo programa de correo a partir de ahora, y todos los mensajes que se envíen o respondan a partir de ahora, tendrán recién un formato correcto.
Las imágenes en los modelos más nuevos tienen pantallas más grandes, así que algunas veces se pueden ver borrosas. Nos enfrentamos también a las pantallas de retina. No solo en los dispositivos apple ya que cada vez más dispositivos los incluyen, pero Apple fue el pionero en este tipo de pantallas.
En cuanto a las imágenes, podemos solucionar dicho problema creando imágenes con un mínimo de 400px. De esta forma, al ampliarse no deberían de dar problemas en la mayoría de los dispositivos.
¿Qué son las imágenes de retina o retina web?
Las pantallas de retina son las pantallas de alta resolución. Estas pantallas aparecieron en 2010 con el lanzamiento del iPhone 4. Con este tipo de pantallas, vemos las imágenes y los textos mucho más nítidos. En Email Marketing, las imágenes en muchas campañas juegan un papel fundamental para atraer al cliente a una compra. Este tipo de imágenes proporcionan al cliente una mejor experiencia de visualización. Con esto surge un problema, las imágenes que no están optimizadas para este tipo de pantallas se verán borrosas y pueden dar al cliente una sensación de dejadez.
¿Cómo podemos optimizar nuestras imágenes para pantallas retina?
Para saber cómo solucionarlo, tenemos que saber cómo funcionan. Las pantallas de retina tienen el doble de ppp (pixeles por pulgada) que las pantallas tradicionales. Así que la primera solución sería hacer las imágenes el doble de grandes. Posteriormente las reduciremos en el mail, pero cuando este tipo de pantallas busque ese segundo pixel lo encontrará sin problema.
Imagen referenciada por: decodecms
Esta solución también nos plantea nuevos problemas. Algunas versiones de Outlook, no redimensionan las imágenes a los tamaños que se le indican. Las muestran a tamaño real. Para solucionar este problema tendríamos que incluir un atributo de ancho máximo en el estilo de la imagen.
Ejemplo: width: 100%; max-width: 600px; Otro problema que genera ampliar las imágenes, es que el peso aumenta y el email tarda más a cargar. Esto, supone una mala experiencia de usuario que, siempre, intentamos evitar. Esto no depende solo del tamaño de la imagen, sino también del terminal, ubicación y conexión de red. Así que recomendamos valorar la necesidad de utilizar estas imágenes; Ya que si nuestro mail tiene muchas imágenes puede ser que la experiencia de usuario empeore. Pero, si aun así necesitamos utilizarlas, podemos guardar imágenes muy grandes con muy baja calidad. Ya que al reducirlas no se notará la pérdida de calidad. Por otro lado, el texto se redimensiona: los textos muy pequeños se redimensionan automáticamente. Por eso recomendamos utilizar siempre como mínimo tamaño de fuente 14px y para títulos utilizar textos con 20px de tamaño.
Recorte del mensaje: De un tiempo a esta parte Gmail corta los correos electrónicos que considera muy pesados. El peso máximo que soporta sin cortar el mensaje (pone un texto para “Ver mensaje completo”) es de 102kb. Para evitar que esto suceda deberemos evitar atributos y etiquetas innecesarias y mail excesivamente largos. Recordemos que cuanto más simple mejor.Las fechas y los números se vuelven azules en iPhone: eliminar la decoración de los textos en los estilos de HTML.No siempre se adapta a todos los dispositivos móviles ni la adaptación es de la misma forma, así que muchas veces afecta al diseño inicial, por eso recomendamos diseñar para dispositivos móviles, ya que el diseño móvil siempre se va a ver igual de bien en escritorio.
En cuanto a gestores de correo más utilizado, Outlook, es el tercer o cuarto email más usado, aunque destacar que para 2B2 es el más usado, por tanto, debemos pensar en el diseño de la maquetación en este gestor
¿Cuáles son los desafíos que nos encontramos con Hotmail en email?
-Giff: No soporta este formato. La solución radica en poner el claim principal para que se muestre la información relevante en el primer fotograma.
-Margin: Si pones margin no lo coge adecuadamente (excepto Outlook.com), optamos por sustituirlo por padding.
–Se elimina el espacio entre párrafos y márgenes: Outlook elimina del código el espacio entre párrafos y márgenes. Usa el diseño basado en tablas td / tr para agregar espacio adicional. html:
–Ampliación de imágenes en algunas versiones de móvil. Se propone como solución, diseñar las imágenes a un mínimo de 400px.
¿Por qué? Porque cuando ponemos alguna imagen menor a este tamaño, lo que hace Outlook es redimensionarlo al tamaño de dispositivo móvil que es en torno a 300px/400px de ancho. De esta forma, cuando se adapte a dispositivo móvil y automáticamente amplié las imágenes, no se deformarán ni se pixelarán.
-RGB: Los bordes RGB no son compatibles con Outlook.com. Para el color de fondo, usa el código HEX en lugar de los bordes RGB.
