bento icon close
Índice
Livre blanc responsive

Versión numérica gratuita

El email responsive

Optimiza tus campañas para los dispositivos móviles

Los consumidores y sus smartphones

Aparecen en escena por primera vez en 1992 gracias a IBM, y fueron difundidos mucho más ampliamente por Apple en 2007 con el iPhone.

2.3

billiones en 2017

El número de usuarios de smartphones ha aumentado de 1.57 billones el 2014 a 2.32 billones el 2017(1).

El móvil se ha convertido rápidamente en una herramienta esencial de comunicación al servicio del hombre. Esta verdadera revolución ha seducido a los usuarios desde su aparición. La llegada del smartphone ha amplificado este fenómeno y ha puesto patas arriba las reglas de la vida social. Se ha convertido en el asistente personal para la mitad de los usuarios de móviles.

El 62% de los usuarios de móvil tienen entre 18-34 años(2).

3 de cada 4 usuarios usa su dispositivo móvil para navegar por internet casi cada día(3).

(1) Statista: Número de usuarios de smartphone en el mundo de 2014 a 2020 (en billones), 2017 (2) Stadísticas de Go-Gulf sobre el uso del smartphone en el mundo, 2012 (3) Barómetro marketing móvil publicado por Mobile Marketing Association en Junio 2014

Se estima que para el 2018 el 36% de la población usará smartphones(1). Gracias al Wifi, la conexión 3G y 4G, es más sencillo tener conexión en los móviles.

Los usuarios de smartphones revisan sus dispositivos una media de 221 veces al día.

221

veces al dia

En septiembre del 2014, Tecmark (UK) llevó a cabo un estudio del uso de los smartphones. Confirmaron que los smartphones son los gadgets más usados en nuestra vida diaria.

Sobre una muestra de 2000 usuarios, cada persona consulta su smartphone 221 veces al día, frente solo 140 veces con un ordenador de escritorio o portátil.

Sus usos:

illustration
  • Consultar la previsión del tiempo
  • Leer emails
  • Consultar las redes sociales
  • Revisar la agenda
  • Hacer una lista de tareas
  • ...
  • Con todas las aplicaciones integradas en nuestros smartphones, este pequeño aparato nos ayuda todos los días con nuestras tareas cotidianas.

    (1) Statista: Número de usuarios de smartphone en el mundo de 2014 a 2020 (en billones), 2017 (2) Fuente: http://www.tecmark.co.uk/smartphone-usage-data-uk-2014/

    El mercado de los smartphones

    Los smartphones se venden más que los móviles clásicos: el 49,5% de la población prefiere usar smartphones(1). El número de smartphones continúa aumentando cada año: en 2018, 1.5 billones de smartphones fueron vendidos en todo el mundo, frente a 680 millones en 2012(2).

    LA VENTA DE SMARTPHONES MUNDIAL

    illustration
    infos

    (1) Emarketer: «2 billones de consumidores en el mundo obtienen smartphones en 2018» (2014) (2) Statista: Número de smartphones vendidos a usuarios finales en el mundo de 2007 a 2018

    El número de usuarios de smartphones aumenta cada año. Se estima que en 2018, 2,16 billones de personas usarán smartphones comparados con 1,31 billones en 2013(1).

    SISTEMAS OPERATIVOS

    Tras unos años por delante de sus competidores, Apple comienza a perder cuota de mercado. Ahora, Android es de los sistemas operativos principales de telefonía móvil. El mercado además se dinamiza con la venta de nuevos modelos propuestos cada año.

    Con una cuota de mercado del 64,76%(1), Android se coloca en primera posición, aunque perdiera algo de su poder con la salida del iPhone 6 y el iPhone 6 Plus de Apple.

    El mercado de los sistemas operativos(1)

    os

    (1) Netmarketshare «Mobile/Tablet Operating System Market Share» (2017)

    LOS 10 SMARTPHONES MÁS VENDIDOS EN TODO EL MUNDO

    En septiembre de 2014, después del lanzamiento del sistema operativo iOS 6, el nuevo modelo de Apple se colocó de forma directa en los puestos superiores de la lista de smartphones más vendidos de todo el mundo.

  • Apple - iPhone 6S
  • Apple – iPhone 7
  • Apple – iPhone 7+
  • Apple – iPhone 6S+
  • Samsung – Galaxy S7 edge
  • Samsung – Galaxy J3
  • Oppo – A53
  • Samsung – Galaxy J5
  • Samsung – Galaxy S7
  • Samsung – Galaxy J7
  • Gadgetsnow, Los 10 smartphones más vendidos en el mundo (2017)

    La lectura de los correos electrónicos en el móvil

    88%

    A nivel mundial

    A nivel mundial, el 88% de los usuarios leen a diario sus correos electrónicos desde el móvil (1).

    Los smartphones cada vez tienen más importancia. En octubre de 2014 el 37% de los correos fueron consultados desde un móvil contra el 31% en octubre de 2013 y el 17% en octubre de 2012. ¡Esto representa un crecimiento del 117% en dos años! (1) Ahora, en 2017, Litmus declara que el 54% de los emails son leídos en un teléfono móvil(2).

    graph

    (1) Estudio publicado por Return Path (2) Litmus «Situación actual del Email» (Marzo 2017)

    En cualquier momento del día puedes consultar tus emails desde el teléfono móvil.

    os

    (1) BlueHornet «Opiniones de clientes sobre el email marketing 2015»

    3 LAS TRES MANERAS DE CONSULTAR LOS CORREOS ELECTRÓNICOS EN EL SMARTPHONE

    Hay varias aplicaciones para consultar el correo desde un smartphone:

    1. Las aplicaciones que vienen por defecto

    La mayoría de personas que usan estas aplicaciones, que ya vienen instaladas, lo hace para consultar sus correos. En iPhone se llama Mail y en Android Email.

    emails

    La aplicación que ya viene instalada sólo requiere que el usuario la configure. La aplicación te permite usar varias cuentas de correo a la vez, hecho muy práctico cuando posees diferentes direcciones de correo.

    smartphones

    2. Las aplicaciones de mensajería

    Hoy en día todos los servidores de correo tienen su propia aplicación móvil. Aunque la funcionalidad es idéntica a las aplicaciones que vienen por defecto, la ergonomía de la aplicación y la representación de los contenidos es diferente.

    El usuario sólo tiene que descargar la aplicación y configurar su correo electrónico.

    Cada aplicación, como cada mensajería, realiza su propia interpretación del código HTML del mensaje a la hora de mostrar el contenido.

    smartphones

    3. Navegador Web

    También es posible acceder al correo desde el navegador Safari en el iPhone o el navegador Internet en el Android. Ambas aplicaciones vienen instaladas por defecto.

    navigateur

    Desde el navegador, el usuario accede a la página web del servicio de mensajería

    smartphones

    LOS DETALLES TÉCNICOS QUE DEBES CONOCER

    illu-techniques

    La navegación en una pantalla táctil es muy intuitiva pero no siempre es fácil de usar e incluso puede ser molesta si el contenido no se adapta a las especificaciones. El dedo no es tan preciso como el ratón así que deben seguirse ciertas reglas en lo que se refiere al diseño de los correos en un sitio web:

    1

    Los elementos interactivos deben ser identificables de manera visual: a diferencia del ratón, que da información de que puedes hacer clic gracias a que sale un icono en forma de mano, en una pantalla táctil no sabes en que elemento se puede hacer clic ya que no hay posibilidad de realizar un barrido general por la pantalla. Es por eso que debes asegurarte de que tus enlaces resaltan y sus llamadas a la acción son claramente visibles (coloreadas, rectangulares con bordes redondeados...). Se recomienda un tamaño mínimo de 44 x 44 píxeles para una llamada a la acción fácilmente identificable.

    2

    Espacios entre los elementos seleccionables: si colocas varios elementos interactivos muy juntos será difícil distinguir uno del otro. Podrías molestar a tus lectores cuando sin querer hagan clic en un enlace cuando realmente querían pulsar el de al lado.

    3

    Los tamaños de pantalla se reducen y para el usuario es desagradable tener que desplazarse a través de su pantalla para ver la totalidad del contenido. Es importante reducir el contenido para que pueda verse fácilmente en un correo electrónico.

    El preheader es el texto de tu correo que se encuetra en la parte superior. A menudo consiste en un enlace que dirige a visionar el correo en una página web. Normalmente dice: «Sino puede ver este mensaje correctamente, haga clic aquí». Es una pena gastar el preheader en este mensaje ya que en el iPhone y iPad aparece justo debajo del asunto y podría usarse para dar información adicional y acabar de convencer a tus destinatarios para que abran en correo.

    smartphone

    Para asegurarte que tu correo se lee correctamente en un smartphone se recomienda que utilices la letra Arial o Verdana. Estas fuentes son de fácil legibilidad y adecuadas para la lectura en pantalla. En cuanto a las imágenes recomendamos usar contrastes de color fuertes. Los contrastes débiles dificultan la lectura. También debes pensar que los lectores abren los emails al despertar, no pongas colores llamativos como el amarillo que puede molestar y ser desagradables para la lectura.

    ¿Por qué hacer email responsive?

    En función de las características de soporte y de la aplicación que usemos para consultar los emails, una campaña de email clásica (no optimizada para móviles) se mostrará en dos maneras:

    responsive
  • En tamaño pequeño
  • La anchura del documento se ajusta a la anchura de la pantalla. Tienes una visión global del correo electrónico pero es imposible de entender la organización de la información. El contenido es difícil de leer, los enlaces son demasiado pequeños para hacer clic y existe riesgo de error. Deberás hacer zoom para leer el email.

  • En tamaño grande
  • La anchura del correo no se ajusta a la anchura de la pantalla y sólo se ve una parte del contenido en su tamaño real. Las palabras o frases pueden aparecer partidas. La jerarquía de la información no es visible, por lo que es más difícil hacer una lectura seguida.

    Tienes que alejar el zoom para entender la estructura y localizar la información.

    Estas limitaciones no están relacionadas exclusivamente con el email marketing, son características de la web móvil en general. Si te diriges a una página web no optimizada te pasará lo mismo. ¿Quién no ha se ha encontrado nunca con esto?

    Para evitar que el usuario tenga que realizar un zoom inicial para ver todo el correo debes poner en la etiqueta < HEAD > una propiedad viewport. Esto te va a permitir adaptar automáticamente tu contenido a la anchura de la pantalla.

    Ejemplo :

    <meta name=”viewport” content=”width=device-width, initialscale=1”>

    width: tamaño en píxeles de la pantalla

    El diseño responsive consiste en la optimización de una página web o un email al máximo de soportes posibles. Esto se puede hacer para cada soporte por separado o de manera más global según los tamaños de las pantallas.

    ¿Cómo hacer que sea responsive?

    Se pueden utilizar varios métodos. Vamos a mostrarlos en los siguientes capítulos.

    El email fluido

    ¿QUÉ ES UN EMAIL FLUIDO?

    El email fluido es un diseño que se adapta a las pantallas grandes y pequeñas. El contenido cambia de tamaño automáticamente según la anchura del medio de reproducción, sin cambiar la estructura de la página. Si tu email está compuesto de una sola columna puedes usar el email fluido.

    email

    En el apartado de configuración del email, es conveniente definir las dimensiones en porcentaje de cada elemento.

    illu-pourcent

    El código a utilizar:

    style = "width : 80%; max-width : 600px; height : auto;"

    width: la anchura de la imagen en porcentaje para las pantallas pequeñas

    max-width: anchura máxima de la imagen para pantallas grandes y ordenadores

    height: altura automática para mantener la proporción de la imagen

    Atención: las propiedas max-width y min-width no son compatibles con las versiones de Outlook 2007, 2010 y 2013.

    El email responsive utilizando la Media Queries

    Para adaptar el contenido de tu correo electrónico a los distintos móviles es imprescindible utilizar Media Queries. Esta es una especificidad CSS3 para detectar la anchura del medio de lectura y aplicar un contenido diferente en función de la anchura del móvil.

    El método más utilizado consiste en apuntar el tamaño de pantalla en píxeles en CSS:

  • min-device-width: anchura mínima de la pantalla en píxeles CSS
  • max-device-width: anchura máxima de la pantalla en píxeles CSS
  • El código a utilizar:

    @media only screen and (max-device-width : 480px)

    Si nos fijamos en este ejemplo, el límite es de 480 píxeles. Esto significa que en los correos electrónicos recibidos inferiores a 480 px CSS se visualizará la versión optimizada.

    La preguntas de la Medias Queries permiten múltiples combinaciones, entre ellos 2 opciones a tener en cuenta:

    Selecciona en función de la orientación tu dispositivo (portrait para vertical o landscape para horizontal)

    Ejemplo:

    @media(max-device-width : 480px) and (orientation :portrait) {

    /* anchura por debajo de 480px y orientación del móvil en vertical */

    }

    Selección de acuerdo con la resolución de pantalla o de píxeles

    Ejemplo:

    @media (min-device-pixel-ratio: 1.5) {

    /* pantalla por debajo de 144dpi */

    }

    illu-adapt

    ESTABLECER EL ANCHO DEL CORREO ELECTRÓNICO DE RESPUESTA

    A continuación te presentamos un resumen de los diferentes smartphones en el mercado (los más vendido a sept de 2014):

    El ancho de píxel CSS del smartphone corresponde a la tercera columna de números

    tableau

    ¿QUÉ APLICACIONES DE MÓVILES SON COMPATIBLES?

    Las Media Queries han sido probadas en:

    Aplicación por defecto sobre

    Android 2.3

    Android 5

    BlackBerry 9930

    iPhone 5S avec iOS 7

    iPhone 5S avec iOS 8

    iPhone 6 avec iOS 8

    iPhone 6 Plus avec iOS 8

    Gmail App

    Android 5

    iOS 7

    iOS 8

    Yahoo App

    iOS8

    TouchDown App

    Android 5

    Safari

    Gmail

    Yahoo

    Outlook.com

    Compatibilidad

    Compatibilidad

    Compatibilidad

    Compatibilidad

    Compatibilidad

    Dependiendo del sistema operativo, algunas reglas no se toman en cuenta, esto puede ser el caso de las Media Queries. Recuerda probar tu campaña en tu móvil para asegurarse de que todo funciona correctamente.

    EL CÓDIGO DEL EMAIL RESPONSIVE

    La Media Queries deben integrarse en el < HEAD > del mensaje de la siguiente forma:

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf8">

    <style type="text/css">

    @media only screen and (max-device-width : 480px) {

    .contenedor{

     width: 80% !important;

    }

    .titulo-rojo{

     color: #F00 !important;

    }

    .img-mobile {

     width:80%! important;

    }

    .columna{

     width:80% !important;

     display:block !important;

    }

    .hide-mobile{

     display:none !important;

    }

    </style>

    </head>

    A continuación, el seguimiento de las etiquetas <BODY> en el contenido del email.

    En la Media Queries, sólo tiene que indicar los detalles de tu email y cómo debe aparecer en el móvil:

  • La clase CSS «contenedor» se utiliza para establecer la anchura de tablas porcentuales, aquí hemos indicado 80%
  • La clase CSS «titulo-rojo» permite cambiar el color del título en la versión para móviles
  • La clase CSS «img-movil» te permite cambiar el tamaño de la imagen como un porcentaje en función de la anchura del soporte de lectura, aquí indicamos el 80%
  • La clase CSS «columna» permite cambiar el correo electrónico de 2 columnas a una sola columna
  • La clase CSS «cacher-mobile» se utiliza para marcar los elementos de la versión clásica en la versión para móviles
  • Las clases CSS deben implementarse en el apartado < BODY > del código HTML según el elemento que desees modificar. Se debe añadir la regla de prioridad !important en los Media Queries para que el estilo sea utilizado en prioridad sobre el estilo indicado en < BODY >.

    Veamos un ejemplo:

    <body style="padding:0; margin:0">

    <table class="contenedor" align="center" width="600" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td style="padding:15px 0">

    <p class="titulo-rojo" style="font-family:Arial, Helvetica, sans-serif; color:#000; font-size:30px"><strong>Responsive design</strong></p>

    </td>

    </tr>

    <tr>

    <td style="padding-bottom:20px"><img class="img-mobile" src="image.jpg" width="600" height="150"></td>

    </tr>

    <tr>

    <td>

    <table class="contenedor" width="600" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td class="columna" style="line-height:20px">

    <p style="font-family:Arial, Helvetica, sans-serif;color:#000; font-size:16px"><strong>Título<</strong></p>

    <p style="font-family:Arial, Helvetica, sans-serif;color:#000; font-size:12px">

    El Lorem Ipsum es simplemente un texto falso utilizado en la composición y puesta en marcha de una página antes de su impresión.

    </td>

    <td width="15px" class="hide-mobile"> &nbsp; </td>

    <td class="columna" style="line-height:20px">

    <p style="font-family:Arial, Helvetica, sans-serif; color:#000; font-size:16px"><strong>Título<</strong></p>

    <p style="font-family:Arial, Helvetica, sans-serif; color:#000; font-size:12px">

    El Lorem Ipsum es simplemente un texto falso utilizado en la composición y puesta en marcha de una página antes de su impresión.

    </td>

    </tr>

    </table>

    </td>

    </tr>

    </table>

    </body>

    </html>

    EJEMPLOS DE EMAILS ADAPTADOS

    Newsletter de Mailify Software

    newsletter

    Newsletter creada por la Agencia Mailify

    emailing

    El EmailBuilder, un editor responsive

    Con Mailify EmailBuilder, crear newsletters se convierte en un juego de niños.

    El editor gráfico revolucionario de Mailify guía paso por paso al usuario en el diseño del mensaje. Sólo tienes que arrastrar y soltar los módulos de texto y/o visuales, ¡Y crearás tu newsletter sin esfuerzo ni conocimientos técnicos!

    builder

    CREACIÓN DE NEWSLETTERS RESPONSIVE

    responsive

    EmailBuilder de Mailify hace que tus mails sean automáticamente compatibles para smartphones. Sin necesidad de tocar el código HTML, EmailBuilder se encarga de optimizar la newsletter y permite visualizarla a tiempo real en formato móvil.

    Es posible empezar a crear desde una página en blanco o hacerlo desde una base y trabajar sobre ella:

    base

    También puedes utilizar plantillas creadas por diseñadores gráficos:

    modèle

    Se puede crear desde cero o a partir de un modelo elegido, y cada ajuste que hagas se adaptará automáticamente para visualizarlo en los móviles.

    adapté

    En un instante, el contenido del email se crea y se adapta a los smartphones.

    El EmailBuilder está disponible en el software de escritorio Mailify. Puedes descargar el software en https://es.mailify.com/prueba-gratis

    emailbuilder

    Conclusión

    El uso de smartphones y la lectura de mensajes en este soporte es algo habitual hoy en día. Si una empresa no tiene en cuenta este nuevo comportamiento, la comunicación por correo electrónico puede sufrir las consecuencias.Los correos electrónicos pueden adaptarse para su lectura en móviles gracias a los métodos enseñados.

    Al hacer tu newsletter responsive, estarás teniendo en cuenta a tus destinatarios favoreciendo la comodidad de lectura de tu email.

    Presentación de Mailify Sunrise

    Mailify Sunrise, como líder del Mercado europeo para enviar correos electrónicos masivos, ayuda a las empresas en la creación y gestión de campañas de correo electrónico.

    Desde 2001, el programa ha ido evolucionando continuamente para satisfacer las expectativas y necesidades de los usuarios, convirtiéndose hoy en una herramienta de marketing todo en uno: Email Marketing, SMS marketing, marketing automation, marketing predictivo, análisis anti-spam, creador de formularios, estadísticas avanzadas, retargeting...

    Todas estas funcionalidades han hecho de Mailify Software una solución completa, fácil de utilizar y la líder del sector.

    Como auténticos expertos de email marketing, Mailify ofrece consejos y buenas prácticas a través de libros, artículos en su blog y dando conferencias.

    LA APLICACIÓN: MAILIFY SUNRISE

    mailify

    El software presenta un nuevo aspecto e integra nuevas funcionalidades permitiendo a las empresas configurar facilmente sus campañas de mailing y hacerlas más eficaces.

    La aplicación Mailify te permite:

    icone

    Gestiona tus campañas de newsletter en local o online.

    icone

    Crea asombrosos emails sin esfuerzo.

    icone

    Automatiza tu marketing como las grandes empresas.

    icone

    Muestra tus formularios con pop-ins inteligentes.

    icone

    Analiza el rendimiento de tus campañas de un vistazo.