Diseño Responsivo

¿Qué es?

Elaboración de sitios para proporcionar una visualización óptima en una amplia variedad de dispositivos y resoluciones (se vea de la mejor manera en cada uno).

Buscaremos adaptar dinámicamente el diseño en función del ancho de la pantalla del visitante (sin necesidad de tener dos o más sitios separados).

Pregunta importante: ¿Cuándo un usuario accede a un sitio desde su celular tiene las misma necesidades y actitud que cuando navega desde una pc?

Respuesta: Múltiples experiencias > adecuada a cada usuario

Ventajas

• Reducción de costo de desarrollo
• Eficiencia en la actualización
• Mejora la experiencia de usuario

CSS Media Queries

¿Qué son?

Inspeccionan las características del medio. El resultado de la consulta es verdadera si el tipo de medio especificado coincide con el tipo de dispositivo en el que está siendo mostrado.

Media Type

• screen - Para pantallas
• print - Para impresión
• all - Para todo tipo de medios

Media Features

• orientation - Orientación del dispositivo
• min-device-width - Ancho mínimo del dispositivo
• max-device-width - Ancho máximo del dispositivo
• min-width - Ancho mínimo
• max-width - Ancho máximo

Sintaxis @media

@media all and (min-width: 700px) {
  /* Estilos para 700px o más */
}

@media all and (min-width: 700px) and (orientation: landscape) {
  /* Estilos para 700px o más en orientación horizontal */
}

@media screen and (device-aspect-ratio: 4/3) {
  /* Estilos para pantallas con relación de aspecto 4:3 */
}

Nos permite apuntar a ciertas clases de dispositivos e inspeccionar las características físicas del dispositivo en el que se está visualizando nuestro sitio.

Enfoque: Desktop First

Planificando el sitio para desktop:

/* GENERAL - Estilos base para desktop */

/* Tablets en horizontal y escritorios normales */
@media (min-width: 768px) and (max-width: 1199px) { ... }

/* Móviles en horizontal o tablets en vertical */
@media (max-width: 767px) { ... }

/* Móviles en vertical */
@media (max-width: 480px) { ... }

Enfoque: Mobile First

Planificando el sitio mobile first:

/* GENERAL - Estilos base para móvil */

/* Móviles en horizontal o tablets en vertical */
@media (min-width: 768px) { ... }

/* Tablets en horizontal y escritorios normales */
@media (min-width: 1024px) { ... }

/* Escritorios muy anchos */
@media (min-width: 1200px) { ... }

@media - Bloque de Estilos

Un bloque de CSS delimitado por llaves, con una condición definida por una consulta de medios. Si la condición se cumple, se ingresa a leer las propiedades que en el bloque se detallan.

Recomendaciones para Media Queries

• Trabajar con unidad EM
• Grilla e imágenes flexibles
• Box-sizing
• Etiqueta meta → initial-scale=1.0

<meta name="viewport" content="width=device-width, initial-scale=1.0">