¿Cómo diseñar un correo electrónico en HTML Autoajustable para cualquier dispositivo?
En los últimos años, el alza de uso de los móviles ha provocado una evolución, o tal vez la revolución en la forma en que nos acercamos a la entrega de contenido a usuarios en línea. El objetivo final es mostrar el correo electrónico en versión web ó móvil, independiente del dispositivo, y esta ha generado una cantidad de mejores prácticas para lograr esto: Responsive Design, una nueva técnica que adapta su diseño a cualquier dispositivo en el que se este visualizando . Sin embargo, mientras que el espíritu en el diseño web ha cobrado fuerza, el diseño y desarrollo de correo electrónico ha tenido problemas para mantener el mismo ritmo.
Esto se debe, en parte, al hecho de que los correos electrónicos HTML son un medio notoriamente difícil para los desarrolladores. La tecnología de cliente de correo electrónico es arcaica y la falta de normas han limitado muchas de las reglas del diseño web en estos tiempos. Lo que si es cierto es que el correo electrónico sigue siendo un importante canal de marketing y comunicación para que este sea pasado por alto. En el 2012 un informe indicó un aumento del 80% en el correo electrónico que se abre en los dispositivos móviles. En el mismo año, Campaign Monitor reveló que, por primera vez, su tasa de apertura de correo electrónico móvil ha superado realmente el uso en ordenadores de escritorio.
Obviamente, es importante llevar a cabo un análisis adecuado de su público antes de tomar la decisión de invertir en optimización móvil. Sin embargo, un diseño de correo electrónico que se autoajuste (Responsive Design) puede asegurar una excelente experiencia de usuario tanto para usuarios de escritorio y usuarios móviles - y con amplio 4G, la tendencia a la del móvil es inexorable.
Clavija cuadrada, agujero redondo
Si alguna vez ha tenido la mala suerte de abrir un fixed-width de correo electrónico en un dispositivo móvil, entonces usted entenderá la necesidad del diseño de correo autoajustable (responsive design). El Screen-bursting y los diseños de varias columnas pueden ser un poco tediosos, ya que los tamaños de las fuentes se reducen hasta el punto de ilegibilidad. Los usuarios se pueden acercar y hacer zoom en el contenido, pero esto hace que tengan luego que desplegarse hacia la izquierda o derecha y viceversa con el fin de leer el contenido. Los vínculos aparecen pequeños y no muy reconocibles, sin tener en cuenta los dedos gordos en pantallas táctiles. Los diseños de bajo contraste en las pequeñas ventanas, atenuado para ahorrar energía, a menudo no se pueden leer. Claramente, la optimización móvil es importante, pero ¿cuál es la mejor manera de hacerlo?
Esto se debe, en parte, al hecho de que los correos electrónicos HTML son un medio notoriamente difícil para los desarrolladores. La tecnología de cliente de correo electrónico es arcaica y la falta de normas han limitado muchas de las reglas del diseño web en estos tiempos. Lo que si es cierto es que el correo electrónico sigue siendo un importante canal de marketing y comunicación para que este sea pasado por alto. En el 2012 un informe indicó un aumento del 80% en el correo electrónico que se abre en los dispositivos móviles. En el mismo año, Campaign Monitor reveló que, por primera vez, su tasa de apertura de correo electrónico móvil ha superado realmente el uso en ordenadores de escritorio.
Obviamente, es importante llevar a cabo un análisis adecuado de su público antes de tomar la decisión de invertir en optimización móvil. Sin embargo, un diseño de correo electrónico que se autoajuste (Responsive Design) puede asegurar una excelente experiencia de usuario tanto para usuarios de escritorio y usuarios móviles - y con amplio 4G, la tendencia a la del móvil es inexorable.
Clavija cuadrada, agujero redondo
Si alguna vez ha tenido la mala suerte de abrir un fixed-width de correo electrónico en un dispositivo móvil, entonces usted entenderá la necesidad del diseño de correo autoajustable (responsive design). El Screen-bursting y los diseños de varias columnas pueden ser un poco tediosos, ya que los tamaños de las fuentes se reducen hasta el punto de ilegibilidad. Los usuarios se pueden acercar y hacer zoom en el contenido, pero esto hace que tengan luego que desplegarse hacia la izquierda o derecha y viceversa con el fin de leer el contenido. Los vínculos aparecen pequeños y no muy reconocibles, sin tener en cuenta los dedos gordos en pantallas táctiles. Los diseños de bajo contraste en las pequeñas ventanas, atenuado para ahorrar energía, a menudo no se pueden leer. Claramente, la optimización móvil es importante, pero ¿cuál es la mejor manera de hacerlo?
Buenas prácticas de diseño de Email en el Móvil
Antes de escribir una sola línea de código, la consideración de las características de diseño puede mejorar enormemente la experiencia del usuario para aquellos en el móvil, aunque podría decirse que se trata de concesiones convenientes sin importar el tamaño de pantalla.
Contenido claro y conciso: En las pantallas pequeñas lo mejor es dar importancia a los usuarios, por lo que mientras que el contenido sea más directo y conciso, mejor será la experiencia y participación del usuario.
Diseños de una sola columna: simplicidad es la clave. La distribución de no más ancho que 640px degradan con gracia. Una sola columna garantiza que ningún contenido que se pierda por completo fuera de la ventana cuando se hace zoom in.
Utilice un asunto atractivo: esta es una de las armas más eficaces de la comercializadora de correo electrónico. Sea breve y ágil. algunas veces funciona bien redactar el asunto del correo electrónico en forma de pregunta, ejemplo: Le gustaría bajar de peso?
Elabore llamados a la acción / "Call to Action (CTA)": no castigue los dedos gordos! la guia de la interfás de IOS de Apple recomiendan un área objetivo " hacer tapping ' mínimo de 44 × 44 puntos, esto para que sea fácil para cualquier usuario hacer click en el link deseado.
Tamaños de fuente generosas: asegurarse de que su mensaje se pueda leer fácilmente.
Pre- encabezado: otro tip clave cuando se trata de la pre - visibilidad en la bandeja de entrada es el evitar mostrar simplemente el texto 'Ver en el explorador'. esto hara que sus usuarios
Texto alineado a la izquierda: hay una serie de razones para la alineación de los elementos importantes en el lado izquierdo del área de contenido. (Ojo la investigación de seguimiento sugiere que los usuarios occidentales centran la mayor parte de su atención en el lado izquierdo de contenido del correo electrónico. Esto no es sorprendente ya que leemos el texto de izquierda a derecha. Algunos sistemas operativos, especialmente android, no escalan el contenido para adaptarse a la pantalla, por lo tanto, muestra sólo la mitad izquierda de un correo electrónico. Desde el punto de vista ergonómico, la mayoría de los usuarios encontrarán que es más fácil de interactuar con los elementos en la parte inferior izquierda / centro de la pantalla de su portátil).
Jerarquía vertical: espacio en pantalla disminuida da más credibilidad que nunca en la idea de "la tapa". Los CTAs significativos deben colocarse lo más cerca de arriba posible; si no se observan de inmediato, tal vez no van a ser utilizados.
Utilizar las imágenes cuidadosamente: primero no asuma que se verán las imágenes inmediatamente. La aplicación de correo electrónico nativo del iPhone mostrará imágenes por defecto, pero muchos clientes no lo harán.
Estos consejos pueden mejorar la experiencia de usuario para los clientes móviles, pero se puede, y probablemente deberían optimizar aún más. Gracias al creciente apoyo de CSS3 entre clientes de correo electrónico móvil, el correo electrónico autoajustable es ahora posible.
Primeros pasos
Como mencionamos anteriormente, los correos electrónicos HTML sufren de una lamentable falta de normas - para los no iniciados, gran parte de lo que sigue será un viaje en el tiempo a los primeros días de desarrollo web. Las presentaciones deben concertarse en el renderizado HTML anticuados de algunos clientes de correo electrónico y CSS que debe aplicarse las etiquetas directamente. Varios clientes de correo electrónico desconocen por completo las declaraciones de las hojas de estilo hechas en la sección <head> del documento.
HTML Email Boilerplate
Como punto de partida, pero por el bien de la demostración, vamos a empezar desde cero.
Doctype
Hotmail y Gmail insertarán automáticamente la de XHTML 1.0 doctype estricto. Por tanto, no es una mala idea para usarlo, pero es importante probar a fondo su correo electrónico con y sin un doctype como muchos clientes de correo electrónico simplemente eliminarla por completo.
Antes de escribir una sola línea de código, la consideración de las características de diseño puede mejorar enormemente la experiencia del usuario para aquellos en el móvil, aunque podría decirse que se trata de concesiones convenientes sin importar el tamaño de pantalla.
Contenido claro y conciso: En las pantallas pequeñas lo mejor es dar importancia a los usuarios, por lo que mientras que el contenido sea más directo y conciso, mejor será la experiencia y participación del usuario.
Diseños de una sola columna: simplicidad es la clave. La distribución de no más ancho que 640px degradan con gracia. Una sola columna garantiza que ningún contenido que se pierda por completo fuera de la ventana cuando se hace zoom in.
Utilice un asunto atractivo: esta es una de las armas más eficaces de la comercializadora de correo electrónico. Sea breve y ágil. algunas veces funciona bien redactar el asunto del correo electrónico en forma de pregunta, ejemplo: Le gustaría bajar de peso?
Elabore llamados a la acción / "Call to Action (CTA)": no castigue los dedos gordos! la guia de la interfás de IOS de Apple recomiendan un área objetivo " hacer tapping ' mínimo de 44 × 44 puntos, esto para que sea fácil para cualquier usuario hacer click en el link deseado.
Tamaños de fuente generosas: asegurarse de que su mensaje se pueda leer fácilmente.
Pre- encabezado: otro tip clave cuando se trata de la pre - visibilidad en la bandeja de entrada es el evitar mostrar simplemente el texto 'Ver en el explorador'. esto hara que sus usuarios
Texto alineado a la izquierda: hay una serie de razones para la alineación de los elementos importantes en el lado izquierdo del área de contenido. (Ojo la investigación de seguimiento sugiere que los usuarios occidentales centran la mayor parte de su atención en el lado izquierdo de contenido del correo electrónico. Esto no es sorprendente ya que leemos el texto de izquierda a derecha. Algunos sistemas operativos, especialmente android, no escalan el contenido para adaptarse a la pantalla, por lo tanto, muestra sólo la mitad izquierda de un correo electrónico. Desde el punto de vista ergonómico, la mayoría de los usuarios encontrarán que es más fácil de interactuar con los elementos en la parte inferior izquierda / centro de la pantalla de su portátil).
Jerarquía vertical: espacio en pantalla disminuida da más credibilidad que nunca en la idea de "la tapa". Los CTAs significativos deben colocarse lo más cerca de arriba posible; si no se observan de inmediato, tal vez no van a ser utilizados.
Utilizar las imágenes cuidadosamente: primero no asuma que se verán las imágenes inmediatamente. La aplicación de correo electrónico nativo del iPhone mostrará imágenes por defecto, pero muchos clientes no lo harán.
Estos consejos pueden mejorar la experiencia de usuario para los clientes móviles, pero se puede, y probablemente deberían optimizar aún más. Gracias al creciente apoyo de CSS3 entre clientes de correo electrónico móvil, el correo electrónico autoajustable es ahora posible.
Primeros pasos
Como mencionamos anteriormente, los correos electrónicos HTML sufren de una lamentable falta de normas - para los no iniciados, gran parte de lo que sigue será un viaje en el tiempo a los primeros días de desarrollo web. Las presentaciones deben concertarse en el renderizado HTML anticuados de algunos clientes de correo electrónico y CSS que debe aplicarse las etiquetas directamente. Varios clientes de correo electrónico desconocen por completo las declaraciones de las hojas de estilo hechas en la sección <head> del documento.
HTML Email Boilerplate
Como punto de partida, pero por el bien de la demostración, vamos a empezar desde cero.
Doctype
Hotmail y Gmail insertarán automáticamente la de XHTML 1.0 doctype estricto. Por tanto, no es una mala idea para usarlo, pero es importante probar a fondo su correo electrónico con y sin un doctype como muchos clientes de correo electrónico simplemente eliminarla por completo.
Ahora podemos insertar una etiqueta de el area de Meta tags dentro de Head para asegurarse de que nuestro correo electrónico se muestre correctamente en dispositivos móviles. Es también una buena idea especificar el tipo de contenido y una etiqueta de título también. Estos serán ignorados por muchos clientes de correo electrónico, pero son una buena idea si usted está pensando en proporcionar un enlace a una 'versión del navegador de su correo electrónico.
Dado que el tipo de contenido muy probablemente será ignorado, es recomendable codificar todos los caracteres especiales en su correo electrónico como entidades HTML. ej : á para "á"
Además, vamos a incluir un par de estilos sensatos que se restablecen para asegurar que nuestro correo electrónico se representa como queremos que sea una plataforma a otra.
Dado que el tipo de contenido muy probablemente será ignorado, es recomendable codificar todos los caracteres especiales en su correo electrónico como entidades HTML. ej : á para "á"
Además, vamos a incluir un par de estilos sensatos que se restablecen para asegurar que nuestro correo electrónico se representa como queremos que sea una plataforma a otra.
Consecuencias negativas para Blackberry
Ahora podemos insertar nuestras preguntas de los medios; cuántos dependen del nivel de especificidad que desea entregar a cada dispositivo. En este ejemplo vamos a utilizar sólo una - haciendo la suposición razonable de que la mayoría de los dispositivos con un tamaño de pantalla no superior a 600px son modernas, móvil y de pantalla táctil y se beneficiarán de un estilo optimizado para móviles. Además, vamos a suponer que siguiendo las mejores prácticas técnicas móviles universales, señalado anteriormente, los usuarios móviles en los dispositivos más grandes que reciben el diseño de escritorio se encontrarán sin mayores problemas de usabilidad.
Estamos utilizando preguntas de los medios en la misma forma en que realizamos la construcción de un sitio web; si el tamaño de la ventana se encuentra dentro de las limitaciones establecidas en la consulta de los medios de comunicación después aplicar ese estilo.
Ahora podemos insertar nuestras preguntas de los medios; cuántos dependen del nivel de especificidad que desea entregar a cada dispositivo. En este ejemplo vamos a utilizar sólo una - haciendo la suposición razonable de que la mayoría de los dispositivos con un tamaño de pantalla no superior a 600px son modernas, móvil y de pantalla táctil y se beneficiarán de un estilo optimizado para móviles. Además, vamos a suponer que siguiendo las mejores prácticas técnicas móviles universales, señalado anteriormente, los usuarios móviles en los dispositivos más grandes que reciben el diseño de escritorio se encontrarán sin mayores problemas de usabilidad.
Estamos utilizando preguntas de los medios en la misma forma en que realizamos la construcción de un sitio web; si el tamaño de la ventana se encuentra dentro de las limitaciones establecidas en la consulta de los medios de comunicación después aplicar ese estilo.
En el ejemplo anterior, le estamos diciendo a algunos elementos con una clase "hide" que se oculten en las pantallas más estrechas que 600px. La Propiedad !important asegura que cualquier estilo en línea sea anulado y sea considerado el indicado en esa linea. Este es el principio básico de diseño de correo electrónico autoajustable (responsive design). Una notable excepción en la aplicación de Gmail es que ignora las declaraciones de estilo en la sección <head>. Sin embargo, de conciencia la alineación a la izquierda del contenido deben garantizar una experiencia de usuario satisfactoria para los fans de Gmail en su lista de correo. Obviamente, esto no es una solución ideal, pero en la actualidad, el diseño de correo electrónico autoajustable debe de ser un compromiso ya adquirid, ya que se trata de técnicas vanguardistas.
Renderizado capricho del correo Yahoo
Renderizado capricho del correo Yahoo
Ya hemos señalado en nuestra consulta de medios de que todas las tablas con una clase de "content_block" deben escalar a la anchura del 92% en los dispositivos con un tamaño de pantalla de hasta 600px. Ahora todo lo que tenemos que hacer es especificar un atributo inline ancho (600px) para cualquier tabla con una clase de content_block y tenemos un contenedor de ancho fijo, que luego escalas proporcionalmente en las pantallas bajo un cierto tamaño. A condición de que los atributos de anchura de los elementos secundarios de este contenedor están especificados como porcentajes, se trata de una plantilla básica de correo electrónico de respuesta.
Tenga cuidado al deshabilitar el ajuste automático de tamaño del texto en la etiqueta body, como regla general, trate de mantener los tamaños de fuente por encima del mínimo 12px.
Botones
Las llamadas a la acción "Call to Action" (CTA) suelen ser la parte más importante de un e-mail marketing. Deben ser llamativos, bien situados y, sobre todo, útiles. Los criterios para una gran CTA son diferentes dependiendo de si es para ser seleccionados por un cursor o un dedo. Esta es una poderosa función de correo electrónico autoajustable; proporciona a los usuarios con dispositivos de pantalla táctil con botones táctiles sencillos que no son afectados por los bloqueadores de imagen.
Tenga cuidado al deshabilitar el ajuste automático de tamaño del texto en la etiqueta body, como regla general, trate de mantener los tamaños de fuente por encima del mínimo 12px.
Botones
Las llamadas a la acción "Call to Action" (CTA) suelen ser la parte más importante de un e-mail marketing. Deben ser llamativos, bien situados y, sobre todo, útiles. Los criterios para una gran CTA son diferentes dependiendo de si es para ser seleccionados por un cursor o un dedo. Esta es una poderosa función de correo electrónico autoajustable; proporciona a los usuarios con dispositivos de pantalla táctil con botones táctiles sencillos que no son afectados por los bloqueadores de imagen.
Por desgracia, este tipo de botones no se pueden mostrar universalmente ya que se basan en las propiedades de relleno que no se admiten en algunos clientes de correo electrónico de escritorio.
Las declaraciones de estilos anteriores transformarán etiquetas con una clase de "botón", como la de abajo, en la que participan grandes botones, colores que abarcan todo el ancho del área de contenido, siempre que la anchura de la pantalla del dispositivo no es superior a 600px. El soporte CSS3 no debería ser un problema, ya que se puede suponer que la tecnología móvil nos dirigimos es bastante moderna.
El estilo en línea es suficiente para que los usuarios de ratón que pueden seleccionar los vínculos con mayor precisión, pero anulando estos estilos para hacer enlaces grandes y claros para los usuarios de la pantalla táctil, que reduce la probabilidad de errores de interacción. Es importante destacar que este enfoque no se basa en imágenes y así evita los problemas de usabilidad que los bloqueadores de imagen de otro modo presente.
En conclusión
El Diseño de Correo Electrónico autoajustable (responsive email design) sigue siendo un compromiso. El conjunto desconcertante de diferentes dispositivos, clientes de correo electrónico, diseñadoresy desarrolladores tiene una tarea de enormes proporciones en cuanto al diseño y desarrollo de correo electrónico se refiere. Pero a medida que avanza la tecnología es cada vez es más fácil de proporcionar a los usuarios diseños apropiados que sin esfuerzo pueden visualizar e interactuar. El apoyo creciente por preguntas de los medios en el correo electrónico ha cambiado el panorama de la optimización del correo electrónico móvil y nos proporciona una plataforma para mejorar drásticamente la experiencia del usuario en más dispositivos. Ahora nos toca a nosotros, los diseñadores y desarrolladores, experimentar con formas creativas de llegar a la audiencia móvil.
En conclusión
El Diseño de Correo Electrónico autoajustable (responsive email design) sigue siendo un compromiso. El conjunto desconcertante de diferentes dispositivos, clientes de correo electrónico, diseñadoresy desarrolladores tiene una tarea de enormes proporciones en cuanto al diseño y desarrollo de correo electrónico se refiere. Pero a medida que avanza la tecnología es cada vez es más fácil de proporcionar a los usuarios diseños apropiados que sin esfuerzo pueden visualizar e interactuar. El apoyo creciente por preguntas de los medios en el correo electrónico ha cambiado el panorama de la optimización del correo electrónico móvil y nos proporciona una plataforma para mejorar drásticamente la experiencia del usuario en más dispositivos. Ahora nos toca a nosotros, los diseñadores y desarrolladores, experimentar con formas creativas de llegar a la audiencia móvil.
