Según el último estudio (2016) hecho por iab.Mexico, menciona que en 2015, 68 millones de mexicanos son internautas, (57% de la población) y el 68% de ese segmento utiliza un dispositivo móvil para conectarse a internet y lo hacen en un promedio de 6hrs al día, 24 minutos más que en 2014.
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

• 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::
<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 “clickeables”

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.

• 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).

• 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 80Kb sumando código e imágenes.

• 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. Existen varias herramientas que te pueden ayudar en este proceso, una de ellas es Litmus en la cual podrás visualizar tu boletín en diversos clientes de correo y diversas medidas de dispositivos.
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.

Aquí te dejamos algunos enlaces que te pueden interesar: