Según el Primer estudio de usos y hábitos de dispositivos móviles en México del 2012, hecho por iab.México, 58% de los usuarios de internet acceden vía un dispositivo móvil y la principal actividad online, vía dispositivos móviles es enviar y recibir correo electrónico (80%).
Y las cifras van en aumento, por ejemplo, según este mismo estudio, los usuarios destinan en promedio de 16 a 30 minutos para enviar o recibir emails en sus dispositivos móviles.
Y las cifras van en aumento, por ejemplo, según este mismo estudio, los usuarios destinan en promedio de 16 a 30 minutos para enviar o recibir emails en sus dispositivos móviles.
Por lo tanto es importante conocer las posibilidades que tenemos para que nuestros newsletters lleguen de manera óptima a usuarios tanto de dispositivos de escritorio, como móviles. Ya que los requerimientos de cada uno son distintos, por ejemplo, en un móvil tienes una conexión a internet más restringida, una pantalla más pequeña, un cursor (el dedo del usuario) más grande, entre otras cosas; mientras que en una computadora de escritorio tienes menos limitaciones tanto de espacio como de tamaño, imágenes y contenido.
Con esta guía aprenderás las bases para crear newsletters que puedan ser útiles y agradables para el usuario tanto en dispositivos de escritorio, como en dispositivos móviles y así asegurarte que reciban la información correcta, sin importar su dispositivo de acceso.
Esta guía es para usuarios de nivel: intermedio y superior
Esta guía es para usuarios de nivel: intermedio y superior
• Aprende sobre los "media queries"
Los "media queries" son filtros en css que nos permiten crear o modificar estilos de objetos que estén dentro de nuestro HTML dependiendo del tamaño o resolución de la pantalla en la que se esté visualizando.
Es importante recalcar que estos "media queries" deben de estar dentro de las etiquetas de "<style>" en el "<head>" del HTML, por lo que, en las aplicaciones móviles de correo de algunos clientes como Gmail o Hotmail, aún no funciona completamente la programación con "media queries", ya que, como revisamos anteriormente, estos eliminan todo el código que está dentro de la etiqueta "<head>" de nuestro HTML.
A grandes rasgos, un "media queries" funciona de la siguiente manera::
Es importante recalcar que estos "media queries" deben de estar dentro de las etiquetas de "<style>" en el "<head>" del HTML, por lo que, en las aplicaciones móviles de correo de algunos clientes como Gmail o Hotmail, aún no funciona completamente la programación con "media queries", ya que, como revisamos anteriormente, estos eliminan todo el código que está dentro de la etiqueta "<head>" de nuestro HTML.
A grandes rasgos, un "media queries" funciona de la siguiente manera::
<style type="text/css">
@media only screen and (max-device-width: 450px) {
/* Aquí se muestran los estilos CSS que se activarán en
dispositivos con pantallas de máximo 450px */
}
/* Y aquí el CSS normal, pero recuerda que este CSS
deberá incluirse también en los tags de style de cada objeto*/
</style>
Por lo tanto, para que tu newsletter tenga estas posibilidades, tendrás que utilizar clases en tus objetos de HTML. Para conocer más sobre los "media queries", te recomendamos leer este enlace
• Crea links y botones "clikeables"
Recuerda que tu dedo es mucho más grande que el cursor de tu computadora de escritorio o laptop.
Por lo tanto, a través de los "media queries" dale a los links o CTA (call to action) un "padding" de al menos 15px, esto hará el espacio más grande y por lo tanto la experiencia será más amigable para el usuario.
Por lo tanto, a través de los "media queries" dale a los links o CTA (call to action) un "padding" de al menos 15px, esto hará el espacio más grande y por lo tanto la experiencia será más amigable para el usuario.
• Considera los tamaños mínimos
Por ejemplo, un iPhone tiene la restricción de mostrar tipografías de mínimo 13px, por lo tanto si creas un texto con un tamaño inferior, en un iPhone se crecerá al mínimo, es decir 13px, corriendo el riesgo de afectar tu diseño.
• Las pantallas son diferentes
El diseño para dispositivos móviles tiene un espacio para mostrarse mucho más pequeño (esto es, la pantalla de una tablet o un smartphone, con sus variantes en tamaño y proporción), considera aproximadamente 320px de ancho mínimo.
• Oculta lo que esté de más
Recuerda que el usuario de un smartphone o dispositivo móvil tiene menos tiempo y hasta cierto punto menos atención en su dispositivo (puede ser que esté caminando, vaya en el tráfico o simplemente dando una "revisada rápida" a sus emails) por lo tanto hay cosas como imágenes o textos que puedes ocultar, para que el mensaje llegue a él de manera más clara y concisa.
Para esto, en tus "media queries" utiliza un "display:none;" en los objetos que desees ocultar (como renglones de una tabla o imágenes muy grandes).
Para esto, en tus "media queries" utiliza un "display:none;" en los objetos que desees ocultar (como renglones de una tabla o imágenes muy grandes).
• Dale opciones a los usuarios
Seguramente algunos usuarios con planes de datos limitados no querrán descargar las imágenes de tu comunicado, por lo tanto puedes ofrecer un poco de información de referencia en ellas utilizando los atributos "title" y "alt" dentro de las etiquetas de tus imágenes, como lo vimos en la guía para imágenes.
• Se más conciso en tu línea de asunto
Plantea correctamente tu línea de asunto, ya que en los teléfonos móviles solo se mostrarán máximo 5 palabras, considera incluir lo más importante en no más de 50 caracteres.
• Crea emails ligeros
Con planes de datos tan restrictivos, redes de internet para móviles de baja velocidad y los procesadores menos potentes que tienen los dispositivos móviles, no diseñes un newsletter que convierta en una tortura la espera.
Te recomendamos que tu newsletter no pese más de 20Kb sumando código e imágenes.
Te recomendamos que tu newsletter no pese más de 20Kb sumando código e imágenes.
• Dirige tus landing pages
Así como estas creando versiones móviles del diseño de tus newsletter, también deberías hacer lo mismo con el diseño de tus "landing pages", tal vez mostrando menos información o links a versiones móviles de tu información.
• Haz pruebas, muchas pruebas…
Nuestra recomendación más importante, prueba tus resultados, envía a tu propio móvil los diseños que hayas hecho con estas recomendaciones y verifica que todo aparezca de manera correcta y amigable.
Como puedes ver, convertir tu newsletter en una versión amigable con dispositivos móviles requiere un poco más de dedicación que uno normal, por lo que es importante valorar tus bases de datos a partir de tus estadísticas, revisando qué tipo de dispositivo es el más popular entre tus usuarios.
En GraphicMail tienes acceso a esta información en tu sección de "Reportes y estadísticas", simplemente da click en el link de "Abiertos", te mostrará una gráfica de los diferentes sistemas donde se abrió tu comunicado:
Si revisas tus estadísticas constantemente, te darás cuenta que el número de usuarios de dispositivos móviles crece poco a poco, por lo que es cada vez más importante que los comunicados estén adaptados a ellos.
Esperamos que esta guía te sea de utilidad, si haz tenido experiencias enviando newsletters creados pensando en dispositivos móviles, cuéntanos, ¿cuáles son tus recomendaciones?
Aquí te dejamos algunos enlaces que te pueden interesar:
Usos y hábitos de los usuarios de dispositivos móviles en México
Ejemplos del funcionamiento de los "media queries"
Tiempo de movilizarte
Los dispositivos móviles y su penetración en México
Análisis del comportamiento en Línea - ComScore - Latinoamérica
No hay comentarios:
Publicar un comentario