Una de las cosas más preguntadas a la hora de realizar campañas de email marketing es sobre el diseño de las piezas que se van a enviar. Mucho más que el contenido, o el asunto, es el diseño el que está a la cabeza de la problemática de los clientes.
Ahora bien: diseños hay muchos, ya que dependen de la creatividad de las personas. Pero nos tenemos que enfocar en la estructura del diseño, y a partir de ahí, centrarnos en la estética. A continuación, comentare las opciones que pueden usar, y las diferencias entre sí.
- El ancho de nuestro email debe ser entre 600px y 800px. Esto es porque éste es el ancho seguro del mail al momento de ser visualizado en los diferentes webclients.
- El email no debe ser una sola imágen. La relación entre imágen y texto debe ser por lo menos del 50/50, para estar siempre seguros de no caer en spam.
- No se pueden usar códigos javascript. No se puede poner ninguna animación, ni insertar videos, ni formularios.
Ahora pasemos a explicar estas 4 estructuras.
Fijo:
Esta vendría a ser el email clásico. El primero. Un ancho definido, columnas, texto e imágenes. Sirve y se ve bien en PC, pero seguramente necesite scroll lateral en tablets y celulares, por lo que queda descartado del formato mobile.
Fluido: El fluido es una estructura que funciona como variante al diseño fijo. Y consiste básicamente en el armado de la tabla con un 100% de ancho. Esto logra que el diseño se expanda o se contraiga dependiendo de la pantalla en la que se visualice. La ventaja de esto, es que en pantallas chicas el diseño se adapta al pequeño ancho de la pantalla, pero si se visualiza en pantallas muy grandes (22 o más pulgadas) el diseño queda en el centro con los anchos de la tabla pegados al borde. Y no queda bien.
En esta imágen, podemos ver que el diseño fluido se ve bien, pero si la pantalla es muy grande el email va a terminar viendose feo, ya que al 100% siempre se pegará a los anchos de la pantalla.
Sin embargo, hay una forma de arreglar esto: usando media query. Si nosotros le seteamos un ancho fijo a la tabla contenedora (ej: 550px) para que al momento de abrir el mail en una pantalla grande siga viendose correctamente, cuando lo abramos en pantalla pequeña no lo veremos reducido. El media query que insertemos tiene que tener la propiedad de setear la tabla que al momento de que se abra en una pantalla menor a 660px, el contenedor sea 100% de ancho.
Con el mismo seteo de 550px que teníamos antes, insertamos el @media que sea que en pantallas menores de 660px, el ancho pase de estar fijo a que sea 100%. Así, en pantallas pequeñas lo visualizaremos correctamente.
@media only screen and (max-device-width:480px)
