Al diseñar newsletters no podemos olvidarnos de los detalles de lo que le gusta y lo que no a los principales gestores de correo (gmail, hotmail, yahoo, outlook)

Ahora, además tenemos que tener encuentra la visualización de nuestros diseños de newsletters en móviles y tablets, La clave es SIMPLIFICAR!! pues aunque parezca fácil, no lo es, un diseño responsive se tiene que ver bien en los gestores de correo y en el correo por defecto de smartphones y tablets.

Pues bien, pensar en móviles y tablets es pensar en diseño Responsive. 

¿Qué es?
Es adaptar nuestros diseños de Newsletter a los tamaños de pantallas.

Por lo tanto, lo que tenemos que hacer es jugar con los TAMAÑOS: anchos de imágenes, de tablas y tamaños de textos, para una correcta visualización de estos elementos.

¿Cómo?
Con el uso de @media las @media queries son reglas que nos permiten mostrar unos estilos u otros según el tamaño de la pantalla. Es definir las condiciones que queremos que se cumplan dentro de este elemento.

Básicamente los principales elementos a modificar en nuestros diseños de newsletters son:

Tamaño de texto, un ejemplo de con uso de @media, para hacerlo más pequeño cuando la pantalla sea menor de 480px:


/* Por debajo de 480px */(
@media screen and (max-width: 480px){

}

 

Ubicación de elementos: Cuando se hace pequeña la pantalla y tenemos elementos uno al lado del otro, con @media modificaremos el diseño de nuestra newsletter, para que se pongan uno encima del otro como en este ejemplo:

@media screen and (max-width: 480px) {
.columna{
display: inline-table;
}
}

 

Imágenes: Para que una imagen se adapte correctamente debemos establecer su tamaño al 100% y controlarlo con max-width o max-height, con lo que la imagen tendrá su tamaño original pero NO sobrepasará el ancho del contendedor.

/* Esta imagen de adapta al ancho de lo que lo contenga con un máximo de 650px */
img{
width:100%;
max-width:650px;
}

/* Este es la imagen tiene su tamaño original */
img{
max-width:100%;
}


Como siempre: hay que hacer mil pruébas, para estar seguros que todo esta correcto.

PD: Sigo creyendo que Gmail es muy importante y a día de hoy sigue sin aceptar el uso de estilos css en la etiqueta <SCRIPT> de la cabecera.

por lo tanto una opción es el uso de % porcentajes en lugar @media todo lo que definamos en etiquetas css para GMAIL, no existe!