{"id":64409,"date":"2023-05-18T09:11:08","date_gmt":"2023-05-18T09:11:08","guid":{"rendered":"https:\/\/mailrelay.com\/?post_type=glossary&p=64409"},"modified":"2026-10-07T06:42:58","modified_gmt":"2026-10-07T06:42:58","slug":"email-responsive","status":"publish","type":"glossary","link":"https:\/\/mailrelay.com\/es\/glosario\/email-responsive\/","title":{"rendered":"Email responsive"},"content":{"rendered":"\n

Abres una newsletter en el m\u00f3vil y tienes que hacer zoom para leer el texto. Las im\u00e1genes se salen de la pantalla y el bot\u00f3n es tan peque\u00f1o que pulsas el enlace equivocado. Lo m\u00e1s probable es que cierres el correo en pocos segundos. Eso es justo lo que un email responsive evita.<\/p>\n\n\n\n

\u00bfQu\u00e9 es un email responsive?<\/h2>\n\n\n\n

Un email responsive, o correo electr\u00f3nico adaptable, es un email dise\u00f1ado para ajustarse de forma autom\u00e1tica al tama\u00f1o de la pantalla en la que se abre. Se ve bien en un ordenador, en una tableta y en un m\u00f3vil.<\/p>\n\n\n\n

Para conseguirlo, el dise\u00f1o reorganiza sus elementos seg\u00fan el espacio disponible. En pantallas grandes puede mostrar dos o tres columnas. En el m\u00f3vil, esas columnas se apilan una debajo de otra, el texto mantiene un tama\u00f1o legible y los botones crecen para que sea f\u00e1cil pulsarlos.<\/p>\n\n\n\n

El concepto viene del responsive design<\/a> de las p\u00e1ginas web. Pero el email tiene sus propias reglas, porque cada programa de correo interpreta el c\u00f3digo a su manera.<\/p>\n\n\n\n

Por qu\u00e9 es imprescindible<\/h2>\n\n\n\n

Una gran parte de tus suscriptores leer\u00e1 tus campa\u00f1as en el m\u00f3vil. Muchas veces lo har\u00e1n en momentos breves: en el transporte, en una pausa o mientras esperan. Si el email no se lee bien a la primera, no le dar\u00e1n una segunda oportunidad.<\/p>\n\n\n\n

Un dise\u00f1o adaptable mejora la experiencia de lectura y eso se nota en tus resultados. Aumenta los clics, porque los enlaces y botones son f\u00e1ciles de usar. Reduce las bajas y las quejas, porque el suscriptor no se frustra. Y refuerza la imagen de tu marca, que parece m\u00e1s cuidada y profesional.<\/p>\n\n\n\n

Adem\u00e1s, un correo que se lee con comodidad genera m\u00e1s interacci\u00f3n. Esa interacci\u00f3n positiva tambi\u00e9n favorece tu entregabilidad<\/a> a medio plazo.<\/p>\n\n\n\n

C\u00f3mo funciona un email responsive<\/h2>\n\n\n\n

El email se construye con HTML<\/a> y estilos CSS<\/a>. Hay tres enfoques principales para que se adapte:<\/p>\n\n\n\n

Dise\u00f1o fluido.<\/strong> Los anchos se definen en porcentajes en lugar de p\u00edxeles. El contenido se estira o se encoge seg\u00fan la pantalla. Es sencillo, aunque ofrece poco control.<\/p>\n\n\n\n

Dise\u00f1o con media queries.<\/strong> Son reglas CSS que aplican estilos distintos seg\u00fan el ancho de la pantalla. Por ejemplo: \u00absi la pantalla mide menos de 600 p\u00edxeles, apila las columnas y agranda el texto\u00bb. Gmail y Apple Mail las interpretan, pero algunas versiones de Outlook para escritorio no.<\/p>\n\n\n\n

Dise\u00f1o h\u00edbrido.<\/strong> Combina los dos anteriores para que el correo se vea bien incluso en los programas que ignoran las media queries. Es el m\u00e9todo m\u00e1s robusto y el que usan muchas plantillas profesionales.<\/p>\n\n\n\n

\"Email<\/figure>\n\n\n\n

Claves para dise\u00f1ar un email responsive<\/h2>\n\n\n\n

Estas son las buenas pr\u00e1cticas m\u00e1s importantes:<\/p>\n\n\n\n

    \n
  1. Usa una sola columna en el m\u00f3vil:<\/strong> es la estructura m\u00e1s f\u00e1cil de leer en pantallas estrechas.<\/li>\n\n\n\n
  2. Limita el ancho a unos 600 p\u00edxeles:<\/strong> es el est\u00e1ndar que se ve bien en la mayor\u00eda de programas de escritorio.<\/li>\n\n\n\n
  3. Cuida el tama\u00f1o de letra:<\/strong> al menos 14 p\u00edxeles para el texto y algo m\u00e1s para los titulares.<\/li>\n\n\n\n
  4. Haz botones grandes:<\/strong> la gu\u00eda de dise\u00f1o de Apple recomienda \u00e1reas t\u00e1ctiles de al menos 44 \u00d7 44 puntos. Un bot\u00f3n de ese tama\u00f1o se pulsa sin errores con el dedo.<\/li>\n\n\n\n
  5. Adapta las im\u00e1genes:<\/strong> deben ocupar como m\u00e1ximo el 100 % del ancho disponible y pesar poco para cargar r\u00e1pido con datos m\u00f3viles.<\/li>\n\n\n\n
  6. Escribe un buen texto alternativo:<\/strong> el alt text<\/a> aparece cuando las im\u00e1genes est\u00e1n bloqueadas.<\/li>\n\n\n\n
  7. Coloca lo importante arriba:<\/strong> en el m\u00f3vil, el asunto<\/a>, el preheader<\/a> y el primer bloque deben dejar claro el mensaje y el call to action<\/a>.<\/li>\n<\/ol>\n\n\n\n

    Un dise\u00f1o de email modular<\/a> facilita mucho este trabajo. Cada bloque est\u00e1 preparado para reorganizarse sin romper el conjunto.<\/p>\n\n\n\n

    C\u00f3mo comprobar que tu email se ve bien<\/h2>\n\n\n\n

    Nunca env\u00edes una campa\u00f1a sin revisarla antes. M\u00e1ndate una prueba y \u00e1brela en tu m\u00f3vil y en tu ordenador, en distintos programas de correo si puedes.<\/p>\n\n\n\n

    F\u00edjate en si el texto se lee sin hacer zoom, si las im\u00e1genes se ajustan y si los botones se pulsan con facilidad. Tambi\u00e9n conviene revisar c\u00f3mo se ve en modo oscuro, cada vez m\u00e1s habitual.<\/p>\n\n\n\n

    Si quieres entender por qu\u00e9 un mismo correo cambia de un programa a otro, te lo explicamos en la entrada sobre email rendering<\/a>.<\/p>\n\n\n\n

    Despu\u00e9s del env\u00edo, analiza tus m\u00e9tricas. Si tu CTR<\/a> en m\u00f3vil es mucho m\u00e1s bajo que en escritorio, es una se\u00f1al de que algo falla en la versi\u00f3n m\u00f3vil.<\/p>\n\n\n\n

    C\u00f3mo te ayudamos desde Mailrelay<\/h2>\n\n\n\n

    En Mailrelay te lo ponemos f\u00e1cil para crear emails adaptables sin tocar c\u00f3digo. Nuestro editor genera correos responsive de forma autom\u00e1tica y puedes partir de una plantilla de email<\/a> ya preparada para el m\u00f3vil. Tambi\u00e9n puedes enviarte pruebas antes de lanzar cada campa\u00f1a.<\/p>\n\n\n\n

    Todo ello en un plan gratuito de hasta 80.000 correos al mes y 20.000 contactos. Si quieres probarlo, puedes crear tu cuenta de email marketing<\/a> en Mailrelay hoy mismo.<\/p>\n\n\n\n

    Preguntas frecuentes sobre el email responsive<\/h2>\n\n\n\n

    \u00bfQu\u00e9 diferencia hay entre un email responsive y uno mobile friendly?<\/strong> Un email mobile friendly se ve correctamente en el m\u00f3vil, a menudo porque es sencillo y de una sola columna. Uno responsive va m\u00e1s all\u00e1: cambia su estructura seg\u00fan la pantalla.<\/p>\n\n\n\n

    \u00bfNecesito saber programar para crear un email responsive?<\/strong> No. Los editores de arrastrar y soltar de las herramientas de email marketing generan el c\u00f3digo adaptable por ti.<\/p>\n\n\n\n

    \u00bfQu\u00e9 ancho debe tener una newsletter?<\/strong> Lo habitual es entre 600 y 640 p\u00edxeles en escritorio. En el m\u00f3vil, el dise\u00f1o se ajusta al ancho de la pantalla.<\/p>\n\n\n\n

    En conclusi\u00f3n<\/h2>\n\n\n\n

    Un email responsive garantiza que tu mensaje llegue bien a cada suscriptor, sea cual sea su dispositivo. Es la base para que el resto de tu campa\u00f1a funcione: el contenido, el dise\u00f1o y la llamada a la acci\u00f3n.<\/p>\n\n\n\n

    Usa una estructura sencilla, cuida el tama\u00f1o de textos y botones y revisa siempre tus env\u00edos antes de lanzarlos. As\u00ed cada correo tendr\u00e1 las mejores opciones de conseguir clics.<\/p>\n\n\n\n

    Entradas relacionadas<\/h2>\n\n\n\n