Qué es un media-query?
El media-query es una linea de código que se inserta en el CSS (cascading style sheets), que es el lenguaje que usamos para darle estilos a nuestro email. Básicamente lo que hace es indicar que a partir de determinada condición se activen determinados estilos que afectan a nuestro diseño.
Un media-query se escribe de esta forma:
@media only screen and (max-device-width : 480px) {
/* Styles */
}
Esta formado por el media-type, en el caso de email marketing usamos screen, y las expresiones, que son las que indican la condición que debe cumplir el dispositivo para que se activen los estilos que tenemos dentro de este media-query. Hay muchas expresiones, pero normalmente vamos a usar:> max- and min-width
> max- and min-device-width
> device-pixel-ratio
De hecho, personalmente, uso max- and min-device-width casi siempre.
Con los media-query vamos a poder acomodar, adaptar, tunear nuestro email para que se vea correctamente a lo largo de los dispositivos y resoluciones de pantalla.
Normalmente un email se diseña considerando como se va a ver en computadora, pero cuando se abren en un dispositivo tenemos dos variables:
> El diseño se ajusta a la pantalla, haciendo zoom-out, y los textos quedan ilegibles, los botones inclickeables, y probablemente el usuario borre el email ya que no lo va a encontrar interesante.
> El diseño queda del tamaño original, obligándonos a hacer scrolling horizontal y volviéndose ilegible. Otra vez, lo va a eliminar porque no le va a interesar un email que no pueda verse en su teléfono o dispositivo.
Cuando agregamos media-queries adaptamos nuestro diseño a las distintas resoluciones de pantalla, aumentamos el tamaño de las tipografías, agrandamos los botones, y así transformamos nuestro email en Responsive Email Design.
Cómo los uso?
Normalmente los estilos se agregan en el <head> peeeeeero dado que muchos clientes de correo eliminan el head de nuestro email lo que yo hago es ponerlo dentro del <body> o <table>.
Entonces, supongamos que yo tengo mi email de 600px de ancho, y quiero que cuando la resolución de pantalla es menor a 600px de ancho comience a adaptarse, nuestro media-query sería así:
<style type="text/css">
@media only screen and (max-device-width : 600px) {
/* Styles */
}
</style>
Ahora tenemos que empezar a poner los estilos dentro. Primero el contenedor. Vamos a decirle a la tabla de 600px que se adapte al 100% de la pantalla:<style type="text/css">
@media only screen and (max-device-width : 600px) {
table[class="contenedor"]{
width: 100% !important;
}
}
</style>
Vamos a especificar los estilos de esta manera ya que si no yahoo los interpreta en la versión de pantalla. También es importante usar nombres obvios para las clases, va a hacer la lectura del código mucho más fácil.El uso del !important es clave, ya que tenemos que sobreescribir los estilos que hayamos puesto inline en nuestro código, si no lo agregamos corremos el riesgo de que el cliente de email decida cual usar y no siempre va a ser el que nosotros queremos.
Supongamos ahora que tenemos una imagen en el header de nuestro email, una que ocupe todo el ancho de nuestro email, tendríamos que agregar una clase especifica para adaptar dicha imagen:
<style type="text/css">
@media only screen and (max-device-width : 600px) {
table[class="contenedor"]{
width: 100% !important;
}
img[class="head"]{
width: 100% !important;
height: auto !important;
}
}
</style>
Finalmente, nuestro texto podría ser de 14px, y queremos aumentarlo a 18px, lo hacemos de esta manera:
<style type="text/css">
@media only screen and (max-device-width : 600px) {
table[class="contenedor"]{
width: 100% !important;
}
img[class="head"]{
width: 100% !important;
height: auto !important;
}
td[class="texto"]{
font-size: 18px !important;
}
}
</style>
Estos son tres ejemplos de pequeños cambios básicos, que harían que nuestro email se adapte a todas las resoluciones menores a 600px de ancho en dispositivos móviles (max-'device'-width). Las opciones son casi infinitas (dependemos de cada cliente de email), todo depende de la complejidad que querramos darle a nuestra pieza y el tiempo que tengamos para invertir en test, porque estas piezas llevan un poco más de tiempo de testing que una pieza normal.También es importante destacar que podemos usar más de un media-query, por ejemplo, en el ejemplo anterior nuestra variable dice que en todas las pantallas menores a 600px de ancho se aplican los estilos especificados. Pero podriamos indicar que de 600px a 480px aplique determinados estilos, luego de 480px a 320px y luego menor a 320px, lo haríamos de esta forma:
<style type="text/css">
@media only screen and (max-device-width : 600px) {
/* Styles */
}
@media only screen and (max-device-width : 480px) {
/* Styles */
}
@media only screen and (max-device-width : 320px) {
/* Styles */
}
</style>
También podemos indicar un máximo y un mínimo:<style type="text/css">
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
</style>
Y así podemos ir jugando tanto con las resoluciones de pantalla, como con las distintas expresiones y estilos,Compatibilidad: dónde funcionan los media-queries?
Cómo todo en email marketing, los estandares escasean y no todo funciona en todos lados. Mis amigos de Litmus me facilitaron la compatibilidad para que yo se las deje acá a ustedes:
| iOS (iPhone/iPad) |  |
Gmail app (iOS + Android) |  |
| Inbox by Gmail app (iOS + Android) | |
Android 4.x native client | |
| Android Outlook Exchange via native client | |
Android Outlook.com app | |
| Android Yahoo! Mail app | |
Gmail (Android Browser) | |
| Outlook.com (Android Browser) | |
Mailbox (iOS + Android) | |
| Outlook.com (iOS) | |
Yahoo! Mail (Android Browser) | |
| Windows Phone 7 | |
Windows Phone 7.5 | |
| Windows Phone 8 | |
BlackBerry OS 6 | |
| BlackBerry OS 7 | |
BlackBerry Z10 | |
| Kindle Fire native client | |
De todas formas, siempre testeen, ya que las compatibilidades cambian todo el tiempo.
No se olviden: conozcan a su audiencia. Conociéndola van a saber dónde enfocar el esfuerzo y así mejorar la comunicación con sus contactos, ventas o lo que estén haciendo vía email.
En la próxima nota les voy a traer un ejemplo de Responsive Email Design dónde va a estar aplicado todo lo que vemos en esta nota.
¡No te olvides de seguir el blog en las redes sociales!
Twitter: @haceloresponsiv
Facebook: Hacelo Responsive Che
Y todo se repostea en Medium.
También pueden seguirme a mi!
Twitter: @marieseen
Linkedin: Marie Seen
En la próxima nota les voy a traer un ejemplo de Responsive Email Design dónde va a estar aplicado todo lo que vemos en esta nota.
¡No te olvides de seguir el blog en las redes sociales!
Twitter: @haceloresponsiv
Facebook: Hacelo Responsive Che
Y todo se repostea en Medium.
También pueden seguirme a mi!
Twitter: @marieseen
Linkedin: Marie Seen
Gracias me re sirvio Marie beso y exitos con tu blog!
ResponderEliminar