Media Queries para Diseño Responsive en Email Marketing

Clase 28 de 36 • Curso de Diseño y Maquetación para Emails

Resumen

Vamos a crear una etiqueta <style type="text/css"> para añadir los estilos de nuestra plantilla responsive.

Recuerda que debes utilizar estilos en línea siempre que puedas, solo usamos los media queries cuando necesitamos estilos dinámicos que cambian con el tamaño de los dispositivos de los usuarios.

Vamos a definir un media query para cada dispositivo. En móviles las medidas generales son entre 320 y 480px, en tablets empieza con 640 y termina en 768px mientras que, en desktop, no necesitamos media queries porque los estilos por defecto van a ser suficientes.

También es una buena práctica añadir !important al final de cada estilo para evitar problemas y asegurarnos que los estilos se van a cumplir en cualquier condición o cliente de correo electrónico.

Anthony Manuel Vargas Ruiz

student•

Quizás faltó un poco más de introducción a lo que son las media queries, para qué sirven y cosas básicas. Siempre se puede buscar por cuenta propia pero entorpece la secuencia que se lleva en el curso

Diego Forero

Team Platzi•

Hola tenemos un curso enfocado solo a responsive design y una clase enfocada a los media queries la encuentras aquí https://platzi.com/clases/1362-responsive-design/13540-media-queries4807/ para que profundices tu conocimiento.

Alberto Velasco Rivera

student•

de hecho para este curso te mencionaron que debes saber algo de maquetado, puedes checar los diversos cursos que tiene platzi amigo

Roger Carlos Ariel Alba

student•

Lo recomendable es escribir los estilos en línea. Pero en el casod e los Media Queries se hace en la etiqueta "style" del head. Las medidas "promedio" son: 320px a 480px 640px a 768px Según las estádisticas podrás ajustar los media queries.

Franklin Lucero

student•

He estado considerando que en lugar de realizar media querys por resolucion, ¿no seria mas practico manejarlo por orientacion?

Andrés Vega

student•

Podrías explicarme un poco mas de como lo harías?

Libian María Hernández Gil

student•

Hola, preferí implementar diseño movil first, dejando así los @media queries...

 <style type="text/css">
    @media screen and (min-width: 640px) {
      .two-col {
        max-width: 48%; 
        height: max-content;
        vertical-align: center;
        display: inline-block;
      }
    }
    @media (min-width: 860px) {
      .three-col {
        max-width: 33%;
        height: max-content;
        vertical-align: center;
        display: inline-block;
      }
    }
  </style>

Comparto el código en mi Repo

José Pablo Jiménez Cucanán

student•

El !important es importante. Baia Baia xD

Nestor Mauricio Rojas Rozo

student•

Cada sentencia dentro de los media-queries hay que añadirle el sufijo "!important". Esto hay que hacerlo porque los estilos definidos en línea tienen mayor importancia que los definidos dentro de la cabecera de la página. Añadimos el "!important" para alterar dicha prioridad.
Acordarse de poner las rutas de las imágenes en modo absoluto.

Anthony Manuel Vargas Ruiz

student•

¿Los media queries siempre tienen que estar en la etiqueta style sin importar si es un newsletter o email promocional?

Diego Forero

Team Platzi•

Hola, si deben estar hay, existen muchas restricciones de los diferentes clientes de correo, por eso es mejor que estén siempre dentro de esa etiqueta y no por fuera, ademas esto te ayuda a reutilizar clases que están dentro de esta etiquetas.

Martha Muñoz

student•

@ansonyv hola! Recuerda que newsletter y email promocional son tipos de email, y ambos los puedes construir en la técnica Escalable o Responsive. Los media queries son los únicos estilos que deben ir en la etiqueta <style> y solo se usan para la técnica de desarrollo responsive.

Juan Carlos Wilches Niño

student•

bueno esto esta chevere para responsibe, pero si lo quiero adaptativo? como podria hacer si yo quisiera que las tres columnas en mobile quedaran en en una sola columna?