Todos los elementos de nuestra interfaz tienen que ser flexibles y responsivos.
Caja con medidas en pixeles
Caja flexible con unidades de medidas relativas
Caja flexible con pixeles, pero utilizando max/min-width y max/min-heigth.
Un elemento multimedia es todo aquello que no es texto, las siguientes etiquetas son ejemplos de multimedia:
En el Responsive Design la multimedia debe ser flexible y adaptarse al tamaño de su contenedor, lo podemos lograr con las siguiente regla CSS:
img, audio, video, iframe, canvas, svg, picture {
max-width:100%;
height: auto;
}
Simplemente adaptamos la imagen al tamaño de su contenedor.
El propósito de estos atributos, es mejorar el rendimiento de carga, al colocar la misma imagen pero en diferentes tamaños y pesos, dependiendo del tamaño o la resolución de la pantalla.
El objetivo de esta etiqueta, no es sólo mostrar diferentes tamaños de la misma imagen, sino también mostrar imágenes diferentes. Por ejemplo, recortar una Imagen de forma diferente según el tamaño de la pantalla y las diferencias en el diseño. Esto se conoce como "dirección de arte".
Desde la especificación de CSS 2.1, las hojas de estilo han tenido cierto grado de capacidad para el reconocimiento de dispositivos mediante el uso de tipos de medios. Por ejemplo:
<link rel="stylesheet" media="print" href="print.css" >
Con CSS3, la W3C perfeccionó y mejoró los tipos de medios con características multimedia y con la capacidad de preguntar dichas aracterísticas a los medios.
Esto no sólo hace posible inspeccionar el contenido que se entrega al dispositivo, sino también las características físicas reales del dispositivo.
El uso de media queries permite pedir fácilmente al navegador sus características, tales como anchura, altura, relación de aspecto, orientación, ntre otras.
La sintaxis es la siguiente:
@media screen and (max-width:480px) and (orientation:portrait) {
/*
Código CSS que se aplicará cuando se cumpla la media queries
*/
}
| Propiedad | Definición | max / min |
|---|---|---|
| width |
El ancho del área de visualización. |
✔️ |
| height |
El alto del área de visualización. |
✔️ |
| device-width |
La anchura de la superficie de representación del dispositivo. |
✔️ |
| device-height |
La altura de la superficie de representación del dispositivo. |
✔️ |
| orientation |
Acepta los valores de portrait (vertical) y landscape (horizontal). |
❌ |
| aspect-ratio |
Relación entre la anchura de la zona de visualización de toda su altura. Por ejemplo: en una computadora de escritorio, se podría consultar si la ventana del navegador se encuentra en una relación de 16:9. |
✔️ |
| device-aspect-ratio |
Proporción de anchura de la superficie de representación del dispositivo a través de su altura. Por ejemplo: en una computadora de escritorio, se podría consultar si la pantalla está en una relación de 16:9. |
✔️ |
| color |
El número de bits por componente de color del dispositivo. Por ejemplo, un dispositivo de color de 8 bits podría pasar con éxito una consulta de (color: 8). Dispositivos de color no deben devolver un valor de 0. |
✔️ |
| color-index |
El número de entradas en la tabla de búsqueda de color del dispositivo de salida. Por ejemplo, @media screen and (min-color-index:256). |
✔️ |
| monochrome |
Al igual que el color, la característica monocromática permite ponernos a prueba el número de bits por pixel en un dispositivo monocromático. |
✔️ |
| resolution |
Pruebas de la densidad de los píxeles en el dispositivo. Por ejemplo, screen and (resolution:72dpi) or screen and (max-resolution:300dpi). |
✔️ |
| scan |
Para la navegación basada en tv, mide si el proceso de exploración es progresiva o escaneo. |
❌ |
| grid |
Comprueba si el dispositivo es una pantalla basada en la red, como los teléfonos con funciones con una fuente de ancho fijo. Se puede expresar simplemente como (grid). |
❌ |
Ethan Marcotte en su libro Responsive Design páginas 113-114 nos propone la siguiente lista de puntos de interrupción según la resolución del dispositivo:
| 320px |
Para dispositivos con pantallas pequeñas, como los teléfonos en modo vertical. |
| 480px |
Para dispositivos con pantallas pequeñas, como los teléfonos, en modo horizontal. |
| 600px |
Tabletas pequeñas, como el Amazon Kindle (600×800) y Barnes & Noble Nook (600×1024), en modo vertical. |
| 768px |
Tabletas de diez pulgadas como el iPad (768×1024), en modo vertical. |
| 1024px |
Tabletas como el iPad (1024×768), en modo horizontal, así como algunas pantallas de ordenador portátil, netbook, y de escritorio. |
| 1200px |
Para pantallas panorámicas, principalmente portátiles y de escritorio. |
Con la tabla que Ethan Marcotte nos propone prácticamente están cubiertos teléfonos inteligentes, tabletas, phablets, laptops, netbooks, computadoras de escritorio y pantallas, tanto en modo vertical como horizontal, por lo que con estos 6 puntos de interrupción sólo tendríamos que validar un solo atributo en las media queries: el ancho.
De cualquier forma en el sitio screensiz.es, se puede estar revisando constantemente las características físicas con las que se fabrican los dispositivos.
Aunque los pixeles se consideran una unidad de medida absoluta, en realidad son unidades relativas a la resolución de pantalla del dispositivo que lo visualiza, si dicho dispositivo tiene una densidad mayor a la normal, entonces la proporción de los pixeles cambiará, por ello es importante que los breakpoints de las media queries se conviertan a ems que si son unidades relativas y proporcionales.
Objetivo en pixeles / Contexto en pixeles = Resultado en Ems
320px / 16px = 20em
480px / 16px = 30em
600px / 16px = 37.5em
768px / 16px = 48em
1024px / 16px = 64em
1200px / 16px = 75em
El viewport fue introducido por Apple en Safari móvil, para ayudar a mejorar la presentación de los sitios en dispositivos como el iPhone, iPod Touch o iPad; posteriormente se volvió un estándar en todos los navegadores.
La etiqueta viewport es el área visible de nuestro navegador y nos permite definir el ancho, alto y escala del área usada por el navegador para mostrar el contenido.
Si no agregamos esta meta etiqueta a nuestros documentos HTML tendremos problemas de visualización.
El viewport tiene 6 atributos importantes:
De los 6 atributos mencionados, hay 2 que son muy importantes definir el ancho y la escala inicial, para que el contenido se adapte al tamaño del dispositivo.
Adicionalmente se recomienda que no se especifique la máxima escala, ni bloquear la capacidad de escalar el contenido, ya que independientemente de que el documento se diseñe con responsive, algunos usuarios con capacidades visuales diferentes, podrían tener problemas al ver el contenido y desearían aumentar el tamaño del contenido, si definimos una escala máxima o bloqueamos la capacidad de escalar el contenido produciremos en estos usuarios una mala y frustrante experiencia de usuario.
La propiedad del alto es opcional definirla, se utilizara cuando necesitemos condicionar el alto del contenido.
Por lo anterior la etiqueta meta viewport tendría que definirse de la siguiente manera:
<meta name="viewport" content="width=device-width,initial-scale=1.0">Las Feature Queries son reglas CSS que le preguntan al navegador si soportan o no, una determinada propiedad o valor.
@supports (display: grid) {
/*
Código CSS que se aplicará cuando se cumpla la feature queries
*/
}
Los Container Queries nos permiten hacer componentes responsivos de interfaz de usuario, que no dependan del tamaño de la pantalla y las media queries para cambiar o adaptar el diseño de su contenido. Sino que dependan de sus propias necesidades de visualización.
.card {
contain: layout inline-size style;
}
@container (min-width: 600px) {
.card-container {
display: flex;
}
}
Es la actualización al algoritmo de Google, que está activo desde el 21 de abril de 2015.
Teniendo en cuenta el auge imparable de los dispositivos móviles y el impacto que éstos están teniendo en las costumbres de uso de la web, Google hizo un comunicado a través de su blog oficial comentando algunas de las novedades que trae la actualización de su algoritmo.
Mobilegeddon pretende actuar sobre todas aquellas webs que no sean amigables con los dispositivos móviles, es decir que no se adapten de forma óptima a dichos dispositivos.
Dado que las estrategias de Google se enfocan cada vez más hacia estos dispositivos, es normal que el buscador quiera asegurarse que las webs que indexa cumplen los mínimos de calidad para móviles.
Mobilegeddon, afecta:
Es el paradigma actual del diseño web. Son un conjunto de buenas prácticas a nivel de código CSS para adaptar el contenido del documento HTML al tamaño de pantalla del dispositivo que lo visualice.
Tiene 3 principios:
Fue propuesto por Ethan Marcotte en 2010.
Son las 2 estrategias que tiene el Responsive Design para adaptar el contenido al tamaño de la pantalla, centrándose en los dispositivos con pantalla más pequeña (Mobile First) o a la inversa, centrándose en los dispositivos con pantalla más grande (Desktop First).
Las media queries se deben definir de lamayor a la menor.
Se utiliza la propiedad max-width para definir las mediaqueries.
Las media queries se deben definir de la menor a la mayor.
Se utiliza la propiedad min-width para definir las mediaqueries.
El Adaptive Design, trata de crear interfaces que se adapten a las capacidades y características de cada dispositivo (Hardware y Software).
Utiliza programación JavaScript para los cambios en la interfaz.
Además podría tener diferentes fronts dependiendo de los dispositivos que soliciten el recurso, por ejemplo:
Fue propuesto por Aaron Gustafson en 2011.
El Responsive Design + Server Side Components (RESS), trata de crear interfaces que se adapten a las capacidades y características de cada dispositivo (Hardware y Software).
Pero a diferencia del Adaptive Design, la programación que usa esta del lado del servidor. Las interfaces se crean desde el backend, lo que permite usar la misma vista (ruta) para todos los dispositivos.
Fue propuesto por Luke Wroblewski en 2011.
Mientras que el Responsive Design se basa en buenas prácticas de CSS para adaptar el contenido del documento HTML al tamaño de pantalla del dispositivo que lo visualice, el Responsible Responsive Design agrega buenas prácticas de programación JS no sólo para adaptar el contenido a la pantalla, sino también para mejorar el rendimiento y la carga de la interfaz en el navegador web.
Fue propuesto por Scott Jehl en 2014.
El Fluid Design es una técnica de Responsive Design que trata de escalar y adaptar el contenido al tamaño de la pantalla, sin la necesidad de ocupar media queries.
En lugar de diseñar para un determinado número de breakpoints, el Fluid Design crea un sistema dentro del cual los elementos escalan de manera proporcional y fluida.
Utiliza características y funciones modernas de CSS para hacer fluir las interfaces, por ejemplo:
Fue propuesto por Trys Mudford en 2020.