Responsive Web Design

"RESPONSIVE WEB DESIGN FOR DUMMIES"
Resúmen sobre el Workshop de Responsive Web Design impartido en Bilbao el 5 de mayo de 2012 por la gente de swwweet.com: @htmlboy y @martuishere

El Responsive Web Design consiste en que la web se adapte al CONTEXTO en el que será visualizada (el navegador).
El objetivo es diseñar en función del CONTENIDO que tengamos.
Cambian las reglas del proceso de creación de la web: se toman decisiones de diseño según se escribe el código.
Se trata de que las fases de BOCETO, PROTOTIPO y DISEÑO se mezclan entre sí y el cliente debe participar y recibir información a menudo. Evitar la entrega de un proyecto muy elaborado al cabo de mucho tiempo para que el cliente lo haga rehacer. (Lo sé, es difícil y requiere una mentalización del cliente).

Las claves de RESPONSIVE

Retícula fluída (en %)
Imágenes flexibles
CSS Media Queries

Para ello debemos utilizar la unidad “em” (y próximamente “rem”), tanto para los tipos, las CSS o los Media Queries.

Lo ideal es empezar desde abajo, es decir, diseñar a partir de la versión móvil: MOBILE FIRST, para después dirigirnos hacia arriba. Teniendo en cuenta siempre que el uso de la Media Queries debería estar dictado por el contenido, no por el dispositivo (poner la Media Querie en el punto donde el diseño se rompa).

(En realidad, mediante este método, estamos diseñando para dispositivos que aún no existen).

Pero... ¿Cómo es una Media Query?

Por ejemplo, el “aside” de una web cuando llega a una visualización de 480px (queremos moverlo debajo y que ocupe todo el ancho de la pantalla).

Dentro de nuestra hoja de estilos colocaríamos:

@media only screen and (min-width: 480px){
#main-nav li a{
float: none;
width: 100%;
}
}

RETOS del Responsive Web Design

El RWD no es infalible ni aporta todas las soluciones a los problemas de diseño. Se encuentra con unos cuantos retos a los que se aportan una serie de soluciones (temporales o incompletas en algunos casos).

1.- La tipografía no se escala con el Viewport

(igual queremos que un texto vaya de lado a lado)

Mientras no se amplíe el soporte a la unidad “vw”, podemos utilizar: fittext.js

2.- Vídeo externo

(que nuestros vídeos de YouTube, Vimeo, … se ajusten automáticamente)

Utilizar fitvids.js

3.- Navegadores antiguos

(anteriores a IE8 no tienen soporte para Media Queries)

Utilizar: respond.js

4.- Imágenes (lo más complicado)

Hay muchos factores a tener en cuenta: ancho de banda | plan de datos | tethering | velocidad de carga.

Lo “menos malo” sería descargar primero imágenes pequeñas y luego sustituirlas vía J.S.

Otras opciones:

responsive-enhance
responsive-images
adaptive-images (la mejor): http://adaptive-images.com

5.- Retina Display

Para esto lo mejor es optimizar el número de imágenes que utilizamos y aprovechar lo que nos ofrecen alternativas para elementos visuales como:

CSS3
SVG
Fuentes de iconos

6.- Navegación

Muy importante jugar con la apariencia y colocación de nuestro menú de navegación.

7.- Sliders

Utilizar: Flexliders: http://www.woothemes.com/flexslider/

8.- Tablas

Utilizar: http://css-tricks.com/responsive-data-table-ROUNDUP/

Este post ha sido realizado utilizando técnicas "Responsive". Para comprobarlo, redimensiona la ventana de tu navegador o visualízalo en tu smartphone o tableta.

Ilustración: @ardiluzu