En los últimos años, el aumento del uso de la telefonía móvil ha desencadenado un desarrollo, o quizás una revolución, en la forma en que enfocamos la entrega de contenidos a los usuarios en línea. El objetivo final es una web fluida, móvil e independiente del dispositivo, y una escuela de pensamiento ha demostrado ser el medio preferido para este propósito: el diseño de respuestas. Pero mientras que el espíritu receptivo ha ganado impulso, el diseño y el desarrollo del correo electrónico ha tenido dificultades para mantener el ritmo.
Esto se debe en parte al hecho de que los correos electrónicos HTML son un medio complicado y bien conocido para que los desarrolladores trabajen con ellos. La arcaica tecnología de cliente de correo electrónico y la falta de estándares han hecho que muchas de las reglas del código semántico moderno sean inútiles. Pero el correo electrónico sigue siendo un importante canal de marketing que es muy importante ignorar: en un período de seis meses en 2012, Litmus registró un aumento del 80% en las aperturas de correo electrónico en los dispositivos móviles. En el mismo año, el Campaign Monitor reveló que la tasa de apertura de su correo electrónico móvil superaba por primera vez a la de su correo electrónico de escritorio y webmail.
Por supuesto, es importante analizar correctamente su audiencia objetivo antes de tomar la decisión de invertir en optimización móvil. Pero un correo electrónico bien diseñado y con capacidad de respuesta puede garantizar una gran experiencia de usuario para los usuarios de equipos de escritorio y móviles, y a medida que 4G se extiende a la vuelta de la esquina, la tendencia de los teléfonos móviles es implacable, así que ¿por qué no prepararse para el futuro?
Resumen de el Contenido
Pasador cuadrado, agujero redondo
Si alguna vez has tenido la desgracia de abrir un correo electrónico de ancho fijo en un dispositivo móvil, comprenderás la necesidad de un diseño de correo electrónico convincente. Los diseños multicolumna que rompen la pantalla se pueden reducir en tamaño, reduciendo el tamaño de la fuente hasta el punto de lectura. Los usuarios pueden acercar el zoom, pero luego se les presiona constantemente para desplazarse horizontalmente de izquierda a derecha y viceversa para leer el contenido. Los enlaces parecen pequeños y llenos de gente, independientemente de los dedos gordos en las pantallas táctiles. Y los diseños de bajo contraste en vistas pequeñas y oscuras para ahorrar energía a menudo se vuelven ilegibles. Por supuesto, la optimización móvil es importante, pero ¿cuál es la mejor manera de lograrlo?
Mejores prácticas móviles
Antes de escribir una sola línea de código, la consideración de las características de diseño puede mejorar enormemente la usabilidad para los que están en el teléfono, aunque esto probablemente sea aconsejable independientemente del tamaño de la pantalla.
- Contenido claro y conciso: Las pantallas pequeñas significan que es más importante que nunca involucrar al usuario de la manera más eficiente posible.
- Disposición en una sola columna: La simplicidad es la clave. Los diseños que no sean mayores de 640px se deteriorarán con gracia. Una vista de una sola columna asegura que ningún contenido fuera de la vista se Footerrda completamente cuando se amplía.
- Una línea de asunto atractiva: Esta es una de las armas más efectivas del comerciante de correo electrónico en una bandeja de entrada llena de gente. Que sea breve y dulce.
- Gran necesidad de acción (CTA): ¡No castigues a los dedos gordos! Las Pautas de Interfaz Humana de Apple iOS recomiendan un rango mínimoinaccesible” de 44×44 puntos.
- Generosos tamaños de fuente: Asegúrese de que su mensaje sea fácil de leer.
- Prefijo: otra área clave cuando se trata de la visibilidad en la bandeja de entrada. Trate de evitar mostrar simplemente el textoVer en el navegador”.
- Texto justificado a la izquierda: hay varias razones para alinear elementos importantes en el lado izquierdo del área de contenido (la investigación de Eye-tracking sugiere que los usuarios occidentales centran la mayor parte de su atención en el lado izquierdo del contenido del correo electrónico). Esto no es sorprendente ya que leemos el texto de izquierda a derecha. Algunos sistemas operativos, especialmente Android, no adaptan el contenido a la pantalla y, por lo tanto, sólo muestran la mitad izquierda de un correo electrónico. Desde un punto de vista ergonómico, será más fácil para la mayoría de los usuarios interactuar con los elementos de la esquina inferior izquierda/media de su pantalla portátil.)
- Jerarquía vertical: La reducción de bienes raíces en pantalla se basa más que nunca en la idea deduplicar”. Los CTAs significativos deben ser colocados lo más cerca posible de la parte superior; si no son inmediatamente visibles, no pueden ser utilizados.
- Usar las imágenes con cuidado: no asuma que las imágenes serán vistas. La aplicación de correo electrónico nativa de iPhone muestra las imágenes de forma predeterminada, pero muchos clientes no lo hacen.
Estos consejos pueden mejorar la usabilidad para los clientes móviles, pero usted puede y debe optimizarlos aún más. Gracias al creciente soporte de CSS3 entre los clientes de correo electrónico móvil, ahora es posible un diseño de correo electrónico con capacidad de respuesta.
Primeros pasos
Como mencioné antes, los correos electrónicos HTML sufren de una desafortunada falta de estándares – para los no iniciados, gran parte de lo que sigue será un viaje al pasado en el tiempo hasta el comienzo del desarrollo web. Debido a los obsoletos motores de renderizado HTML de algunos clientes de correo electrónico, los diseños deben organizarse con tablas y los CSS deben aplicarse en línea. Muchos clientes de correo electrónico ignoran todas las declaraciones de estilo realizadas en la sección de documentos.
Hay algunas fantásticas calderas de correo electrónico disponibles, recomiendo la excelente caldera de correo electrónico HTML de Sean Powell como punto de partida, pero por el bien de la demostración, comencemos desde cero.
Para aquellos de ustedes que quieran seguir el código, pueden descargar una plantilla para este artículo aquí.
Tipo de documento
Hotmail y Gmail insertan automáticamente Doctype XHTML 1.0 Strict. Por lo tanto, no es una mala idea utilizarlos, pero es importante que pruebe completamente su correo electrónico con y sin Doctype, ya que muchos clientes de correo electrónico simplemente los eliminan por completo.
Email on Acid realizó una extensa investigación sobre los tipos de documentos de correo electrónico aquí.
Información multimedia
Ahora podemos insertar una etiqueta viewport meta para asegurarnos de que nuestro correo electrónico se muestra correctamente en los dispositivos móviles. También es una buena idea especificar el tipo de contenido y una etiqueta de título. Estos son ignorados por muchos clientes de correo electrónico, pero son una buena idea si tiene la intención de proporcionar un enlace a unaversión de navegador” de su correo electrónico.
Como el tipo de contenido es probablemente ignorado, es aconsejable codificar todos los caracteres especiales de su correo electrónico como entidades HTML.
También añadiremos algunos reajustes de estilo útiles para asegurarnos de que nuestros correos electrónicos se procesen de la forma en que queremos que se procesen en todas las plataformas.
Tenga en cuenta que la vista de metaetiquetas tiene un efecto negativo en Blackberry.
Ahora podemos introducir nuestras consultas de medios; cuántas dependen de la especificidad que desee proporcionar para cada dispositivo. En este ejemplo, utilizaremos sólo uno – bajo el supuesto razonable de que la mayoría de los dispositivos con un tamaño de pantalla de no más de 600px son modernos, móviles y de pantalla táctil y se beneficiarán de un diseño móvil optimizado. Además, esperamos que los usuarios de dispositivos móviles en dispositivos más grandes que reciben el diseño de escritorio no tengan problemas importantes de usabilidad al aplicar las técnicas de mejores prácticas de movilidad universal descritas anteriormente.
Utilizamos las solicitudes de medios de la misma manera que utilizamos las solicitudes de medios de comunicación al crear un sitio web; si el tamaño del Visor está dentro de los límites especificados en la solicitud de medios de comunicación, aplique este estilo.
.
En el ejemplo anterior, le decimos a algunos elementos con una clasehide” que muestren: ninguno en pantallas menores de 600px. La proFooterdad !important garantiza que cualquier estilo en línea se sobrescriba. Este es el principio básico del diseño del correo electrónico de respuesta: sobrescribir las declaraciones de estilo en línea creadas en el cuerpo del documento HTML con importantes declaraciones de estilo creadas en la sección !y establecer este estilo para tamaños de pantalla específicos con consultas de medios. Una excepción sorprendente es la aplicación gmail, que ignora todas las declaraciones de estilo de la sección. Sin embargo, la justificación concienzuda a la izquierda del contenido debería asegurar una experiencia de usuario satisfactoria para los fans de gmail en tu lista de correo. Obviamente, esta no es una solución ideal, pero por el momento, el diseño de correos electrónicos con capacidad de respuesta se trata tanto de compromisos deliberados como de técnicas innovadoras.
Cabe destacar que estamos equipando nuestros elementos HTML con selectores de atributos CSS para superar un truco de procesamiento de correo de Yahoo!
Así que podemos ver que las consultas de los medios de comunicación son una herramienta útil para mostrar el contenido de forma selectiva, pero también podemos utilizarlos para manipular otras funciones de nuestro diseño. Quizás lo más importante es que podemos limitar el ancho de columna de nuestro correo electrónico – la clave para una gran experiencia móvil.
.
Ahora encontramos en nuestra consulta de medios que todas las tablas con una clasecontent_block” deben escalarse al 92% de ancho en dispositivos con un tamaño de pantalla de hasta 600px. Ahora todo lo que tenemos que hacer es especificar un atributo de ancho en línea (600px) para cada tabla con una clase content_block y tenemos un contenedor de ancho fijo que escala proporcionalmente en pantallas por debajo de un cierto tamaño. Dado que los atributos width de los elementos hijo de este contenedor se especifican como porcentajes, se trata de un modelo de correo electrónico sencillo y con capacidad de respuesta.
Tenga cuidado si desactiva el redimensionamiento automático del texto en la etiqueta del cuerpo del kit web. Como regla general, debe intentar mantener el tamaño de la fuente por encima de 12px como mínimo.
Botones
Los llamados a la acción (CTAs) son a menudo la parte más importante de un correo electrónico de marketing. Deben ser atractivos, bien situados y, sobre todo, utilizables. Los criterios para una ATC grande varían dependiendo de si se debe seleccionar con el cursor o con el dedo. Esta es una potente función de respuesta de correo electrónico que ofrece a los usuarios de dispositivos con pantalla táctil teclas de dedo más pequeñas que no se ven afectadas por los bloqueadores de imágenes.
Desafortunadamente, estos botones no se pueden mostrar universalmente porque dependen de propiedades de relleno que no son soportadas por algunos clientes de correo electrónico de escritorio.
Las declaraciones de estilo anteriores transforman las etiquetas con una clase debotones”, como los de abajo, en grandes botones de color envolventes que cubren el ancho del área de contenido, siempre y cuando el ancho de pantalla del dispositivo no supere los 600 píxeles. El soporte de CSS3 no debería ser un problema, ya que podemos asumir que la tecnología móvil que estamos buscando es razonablemente moderna.
El estilo en línea es suficiente para los usuarios de ratón que pueden seleccionar los enlaces con mayor precisión, pero la sustitución de estos estilos para que los enlaces sean más grandes y claros para los usuarios de pantalla táctil reduce la probabilidad de errores de interacción. Es importante que este enfoque no se base en imágenes y así evitar los problemas de usabilidad que tendrían los bloqueadores de imágenes.
Finalmente
El diseño receptivo del correo electrónico sigue siendo un compromiso. La increíble variedad de diferentes dispositivos, clientes de correo electrónico y motores de renderizado presenta a los diseñadores y desarrolladores una tarea de enormes proporciones. Pero a medida que la tecnología evoluciona, es cada vez más fácil proporcionar a los usuarios diseños apropiados para consumir e interactuar fácilmente. La creciente compatibilidad con las solicitudes de medios de 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 usabilidad en más dispositivos. Ahora nos toca a nosotros, diseñadores y desarrolladores, experimentar con formas creativas de llegar a la audiencia móvil.
¿Diseñaste para el correo electrónico? ¿Tomaste un enfoque receptivo? Háganoslo saber en los comentarios.
Imagen seleccionada/imagen en miniatura, vía mattw1ls0n