Algunos consejos para crear emails responsive
Para conseguir un diseño responsive adecuado para el correo electrónico hay que tomar en cuenta muchas variables. Se deben seguir ciertos lineamientos para que que funcione en todos los clientes de correo principales. Con este estandar, el correo electrónico se adaptará al tamaño de pantalla y el diseño es responsive para garantizar que todos los usuarios tengan la experiencia óptima.
Diseñar para Móvil Primero
El correo electrónico que se abre en los teléfonos inteligentes ha aumentado a más de la mitad. Considerando esto se debe diseñar con la mentalidad móvil primero.
Los emails no son páginas web
Lo más importante a tomar en cuenta es que los emails no son páginas web. Puntos importantes a considerar:
Es recomendable utilizar tablas en lugar de divisiones ya que ciertas versiones outlook y otros clientes de correo no ven los <div>. Las tablas son la forma más confiable de lograr un diseño uniforme.
Se deben usar los estilos en línea (inline) dentro de cada etiqueta ya que ciertos dispositivos/clientes no soportan estilos incrustados (Por ejemplo algunos clientes de Gmail, como la aplicación de Gmail para Android).
La resolución máxima a la que se verán los emails en ciertos clientes es 600 pixels
No se puede usar Javascript
No se puede hacer referencia a un CSS externo
Algunos clientes de correo no soportan la etiqueta de <body>
Los estilos deben ser inline
Los estilos por defecto (los que están fuera de la media-query) deben ir en línea (inline), es decir, dentro de la propia etiqueta HTML en el atributo style. Por ejemplo:
<td style="font-size: 0px; padding: 20px 0; text-align: center;" align="center">
De preferencia a un diseño de una sola columna
El formato de una columna es fácilmente legible, mientras que dos o más columnas abarrotan una pantalla pequeña. Considere un enfoque híbrido para que su correo electrónico se vea como un correo electrónico responsive en las aplicaciones de terceros que no admiten media queries.
Tome ventaja de la alineación de las tablas
Con las tablas, puede aprovechar el atributo align. Cuando se usa align = ”left”, las tablas se apilan unas sobre otras en pantallas más pequeñas. Esta técnica es la base de un diseño fluido y responsive. Si tiene dos tablas de 300 px de ancho cada una con align = ”left” dentro del mismo contenedor y si la pantalla tiene 600 píxeles o más de ancho (como sería para la mayoría de los clientes de escritorio), las tablas aparecerán una al lado de la otra. Si la pantalla tiene solo 400 px de ancho, las dos tablas se apilarán una encima de la otra. Las tablas anidadas son totalmente seguras para email.
Use Media Queries concienzudamente
Los media queries son una serie de reglas condicionales que se basan en la resolución de la pantalla del dispositivo para aplicar unas reglas de estilos u otras. Sin embargo no todos los dispositivos soportan los media queries. Se puede utilizar media query en el caso que desee hacer que su diseño responsive sea híbrido y que se muestre de manera distinta para en la computadora o en el teléfono. Acá colocamos un ejemplo de media query que puede colocar después de las etiquetas meta.
Se debe añadir el sufijo “!important” a cada sentencia dentro de la media-query.
Esto hay que hacerlo porque los estilos definidos en línea tienen mayor importancia que los definidos dentro de la etiqueta <style>. Se debe añadir el “!important” para alterar dicha prioridad.
No todos los dispositivos soportan media query
Tenga en cuenta que los media queries se activarán por el tamaño de la ventana gráfica del dispositivo. Los tamaños de las ventanas gráficas pueden variar drásticamente según el tamaño de la pantalla física del teléfono, la resolución de la pantalla y la densidad de píxeles o la proporción de píxeles del dispositivo.
Soporte de Media Query en teléfonos
iOS (iPhone/iPad) ......................................................... Sí
Android 4.x cliente nativo .......................................... Sí
Android Outlook Exchange via cliente nativo ..... No
Aplicación Android Outlook.com ............................ No
Aplicación Android Gmail ........................................ No
Aplicación Android Yahoo! Mail .............................. No
Aplicación Android Samsung Mail ......................... Sí
Gmail (Android Browser) .......................................... No
Outlook.com (Android Browser) ............................. No
Yahoo! Mail (Android Browser) ............................... No
Windows Phone 7 ...................................................... No
Windows Phone 7.5 ................................................... Sí
Windows Phone 8 ..................................................... No
BlackBerry OS 6 ........................................... ............ Sí
BlackBerry OS 7 ........................................................ Sí
BlackBerry Z10 ........................................................... Sí
Kindle Fire cliente nativo ......................................... Sí
Última actualización 4 diciembre 2020
Utilice Procentaje + tamaño máximo para suplantar los Media Query
Muchos dispositivos no soportan los media query. Puede utilizar los media queries si lo considera necesario, sin embargo le recomendamos utilizar tablas con tamaños en porcentaje y un tamaño máximo de tabla de 540 a 600 pixeles. Puede ver ejemplos de esto en todas las plantillas de la librería del editor drag and drop de email de DANAConnect. Acá le incluimos también un ejemplo del código de una tabla:
<table width="100%" style="margin-right: auto; margin-left: auto; width: 100%; max-width: 540px;">
Evite CSS abreviado cuando sea posible
Verifique que no esté utilizando una declaraciones de estilos abreviadas. Por ejemplo, “margin-top: 5px” puede funcionar donde “margin: 5px 0 0 0;” no funcione. También es importante evitar los códigos hexadecimales para los colores que sean de tres dígitos. Algunos clientes no los reconocerán, por lo que querrá asegurarse de usar siempre el código hexadecimal completo de seis dígitos.
Ponga las imágenes del tamaño final
Ciertos clientes como Outlook no toman en cuenta el ancho o alto colocado en el estilo de la imagen por lo que las imágenes se muestran del tamaño original que están el archivo gráfico. Para evitar que las imágenes se vean en algunos casos "gigantes" trate siempre editar el tamaño de la imagen en el archivo original al tamaño (píxeles) que quiere que se muestre finalmente en el email.
No coloque el video en el email directamente
Muchos clientes de correo no reproducirá el video dentro del email. En lugar de agregar la etiqueta de video para reproducir un video directamente dentro del correo electrónico, utilice una imagen fija con un botón de reproducción que tenga un link a una página en donde se pueda reproducir el video.
Mantenga el tamaño del archivo de correo electrónico por debajo de 100 kb
Es ideal mantener su correo electrónico por debajo de 100 kb. Pasará a través de más filtros de spam si se mantiene ligero y mantener su correo electrónico por debajo de 102 kb también evitará que Gmail “recorte” su correo electrónico.
Incluya un texto previo “pre-header”
La mayoría de clientes de correo muestran un texto previo que normalmente son las primeras líneas del cuerpo del correo. Utilice esta técnica para mostrar el texto previo que usted decida y no lo que está por defecto. Ver el artículo
TESTING: La práctica de correo electrónico más importante
Incluso si utiliza estas prácticas recomendadas para el correo electrónico, la parte más importante son las pruebas de que sus correos electrónicos se vean bien en diferentes dispositivos.
Cada cliente de correo electrónico tiene diferentes peculiaridades cuando se trata de renderizar código. Outlook para escritorio (2007, 2010, 2013 y 2016) puede resultar especialmente complicado. La única forma de saber que su correo electrónico se verá bien en todas partes es probarlo.
Diseñar para Móvil Primero
El correo electrónico que se abre en los teléfonos inteligentes ha aumentado a más de la mitad. Considerando esto se debe diseñar con la mentalidad móvil primero.
Los emails no son páginas web
Lo más importante a tomar en cuenta es que los emails no son páginas web. Puntos importantes a considerar:
Es recomendable utilizar tablas en lugar de divisiones ya que ciertas versiones outlook y otros clientes de correo no ven los <div>. Las tablas son la forma más confiable de lograr un diseño uniforme.
Se deben usar los estilos en línea (inline) dentro de cada etiqueta ya que ciertos dispositivos/clientes no soportan estilos incrustados (Por ejemplo algunos clientes de Gmail, como la aplicación de Gmail para Android).
La resolución máxima a la que se verán los emails en ciertos clientes es 600 pixels
No se puede usar Javascript
No se puede hacer referencia a un CSS externo
Algunos clientes de correo no soportan la etiqueta de <body>
Los estilos deben ser inline
Los estilos por defecto (los que están fuera de la media-query) deben ir en línea (inline), es decir, dentro de la propia etiqueta HTML en el atributo style. Por ejemplo:
<td style="font-size: 0px; padding: 20px 0; text-align: center;" align="center">
De preferencia a un diseño de una sola columna
El formato de una columna es fácilmente legible, mientras que dos o más columnas abarrotan una pantalla pequeña. Considere un enfoque híbrido para que su correo electrónico se vea como un correo electrónico responsive en las aplicaciones de terceros que no admiten media queries.
Tome ventaja de la alineación de las tablas
Con las tablas, puede aprovechar el atributo align. Cuando se usa align = ”left”, las tablas se apilan unas sobre otras en pantallas más pequeñas. Esta técnica es la base de un diseño fluido y responsive. Si tiene dos tablas de 300 px de ancho cada una con align = ”left” dentro del mismo contenedor y si la pantalla tiene 600 píxeles o más de ancho (como sería para la mayoría de los clientes de escritorio), las tablas aparecerán una al lado de la otra. Si la pantalla tiene solo 400 px de ancho, las dos tablas se apilarán una encima de la otra. Las tablas anidadas son totalmente seguras para email.
Use Media Queries concienzudamente
Los media queries son una serie de reglas condicionales que se basan en la resolución de la pantalla del dispositivo para aplicar unas reglas de estilos u otras. Sin embargo no todos los dispositivos soportan los media queries. Se puede utilizar media query en el caso que desee hacer que su diseño responsive sea híbrido y que se muestre de manera distinta para en la computadora o en el teléfono. Acá colocamos un ejemplo de media query que puede colocar después de las etiquetas meta.
<style type="text/css">
@media screen and (max-width:600px) {
// Coloque acá los estilos para desktop y tablets
}
@media screen and (max-width:480px) {
// Coloque acá los estilos para teléfono
}
</style>Se debe añadir el sufijo “!important” a cada sentencia dentro de la media-query.
Esto hay que hacerlo porque los estilos definidos en línea tienen mayor importancia que los definidos dentro de la etiqueta <style>. Se debe añadir el “!important” para alterar dicha prioridad.
No todos los dispositivos soportan media query
Tenga en cuenta que los media queries se activarán por el tamaño de la ventana gráfica del dispositivo. Los tamaños de las ventanas gráficas pueden variar drásticamente según el tamaño de la pantalla física del teléfono, la resolución de la pantalla y la densidad de píxeles o la proporción de píxeles del dispositivo.
Soporte de Media Query en teléfonos
iOS (iPhone/iPad) ......................................................... Sí
Android 4.x cliente nativo .......................................... Sí
Android Outlook Exchange via cliente nativo ..... No
Aplicación Android Outlook.com ............................ No
Aplicación Android Gmail ........................................ No
Aplicación Android Yahoo! Mail .............................. No
Aplicación Android Samsung Mail ......................... Sí
Gmail (Android Browser) .......................................... No
Outlook.com (Android Browser) ............................. No
Yahoo! Mail (Android Browser) ............................... No
Windows Phone 7 ...................................................... No
Windows Phone 7.5 ................................................... Sí
Windows Phone 8 ..................................................... No
BlackBerry OS 6 ........................................... ............ Sí
BlackBerry OS 7 ........................................................ Sí
BlackBerry Z10 ........................................................... Sí
Kindle Fire cliente nativo ......................................... Sí
Última actualización 4 diciembre 2020
Utilice Procentaje + tamaño máximo para suplantar los Media Query
Muchos dispositivos no soportan los media query. Puede utilizar los media queries si lo considera necesario, sin embargo le recomendamos utilizar tablas con tamaños en porcentaje y un tamaño máximo de tabla de 540 a 600 pixeles. Puede ver ejemplos de esto en todas las plantillas de la librería del editor drag and drop de email de DANAConnect. Acá le incluimos también un ejemplo del código de una tabla:
<table width="100%" style="margin-right: auto; margin-left: auto; width: 100%; max-width: 540px;">
Evite CSS abreviado cuando sea posible
Verifique que no esté utilizando una declaraciones de estilos abreviadas. Por ejemplo, “margin-top: 5px” puede funcionar donde “margin: 5px 0 0 0;” no funcione. También es importante evitar los códigos hexadecimales para los colores que sean de tres dígitos. Algunos clientes no los reconocerán, por lo que querrá asegurarse de usar siempre el código hexadecimal completo de seis dígitos.
Ponga las imágenes del tamaño final
Ciertos clientes como Outlook no toman en cuenta el ancho o alto colocado en el estilo de la imagen por lo que las imágenes se muestran del tamaño original que están el archivo gráfico. Para evitar que las imágenes se vean en algunos casos "gigantes" trate siempre editar el tamaño de la imagen en el archivo original al tamaño (píxeles) que quiere que se muestre finalmente en el email.
No coloque el video en el email directamente
Muchos clientes de correo no reproducirá el video dentro del email. En lugar de agregar la etiqueta de video para reproducir un video directamente dentro del correo electrónico, utilice una imagen fija con un botón de reproducción que tenga un link a una página en donde se pueda reproducir el video.
Mantenga el tamaño del archivo de correo electrónico por debajo de 100 kb
Es ideal mantener su correo electrónico por debajo de 100 kb. Pasará a través de más filtros de spam si se mantiene ligero y mantener su correo electrónico por debajo de 102 kb también evitará que Gmail “recorte” su correo electrónico.
Incluya un texto previo “pre-header”
La mayoría de clientes de correo muestran un texto previo que normalmente son las primeras líneas del cuerpo del correo. Utilice esta técnica para mostrar el texto previo que usted decida y no lo que está por defecto. Ver el artículo
TESTING: La práctica de correo electrónico más importante
Incluso si utiliza estas prácticas recomendadas para el correo electrónico, la parte más importante son las pruebas de que sus correos electrónicos se vean bien en diferentes dispositivos.
Cada cliente de correo electrónico tiene diferentes peculiaridades cuando se trata de renderizar código. Outlook para escritorio (2007, 2010, 2013 y 2016) puede resultar especialmente complicado. La única forma de saber que su correo electrónico se verá bien en todas partes es probarlo.
Actualizado el: 16/06/2022
¡Gracias!