{"id":259096,"date":"2026-08-21T11:36:37","date_gmt":"2026-08-21T09:36:37","guid":{"rendered":"https:\/\/spotler.com\/blog\/mobile-email-design"},"modified":"2026-09-23T18:16:54","modified_gmt":"2026-09-23T16:16:54","slug":"diseno-email-movil","status":"publish","type":"blog","link":"https:\/\/spotler.com\/es-es\/blog\/diseno-email-movil","title":{"rendered":"El m\u00f3vil no es un escritorio m\u00e1s peque\u00f1o: c\u00f3mo dise\u00f1ar mejores emails para m\u00f3vil"},"content":{"rendered":"

Un email responsive no es necesariamente un email preparado para m\u00f3vil. Aprende a dise\u00f1ar teniendo en cuenta c\u00f3mo lee, hace scroll e interact\u00faa la gente con los emails en el m\u00f3vil, desde la primera pantalla hasta el \u00faltimo toque.<\/strong><\/p>\n

Hay una versi\u00f3n de m\u00ed que los especialistas en email marketing no querr\u00edan tener en su lista de correo a las 7:30 de la ma\u00f1ana.<\/p>\n

Voy en el tren, caf\u00e9 en mano, mirando todos los emails que han llegado durante la noche, y tengo un \u00fanico objetivo: quitar de en medio ese numerito rojo de notificaciones de la app de correo. Bienvenido al swipe-a-geddon<\/em>. Desliza. Borra. Desliza. Borra. Desliza. Borra.<\/p>\n

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\u00edas decirme.<\/p>\n

Pero conseguir que lo abra tampoco significa que te hayas ganado mi atenci\u00f3n.<\/p>\n

Cuando tengo m\u00e1s tiempo para mirar emails en el m\u00f3vil, a menudo abro uno y me pongo a hacer scroll de inmediato. Reviso el email r\u00e1pidamente y luego vuelvo del todo arriba si algo me ha llamado la atenci\u00f3n.<\/p>\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\u00f3vil como una versi\u00f3n reducida del de escritorio.<\/p>\n

Un email responsive puede funcionar t\u00e9cnicamente a la perfecci\u00f3n en un m\u00f3vil y aun as\u00ed ofrecer una mala experiencia m\u00f3vil. Puede que las columnas se apilen. Que las im\u00e1genes se redimensionen. Que el texto quepa en pantalla. Pero nada de eso significa que hayas dise\u00f1ado pensando en c\u00f3mo usa alguien su m\u00f3vil.<\/p>\n

El m\u00f3vil es un entorno distinto, con comportamientos distintos y mucha menos atenci\u00f3n. Un buen dise\u00f1o de email para m\u00f3vil no consiste simplemente en hacer que tu email de escritorio quepa en una pantalla m\u00e1s peque\u00f1a. Consiste en dise\u00f1ar para la persona que lo sostiene.<\/p>\n

Y a veces esa persona va en el tren de las 7:30 de la ma\u00f1ana, descartando sin piedad todo lo que te ha llevado un d\u00eda entero crear.<\/p>\n

<\/div>\n
\"Reading<\/figure>\n

Tus suscriptores no est\u00e1n sentados en un escritorio<\/h2>\n

Uno de los errores m\u00e1s f\u00e1ciles de cometer al dise\u00f1ar un email es olvidar el entorno en el que finalmente se va a leer.<\/p>\n

T\u00fa lo est\u00e1s montando probablemente en un port\u00e1til o en un monitor grande. Tienes rat\u00f3n, espacio de pantalla de sobra y, lo m\u00e1s importante, el email tiene toda tu atenci\u00f3n.<\/p>\n

Tu suscriptor puede estar viendo exactamente esa misma campa\u00f1a de pie en un tren, esperando a que hierva el agua o viendo algo por la tele a medias.<\/p>\n

Tiene una mano, un pulgar y bastante menos paciencia. Por eso dise\u00f1ar para m\u00f3vil no va solo del tama\u00f1o de la pantalla. Tienes que dise\u00f1ar para un nivel de atenci\u00f3n completamente distinto.<\/p>\n

Una apertura no significa que est\u00e9n leyendo<\/h2>\n

Esto es especialmente importante cuando miramos las aperturas. Que alguien abra tu email en el m\u00f3vil no significa necesariamente que se haya parado a leerlo. Yo soy el ejemplo perfecto.<\/p>\n

Cuando no estoy en modo\u00abswipe-a-geddon matutino\u00bb <\/em>y un email consigue captar mi atenci\u00f3n, muchas veces lo abro y me pongo a hacer scroll de inmediato.<\/p>\n

Recorro r\u00e1pido todo el email, casi sin pensar, antes de volver arriba si algo me ha llamado la atenci\u00f3n. Supongo que es culpa de Facebook, Twitter y todos los dem\u00e1s feeds infinitos por los que llevo a\u00f1os deslizando.<\/p>\n

Lo importante para los especialistas en email marketing es que en ese primer scroll no estoy leyendo de verdad. Estoy escaneando.<\/p>\n

Estoy buscando algo que me haga parar.<\/p>\n

Una imagen principal potente. Un titular grande y claro. Un producto interesante. Una oferta. Algo que le d\u00e9 a mi pulgar un motivo para tomarse unos segundos de descanso.<\/p>\n

\n

\u00abEn m\u00f3vil, la primera misi\u00f3n de tu email no siempre es que lo lean. Es detener el scroll.<\/strong>\u00bb<\/p>\n<\/blockquote>\n

Eso significa que una jerarqu\u00eda visual s\u00f3lida cobra a\u00fan m\u00e1s importancia. Tu suscriptor deber\u00eda poder recorrer el email r\u00e1pidamente y aun as\u00ed entender qu\u00e9 es importante, d\u00f3nde termina una secci\u00f3n y empieza otra, y qu\u00e9 merece su atenci\u00f3n.<\/p>\n

Quien lee en el m\u00f3vil puede ser implacable. Tu dise\u00f1o tiene que pon\u00e9rselo f\u00e1cil.<\/p>\n

<\/div>\n
\"\"<\/figure>\n

Responsive no significa autom\u00e1ticamente preparado para m\u00f3vil<\/h2>\n

La mayor\u00eda de las plantillas de email modernas son responsive. Es un buen punto de partida, pero no significa que el trabajo est\u00e9 hecho.<\/p>\n

Un email puede pasar todas las comprobaciones t\u00e9cnicas evidentes. Las columnas se apilan. Las im\u00e1genes se redimensionan. No se sale nada por el lateral de la pantalla.<\/p>\n

Y aun as\u00ed puede ser horrible de usar en un m\u00f3vil.<\/p>\n

Apilar no es lo mismo que dise\u00f1ar<\/h3>\n

Cuanto m\u00e1s complejo sea tu dise\u00f1o de escritorio, m\u00e1s hay que pensar en qu\u00e9 ocurre cuando todo ese contenido se comprime en una sola columna.<\/p>\n

Piensa en un bloque sencillo de dos columnas con una imagen a la izquierda y texto a la derecha. A\u00f1ade otro debajo con el texto a la izquierda y la imagen a la derecha.<\/p>\n

En escritorio queda genial.<\/p>\n

Deja que todo se apile autom\u00e1ticamente en m\u00f3vil y de repente puedes acabar con imagen, texto, texto, imagen. El patr\u00f3n visual que hab\u00edas creado con tanto cuidado en escritorio ha desaparecido.<\/p>\n

\n

\u00abAh\u00ed es donde cobran importancia t\u00e9cnicas como el intercambio de columnas.\u00bb<\/strong><\/p>\n<\/blockquote>\n

Puede que necesites cambiar deliberadamente el orden de tu contenido en m\u00f3vil para que cada imagen siga junto al texto al que pertenece.<\/p>\n

Los dise\u00f1os de tres columnas pueden ser a\u00fan m\u00e1s complicados. Lo que en escritorio parec\u00eda una fila bien ordenada puede convertirse en una secci\u00f3n largu\u00edsima una vez que esas tres columnas se apilan una encima de otra.<\/p>\n

A veces, la mejor respuesta es dejar de intentar que el dise\u00f1o de escritorio funcione.<\/p>\n

A veces el m\u00f3vil necesita su propia creatividad<\/h3>\n

En su d\u00eda, cuando trabajaba en las creatividades de Sainsbury’s Online, cambi\u00e1bamos con frecuencia las im\u00e1genes principales de escritorio por versiones espec\u00edficas para m\u00f3vil mediante CSS.<\/p>\n

La imagen de escritorio se hab\u00eda dise\u00f1ado para un espacio ancho. Simplemente reducirla pod\u00eda hacer que el producto, el mensaje o el punto focal perdieran mucha fuerza.<\/p>\n

As\u00ed que el m\u00f3vil ten\u00eda una imagen dise\u00f1ada espec\u00edficamente para m\u00f3vil.<\/p>\n

El mismo principio puede aplicarse a bloques de contenido enteros. Si una secci\u00f3n de escritorio especialmente compleja no funciona bien en un m\u00f3vil, a veces es mejor ocultarla en m\u00f3vil y construir una versi\u00f3n alternativa pensada para la pantalla peque\u00f1a.<\/p>\n

Por supuesto, eso lleva m\u00e1s tiempo y m\u00e1s recursos, y no ser\u00e1 necesario en todas las campa\u00f1as ni en todos los negocios. Pero pone de relieve una distinci\u00f3n importante:<\/p>\n