En este vídeo vamos a seguir con las sesiones sobre Responsive Web Design, abordando la manera de hacer sitios que se adapten a las características de cada dispositivo. Es la segunda entrega de unas clases impartidas por el diseñador Daniel Martínez @Wakkos.

A lo largo de más de una hora, veremos muchas cosas que, estamos seguros, serán de mucha utilidad a todos aquellos que se dedican al diseño web en cualquiera de sus expresiones. Esto es porque, en realidad, aunque todo el material que se va a ofrecer está pensado para hacer webs adaptables a los dispositivos, son básicamente consejos de hojas de estilo en cascada que todos debemos conocer.

Para profundizar en este nuevo modelo de diseño web, Responsive Web Design, hablaremos sobre algunos de los asuntos más consultados, como las unidades CSS o las imágenes flexibles.

Comenzamos explicando qué son las medidas relativas de las CSS, las conocidas por las siglas "em" y las medidas de porcentaje. Estas medidas son las más básicas en los diseños "responsive", sin embargo y aunque debemos amar lo relativo y odiar lo absuluto, no debemos olvidarnos de otras medidas como los píxeles, que nos servirán para hacer cosas como asignar la anchura máxima o mínima a un elemento.

Luego explicaremos muchos aspectos relacionados con las unidades y cómo aplicarlos a tamaños de fuentes tipográficas y a tamaños de los elementos. Veremos que las unidades relativas basan su tamaño en una proporción del contenedor padre, y cómo podemos definirlas de un modo que nos resulten cómodas de calcular. Aquí, calculadora en mano, se explicarán algunas fórmulas que nos harán entender cómo se deben especificar las unidades "em", junto con algunas referencias destacadas a webs que tratan sobre las medidas relativas y el uso de las mismas en el Responsive Web Design.

Luego se verá de qué manera trabajar con imágenes flexibles, es decir, que se redimensionan para ocupar todo el espacio disponible en el contenedor. Se explicará de qué manera asignar las dimensiones de las imágenes y cómo evitar algunos efectos indeseables como el pixelado que se produce al estirarlas.

A continuación se pasará a la ronda de preguntas donde se tocarán aspectos de diverso calado, como presentaciones "slider" adaptables, librerías para adaptar imágenes, frameworks CSS, imágenes de background, sprites CSS, el modo de definir medidas relativas sin perder la noción del nivel de anidación de etiquetas, la posibilidad de usar medidas absolutas en algunos casos en diseños responsive, etc.