Skip to content
  • Home
  • Services
  • Cases
  • Who we are
  • es_ES
Contact
Blog, Email Móvil

Responsive Email Design: Cómo maquetar un email adaptable

14 de January de 2014 alecastellano Comments Off on Responsive Email Design: Cómo maquetar un email adaptable

En otro artículo avanzábamos cómo funcionan las reglas CSS que posibilitan la adaptación de nuestro diseño. Se trata de las media queries, un elemento que llega de la mano de CSS3 y cuyo funcionamiento podemos entender muy bien en la web http://mediaqueri.es/ dónde encontramos multitud de ejemplos de cómo puede cambiar una web según el ancho del dispositivo en el que se muestra. Si bien existe gran cantidad de información sobre Responsive Web Design, ya que es tendencia desde hace un par de años, no encontramos mucha información en la web específica sobre diseño de emails adaptables. No obstante, salvando las distancias,  es sencillo extrapolar la manera de trabajar en web al email. Los principales obstáculos que encontramos son debidos a los distintos clientes de email que interpretan los estilos de forma distinta. Así, si en diseño web, es un quebradero de cabeza hacer pruebas crossbrowser y comprobar que se visualiza igual en todos los navegadores, en email se suma el quebradero de cabeza de las distintas plataformas y niveles de compatibilidad.
En cualquier caso, dados los nuevos y crecientes datos sobre tasas de apertura móvil, cabe esperar que esta falta de adaptación a las últimas tecnologías en los clientes de email se irá solucionando pronto.
email-movil
Otro problema que nos encontramos es que los emails se maquetan de forma distinta a la web: tablas, estilos en línea… Y esto nos lleva a preguntarnos… ¿dónde metemos las media queries? Necesariamente tenemos que romper con la regla de los estilos en línea, dado que no es posible integrar estas reglas así. La solución es meter las reglas CSS en la cabecera del email entre las etiquetas <style></style>. Al hacer esto debemos entender que Gmail no tomará estas reglas. Podríamos pensar que entonces lo mejor es poner todas las reglas CSS del email dentro del código y dejar tan solo las media queries dentro de la etiqueta <style></style>, pero no olvidemos que las reglas CSS funcionan en cascada y esto quiere decir que las últimas reglas declaradas en el documento prevalecerán sobre las anteriores. Siendo así cualquier estilo inline sobreescribiría lo declarado en el head del email. Por tanto si queremos que nuestro email sea responsive tan solo podremos declarar inline normas de estilo generales que no vayan a ser modificadas según el ancho del dispositivo. Los estilos susceptibles de cambiar irán todos en el head, y las media queries a la cola de las reglas para que se tomen como prioridad en el caso de cada dispositivo. Algunos apuntan que añadir !important a las reglas CSS del head solucionaría la sobreescritura de los estilos en línea, pero en algunas pruebas que hemos realizado esto no es simpre así.
Veamos ahora unos detalles más técnicos de cómo se crearía una media query. Siempre que estéis familiarizados con las hojas de estilo os resultará sencillo. Simplemente se trata de declarar las reglas específicas para cada tamaño dentro de una declaración con esta forma:
@media only screen and (max-width: 480px) { … }
O incluso podemos especificar más dándole un ancho máximo y mínimo, por ejemplo:
@media only screen and (min-width: 480px) and (max-width: 768px) { … }
Dentro de los corchetes ubicaremos las reglas específicas de cada medida. No hay consenso sobre los puntos de cambio de las reglas, pero una definición lógica podría ser:
Móviles: Max-width:480px
Tableta: min-witdh:480px and max-width: 800px
Desktop: min-witdh:800px and max-width: 1200px
Desktop de alta resolución: min-width:1200px
En cualquier caso, en la fase de producción podemos detectar la necesidad de declarar otras media queries para ir corrigiendo algunos detalles que no acaben de encajar en las reglas más habituales. Si queréis saber más sobre cómo trabajamos desde la agencia las plantillas responsive para email, os recomendamos este artículo.
Nos gustaría saber más sobre vuestra experiencia con el Responsive Email Design, en este caso en su vertiente más técnica. ¿Habéis logrado superar los problemas de compatibilidad entre dispositivos y aplicaciones? ¿Conocéis ejemplos para tomar como referencia? ¿Debemos dar por perdido a Gmail en este camino? En esta fase de maduración, debates como este se hacen necesarios para acercarnos a un estándar técnico y en el modo de trabajar.
Para saber más sobre email responsive te recomendamos que le eches un vistazo a nuestro Webinar.

  • Responsive Email Design
alecastellano

Post navigation

Previous
Next

Search

Categories

Latest posts

  • BENCHMARK 2025: El email marketing en la industria de la gran distribución
  • cómo crear journeys que convierten
    Del lead a la fidelización: cómo crear journeys que convierten y retienen
  • Herramientas de marketing automation según tu madurez digital
    Cómo elegir la herramienta adecuada de marketing automation según tu madurez digital

Related posts

Agencia de email marketing
Agencia Email Marketing

Agencia de email marketing

19 de May de 2025 José Boix Comments Off on Agencia de email marketing

Agencia de email marketing en Barcelona En el entorno digital actual, conectar con los usuarios de forma personalizada es clave para el éxito de cualquier estrategia. En Barcelona, Digital Response se posiciona como una agencia de email marketing especializada en campañas de correo electrónico efectivas y automatizadas. ¿Por qué trabajar con una agencia experta en […]

Blog, Email Móvil

Responsive Email Design: recursos y materiales de nuestro webinar

20 de May de 2015 alecastellano Comments Off on Responsive Email Design: recursos y materiales de nuestro webinar

El pasado miércoles nos estrenamos con nuestro primer Webinar. La temática de este primer seminario fue el Responsive Email Design, un tema candente en el sector del email marketing que a muchos aún os da «miedo» por la falta de interpretación homogénea por parte de muchos clientes de email.

Blog, Email design

Yahoo soluciona sus problemas con las media queries

7 de April de 2015 alecastellano Comments Off on Yahoo soluciona sus problemas con las media queries

A principio de febrero, desde Fresh Inbox comenzaban una campaña para pedir a Yahoo que arreglase su incompatibilidad con las media queries que utilizamos para hacer nuestros emails responsive.

digitalResponse_claim_500

We work with CRM teams looking to scale their programmes, operational excellence and improve results.

Agency
  • Services
  • Cases
  • Who we are
  • Work with us
  • Contact
Social
  • Facebook
  • Twitter
  • Linkedin
  • Youtube
  • Spotify

2024 © Digital Response, all rights reserved. Web by sararovira.com

  • Legal notice
  • Privacy policy
  • Cookies
Gestionar consentimiento
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Always active
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
Manage options Manage services Manage {vendor_count} vendors Read more about these purposes
Ver preferencias
{title} {title} {title}