El móvil no es un escritorio más pequeño: cómo diseñar mejores emails para móvil

Un email responsive no es necesariamente un email preparado para móvil. Aprende a diseñar teniendo en cuenta cómo lee, hace scroll e interactúa la gente con los emails en el móvil, desde la primera pantalla hasta el último toque.

Hay una versión de mí que los especialistas en email marketing no querrían tener en su lista de correo a las 7:30 de la mañana.

Voy en el tren, café en mano, mirando todos los emails que han llegado durante la noche, y tengo un único objetivo: quitar de en medio ese numerito rojo de notificaciones de la app de correo. Bienvenido al swipe-a-geddon. Desliza. Borra. Desliza. Borra. Desliza. Borra.

Soy implacable. Ni las marcas que me gustan se salvan. Tu asunto tiene unos pocos segundos para hacerme parar y, si es tan largo que se ha cortado por la mitad, probablemente no voy a dedicar tiempo a reconstruir lo que querías decirme.

Pero conseguir que lo abra tampoco significa que te hayas ganado mi atención.

Cuando tengo más tiempo para mirar emails en el móvil, a menudo abro uno y me pongo a hacer scroll de inmediato. Reviso el email rápidamente y luego vuelvo del todo arriba si algo me ha llamado la atención.

En ese momento no estoy leyendo de verdad. Estoy buscando un motivo para parar. Y ese es el problema de tratar el email móvil como una versión reducida del de escritorio.

Un email responsive puede funcionar técnicamente a la perfección en un móvil y aun así ofrecer una mala experiencia móvil. Puede que las columnas se apilen. Que las imágenes se redimensionen. Que el texto quepa en pantalla. Pero nada de eso significa que hayas diseñado pensando en cómo usa alguien su móvil.

El móvil es un entorno distinto, con comportamientos distintos y mucha menos atención. Un buen diseño de email para móvil no consiste simplemente en hacer que tu email de escritorio quepa en una pantalla más pequeña. Consiste en diseñar para la persona que lo sostiene.

Y a veces esa persona va en el tren de las 7:30 de la mañana, descartando sin piedad todo lo que te ha llevado un día entero crear.

Tus suscriptores no están sentados en un escritorio

Uno de los errores más fáciles de cometer al diseñar un email es olvidar el entorno en el que finalmente se va a leer.

Tú lo estás montando probablemente en un portátil o en un monitor grande. Tienes ratón, espacio de pantalla de sobra y, lo más importante, el email tiene toda tu atención.

Tu suscriptor puede estar viendo exactamente esa misma campaña de pie en un tren, esperando a que hierva el agua o viendo algo por la tele a medias.

Tiene una mano, un pulgar y bastante menos paciencia. Por eso diseñar para móvil no va solo del tamaño de la pantalla. Tienes que diseñar para un nivel de atención completamente distinto.

Una apertura no significa que estén leyendo

Esto es especialmente importante cuando miramos las aperturas. Que alguien abra tu email en el móvil no significa necesariamente que se haya parado a leerlo. Yo soy el ejemplo perfecto.

Cuando no estoy en modo«swipe-a-geddon matutino» y un email consigue captar mi atención, muchas veces lo abro y me pongo a hacer scroll de inmediato.

Recorro rápido todo el email, casi sin pensar, antes de volver arriba si algo me ha llamado la atención. Supongo que es culpa de Facebook, Twitter y todos los demás feeds infinitos por los que llevo años deslizando.

Lo importante para los especialistas en email marketing es que en ese primer scroll no estoy leyendo de verdad. Estoy escaneando.

Estoy buscando algo que me haga parar.

Una imagen principal potente. Un titular grande y claro. Un producto interesante. Una oferta. Algo que le dé a mi pulgar un motivo para tomarse unos segundos de descanso.

«En móvil, la primera misión de tu email no siempre es que lo lean. Es detener el scroll.»

Eso significa que una jerarquía visual sólida cobra aún más importancia. Tu suscriptor debería poder recorrer el email rápidamente y aun así entender qué es importante, dónde termina una sección y empieza otra, y qué merece su atención.

Quien lee en el móvil puede ser implacable. Tu diseño tiene que ponérselo fácil.

Responsive no significa automáticamente preparado para móvil

La mayoría de las plantillas de email modernas son responsive. Es un buen punto de partida, pero no significa que el trabajo esté hecho.

Un email puede pasar todas las comprobaciones técnicas evidentes. Las columnas se apilan. Las imágenes se redimensionan. No se sale nada por el lateral de la pantalla.

Y aun así puede ser horrible de usar en un móvil.

Apilar no es lo mismo que diseñar

Cuanto más complejo sea tu diseño de escritorio, más hay que pensar en qué ocurre cuando todo ese contenido se comprime en una sola columna.

Piensa en un bloque sencillo de dos columnas con una imagen a la izquierda y texto a la derecha. Añade otro debajo con el texto a la izquierda y la imagen a la derecha.

En escritorio queda genial.

Deja que todo se apile automáticamente en móvil y de repente puedes acabar con imagen, texto, texto, imagen. El patrón visual que habías creado con tanto cuidado en escritorio ha desaparecido.

«Ahí es donde cobran importancia técnicas como el intercambio de columnas.»

Puede que necesites cambiar deliberadamente el orden de tu contenido en móvil para que cada imagen siga junto al texto al que pertenece.

Los diseños de tres columnas pueden ser aún más complicados. Lo que en escritorio parecía una fila bien ordenada puede convertirse en una sección larguísima una vez que esas tres columnas se apilan una encima de otra.

A veces, la mejor respuesta es dejar de intentar que el diseño de escritorio funcione.

A veces el móvil necesita su propia creatividad

En su día, cuando trabajaba en las creatividades de Sainsbury’s Online, cambiábamos con frecuencia las imágenes principales de escritorio por versiones específicas para móvil mediante CSS.

La imagen de escritorio se había diseñado para un espacio ancho. Simplemente reducirla podía hacer que el producto, el mensaje o el punto focal perdieran mucha fuerza.

Así que el móvil tenía una imagen diseñada específicamente para móvil.

El mismo principio puede aplicarse a bloques de contenido enteros. Si una sección de escritorio especialmente compleja no funciona bien en un móvil, a veces es mejor ocultarla en móvil y construir una versión alternativa pensada para la pantalla pequeña.

Por supuesto, eso lleva más tiempo y más recursos, y no será necesario en todas las campañas ni en todos los negocios. Pero pone de relieve una distinción importante:

• El diseño responsive pregunta: «¿Cabe este email en el móvil?»
• El diseño móvil pregunta: «¿Sigue funcionando este email en el móvil?»

No siempre son lo mismo.

Diseña el email móvil pantalla a pantalla

Existe la idea, muy asentada, de que los emails para móvil tienen que ser cortos. No estoy convencido de que sea así.

Yo hago scroll encantado por un email largo en el móvil si hay algo que merezca la pena. Las redes sociales nos han entrenado bastante bien a la mayoría en eso de recorrer contenido. La longitud no es necesariamente el problema.

«Un email móvil largo no es un mal email móvil. Uno mal estructurado, sí. Dale algo que hacer a cada pantalla.»

En lugar de pensar en el email como una única pieza creativa larga, piensa en cómo se siente pantalla a pantalla.

• Mientras hago scroll, ¿hay algo que me llame la atención?
• ¿Distingo de inmediato qué es importante?
• ¿Las imágenes, los titulares y las llamadas a la acción le dan al email un ritmo claro?
• ¿O todo compite por la atención a la vez?

Aquí es donde una imagen principal potente y un titular grande y claro pueden funcionar especialmente bien. Cuando abro un email en el móvil, suelen ser lo primero que me hace bajar el ritmo y fijarme.

Esa misma lógica debería seguir aplicándose más abajo en el email.

No necesitas un CTA en cada pantalla ni un titular enorme cada pocos cientos de píxeles. Pero sí necesitas la jerarquía visual suficiente para que alguien pueda escanear la campaña rápido sin que se convierta en un muro interminable de contenido que compite entre sí.

No desperdicies tu primera pantalla

La parte superior del email tiene una misión especialmente importante.

En escritorio tienes el lujo de un viewport mucho más grande. En móvil, tu logotipo, tu imagen principal y tu titular pueden consumir con facilidad toda la primera pantalla.

Eso está bien si están haciendo algo útil. Está menos bien si tu suscriptor tiene que hacer scroll para poder siquiera averiguar por qué le has escrito.

Piensa en qué puede entender alguien antes de ese primer deslizamiento. No necesita toda la historia. Pero sí debería tener información suficiente para decidir si el resto del email merece su atención.

Diseña para pulgares, no para cursores

El cursor del ratón es increíblemente preciso. Tu pulgar… menos.

Y aun así, muchos emails se siguen diseñando como si los suscriptores fueran a colocar cuidadosamente un cursor justo encima del fragmento de texto enlazado correcto.

En móvil, todo necesita un poco más de espacio. Haz que lo importante sea fácil de pulsar.

Los botones deberían parecer botones y comportarse como tales. Los enlaces de texto necesitan espacio suficiente alrededor. Y si tienes varios elementos clicables muy juntos, asegúrate de que tu suscriptor pueda pulsar cómodamente el que quiere.

Todos hemos vivido la frustración de intentar pulsar un enlace diminuto y abrir sin querer el de al lado.

Es aún peor cuando un email no se ha optimizado bien para móvil y te ves haciendo pinza y zoom solo para leer el texto o llegar a un CTA.

Esto es algo que sigo viendo sorprendentemente a menudo en emails B2B.

Una imagen no se ha dimensionado correctamente, revienta el ancho del email y de repente toda la campaña parece rota en el móvil.

El texto se vuelve minúsculo, la maquetación se estira y el suscriptor se queda haciendo zoom y moviéndose por la pantalla solo para entender qué está pasando.

En ese punto, has convertido leer tu email en un trabajo. Y quienes leen en el móvil no destacan precisamente por su paciencia.

Haz que tu texto sea cómodo de leer

El mismo principio se aplica a tu texto.

Un párrafo que parece perfectamente razonable en una pantalla de escritorio grande puede resultar de repente denso y difícil de leer cuando se comprime en un móvil.

El tamaño de fuente es el punto de partida evidente. Como guía general, a mí me gusta moverme en torno a:

• H1: 28-32 px
• H2: 24-28 px
• H3: 20-24 px
• Texto de cuerpo: 16 px

No son reglas. Tu tipografía, tus directrices de marca y el diseño de tu email influirán en lo que funcione. Lo importante es mirar tu tipografía en un móvil, en lugar de dar por hecho que los tamaños de escritorio se trasladarán bien.

Y, por favor, ¡no te olvides del interlineado!

Dale aire a tu texto

El interlineado no recibe ni de lejos la atención que merece en el diseño de emails.

Puedes elegir un texto de cuerpo de 16 px perfectamente legible y luego hacerlo innecesariamente difícil de leer amontonando cada línea contra la siguiente.

Es algo que veo constantemente en móvil.

Dale aire a tu texto. Para el texto de cuerpo, un interlineado de alrededor de 1,5 a 1,6 veces el tamaño de la fuente suele ser un buen punto de partida. Así que, si usas un cuerpo de 16 px, podrías situarte en torno a 24-26 px de interlineado.

De nuevo, eso es un punto de partida, no una regla. Lo que importa es cómo se siente al leerlo en un móvil de verdad.

Lo mismo vale para tus titulares. Necesitan espacio suficiente para respirar, pero ojo con arrastrar a móvil una tipografía de escritorio enorme. Un titular de 48 px puede quedar fantástico en una pantalla grande y luego ocupar medio viewport cuando alguien abre el email en su móvil.

He visto exactamente eso en campañas reales. Técnicamente todo funcionaba en móvil, pero nadie había ajustado los tamaños de los titulares, y el resultado eran encabezados ridículamente grandes dominando el email.

¿Responsive? Sí. ¿Buen diseño móvil? En realidad, no.

Y tampoco des por hecho que la respuesta sea hacerlo todo más pequeño.

Una buena tipografía móvil consiste en encontrar el equilibrio entre legibilidad, jerarquía y espacio. Tu suscriptor debería poder distinguir de inmediato un titular de un subtítulo y del texto de cuerpo sin que nada de ello resulte incómodo de leer.

No desperdicies el clic

Si alguien ha dejado de hacer scroll, ha encontrado algo que le interesa y lo ha pulsado, ya has hecho la parte difícil. ¡Enhorabuena!

Pero no le hagas trabajar para lo siguiente. Si veo una chaqueta que me gusta en un email B2C y pulso la imagen, espero aterrizar en la página de producto de esa chaqueta.

No en la categoría de chaquetas. Ni en la home. Ni en una página con 57 chaquetas distintas donde ahora tengo que buscar la que me llamó la atención en primer lugar.

Llévame a lo que he pulsado.

Compro encantado desde el móvil cuando el recorrido es así de simple. Producto, cesta, checkout. Pero hazme buscar el producto otra vez y hay muchas probabilidades de que simplemente cierre la web.

La misma regla se aplica al B2B

La conversión puede ser distinta, pero el principio no. Si alguien pulsa un seminario web en tu email, llévalo directamente a la página de inscripción.

Si pulsa un artículo del blog, llévalo al artículo. Si quiere descargarse una guía, llévalo a la guía.

Si ha decidido reservar una demo, no le hagas rebuscar por tu web intentando averiguar cómo.

En muchas campañas B2B, leer el artículo o inscribirse en el evento es la conversión que estás intentando lograr.

Ya has convencido a alguien de que pare lo que estaba haciendo en su móvil y te preste atención. No lo eches a perder añadiendo pasos innecesarios.

«Cada toque de más entre el email y lo que alguien buscaba es otra oportunidad de perderlo.»

Piensa más allá del email

Por suerte, las webs móviles completamente inutilizables ya no son tan habituales como antes. El diseño web responsive ha avanzado mucho.

Pero eso no significa que podamos dejar de probar qué ocurre después del clic. Recorre tú mismo el trayecto.

• ¿Se abre la página correcta?
• ¿Es inmediatamente evidente el contenido por el que han hecho clic?
• ¿Es cómodo rellenar un formulario en el móvil?
• ¿Pueden completar la acción que les estás pidiendo?

Es otra razón por la que juzgar una campaña de email únicamente por el email puede llevar a engaño. Como ya vimos en por qué fallan las campañas de email y cómo solucionarlo, la experiencia no termina cuando alguien pulsa tu CTA.

El email lo ha llevado hasta ahí. El resto del recorrido todavía tiene que rematar la faena.

Prueba en un móvil, no solo en una ventana de vista previa

La mayoría de las plataformas de email te ofrecen algún tipo de vista previa móvil, y son utilísimas mientras construyes una campaña.

Pero una ventana de vista previa no es un móvil. Antes de que salga una campaña importante, envíate una prueba y usa el email en tu móvil.

• Haz scroll
• Pulsa los botones
• Lee el texto
• Fíjate en cuánto se ve de la imagen principal en la primera pantalla
• Comprueba si esos bloques de contenido tan cuidadosamente espaciados siguen pareciendo cuidadosamente espaciados cuando los tienes a quince centímetros de la cara.

«No solo buscas cosas que estén rotas. Buscas cosas que resulten molestas.»

Prueba la experiencia

Aquí conviene distinguir dos tipos de prueba:

• Las pruebas de renderizado ayudan a responder: «¿Se muestra correctamente mi email?»
• Usar el email tú mismo ayuda a responder: «¿Es realmente agradable de usar?»

Ambas importan.

Un email puede renderizarse exactamente como pretendías y aun así tener un titular que resulta enorme, un párrafo incómodo de leer, un CTA difícil de pulsar o una imagen principal que cuesta tres deslizamientos superar.

Esos no son necesariamente problemas de renderizado. Son problemas de usabilidad.

También merece la pena comprobar tu campaña en modo oscuro, sobre todo si tu email depende mucho de los colores de marca, de imágenes con transparencia o de contrastes elegidos con cuidado. Lo que se ve genial en tu bandeja de entrada móvil habitual puede comportarse de forma muy distinta cuando entra en juego el modo oscuro.

Dale el móvil a otra persona

Y no seas tú la única persona que lo prueba.

Para cuando has terminado de construir un email, ya sabes cómo se supone que funciona. Sabes qué botón hay que pulsar. Sabes qué sección importa. Sabes qué intenta decir el titular.

Quien lo ve por primera vez no tiene nada de ese contexto. Por eso siempre recomiendo que otra persona pruebe la campaña antes de que salga.

Como conté en mi checklist de QA para email, o el test de las suposiciones, no necesitas un segundo par de ojos porque seas descuidado. Los necesitas porque estás demasiado cerca de la campaña.

Dale el email a otra persona en su móvil y déjala hacer scroll, pulsar e interactuar con él de forma natural. Si algo le cuesta, probablemente también les cueste a tus suscriptores.

Un buen diseño móvil suele ser también un buen diseño accesible

Hay mucho solapamiento entre diseñar un email más fácil de usar en móvil y diseñar un email más accesible.

Un texto más grande y legible ayuda a quien usa una pantalla pequeña. También ayuda a quien tiene visión reducida.

Un interlineado generoso hace los párrafos más fáciles de digerir en un móvil. También ayuda a personas con dislexia y otras dificultades cognitivas o visuales.

Una jerarquía visual clara ayuda a quien recorre un email a toda velocidad. También hace el contenido más fácil de entender y de navegar.

Los botones más grandes son más fáciles de acertar con el pulgar. También son más fáciles para personas con destreza reducida.

Un buen contraste de color importa cuando lees el móvil en la calle a pleno sol. Importa todavía más para alguien con una discapacidad visual.

«Buena parte de lo que llamamos optimización móvil es sencillamente hacer que un email le resulte más fácil de usar a un ser humano.»

No dejes la accesibilidad móvil para el final

Esta es otra razón por la que la accesibilidad no debería ser algo que compruebas una vez que el diseño ya está construido.

Si tu punto de partida es una tipografía legible, una jerarquía clara, un espaciado suficiente y llamadas a la acción evidentes, ya has resuelto muchos posibles problemas de móvil y de accesibilidad antes incluso de empezar a probar.

Hay, por supuesto, consideraciones de accesibilidad que van mucho más allá del diseño móvil. La estructura semántica, el texto ALT, los lectores de pantalla y el papel creciente de la IA merecen atención por derecho propio, algo que he tratado con más detalle en accesibilidad del email para humanos e IA.

Pero aquí hay un principio útil.

«Si haces que un email sea más fácil de ver, leer, entender y usar en un móvil, hay muchas probabilidades de que también lo estés haciendo más fácil de usar para más personas.»

El test de las suposiciones en móvil

Antes de enviar tu próxima campaña, aparta un momento la vista previa de escritorio y abre el email de prueba en tu móvil. Después, pregúntate:

• ¿Entiendo de qué va el email desde la primera pantalla?
• Si empiezo a hacer scroll de inmediato, ¿es la jerarquía visual lo bastante fuerte como para hacerme parar?
• ¿Puedo leer cómodamente el texto de cuerpo sin hacer zoom, y le da el interlineado aire suficiente?
• ¿Puedo pulsar con el pulgar, sin dificultad, todos los botones y enlaces importantes?
• ¿Sigue teniendo sentido el contenido después de que las columnas se hayan apilado o cambiado de orden?
• ¿Hay algo que ocupe muchísimo más espacio de pantalla del que merece?
• Cuando pulso algo, ¿aterrizo exactamente donde esperaba?

Si respondes que no a alguna de esas preguntas, no te preguntes solo si el email es responsive. Pregúntate si se ha diseñado para móvil.

Y si quieres llevar esa idea más lejos, pasa toda la campaña por mi checklist de QA para email, o el test de las suposiciones antes de pulsar Enviar.

Diseña para la pantalla que está usando tu suscriptor

Diseñar emails para móvil no consiste en encajar una campaña de escritorio en una pantalla más pequeña.

Consiste en reconocer que la persona que sostiene esa pantalla se comporta de otra manera.

Puede que vaya al trabajo. Puede que esté viendo la tele. Puede que tenga 30 segundos para vaciar la bandeja de entrada antes de una reunión. O puede que sea yo a las 7:30 de la mañana, descartando sin piedad emails perfectamente buenos en busca de ese precioso cerito rojo.

No puedes controlar la situación en la que aterriza tu email. Pero sí puedes diseñar pensando en ella.

Haz que el asunto merezca una parada. Haz que la primera pantalla trabaje de verdad. Dale a tu contenido una jerarquía visual clara. Haz que el texto sea cómodo de leer y que cada acción importante sea fácil de pulsar.

Y después, mete el email en un móvil de verdad y úsalo.

Lo habrás conseguido cuando la experiencia tenga sentido para la persona que lo sostiene.