Voy a intentar sentar por escrito algunas ideas sobre lo el responsive web design, donde entran en juego:

1. Mobile first
2. Enhanced progressive
3. Media queries
4. Flexible grid
5. Images

Mobile first

En un futuro cercano se espera que habrá más tráfico móvil que de escritorio. Por tanto cabría pensar si sería mejor definir primero la versión móvil, dando relevancia al contenido con una estructura básica y lineal, que presente la esencia de lo que se quiere ofrecer desde el sitio Web.

Esto supone un cambio de perspectiva muy relevante (de 180º), puesto que en vez de pensar como hacer la versión móvil a partir de la versión de escritorio, tendríamos que pensar como construir la versión de tableta y escritorio (y otros dispositivos) como una versión extendida de la versión móvil.

Luke Wroblewski escribio una pequeña joyita de libro con esta metodología.

Enhanced progressive

Con la mejora progresiva podemos comenzar creando nuestro contenido desde el diseño y las funcionalidades más simples (mobile first), trabajando desde el núcleo (contenido) y luego agregar capa sobre capa, basándonos en las capacidades detectadas (media queries) para optimizar la experiencia final de usuario.

Pongamos un ejemplo simple, los conocidos rollovers (posicionar el puntero encima de elementos y que se resalte, cambiando de color de fondo, forma, etc.) esto no funcionan en dispositivos de pantallas táctil ya que «tocar es activar», pero si los usaremos en la versión de escritorio. Por tanto en la tableta a nivel de contenido y experiencia no perdemos, la mejora es progresiva al irnos a la versión de escritorio.

En vez de hacer diseños a medida y desconectados para cada uno de los dispositivos web (ojo, presentes, pero también futuros), podemos tratarlos como facetas de una misma experiencia. Solo una web, un proyecto y el mismo equipo. Esto plantearía una mejora en la escalabilidad general de cualquier proyecto.

Media Queries

Con su ayuda podemos por ejemplo preguntar al dispositivo si su resolución es igual o menor que 480px -si estamos viendo nuestro trabajo en un dispositivo con una pantalla pequeña como el iPhone- entonces el dispositivo cargará una hoja de estilo especifica donde presentar el diseño de una forma acorde a ese contexto. De lo contrario, el link es completamente ignorado.
Aquí tenemos un medio eficaz para diseñar múltiples estructuras y presentar el mismo contenido en diferentes contextos.
Pero lo mejor es que la estructura no se quiebra cuando el navegador no soporta las media queries, simplemente se sigue una estructura básica lineal (volvemos a las bondades de mobile first y enhanced progressive).

Ejemplos de media queries.

Flexible grid

La idea es definir un layout flexible, capaz de adaptarse a diferentes contextos: mobile, tablet y desktop.
Podemos echar un ojo a estos responsive wireframes que ilustran claramente la idea.

Al igual que en CSS tenemos la metafora de la cascada, aquí podemos seguir con este elemento «agua» para imaginarnos como fluye su caudal por los diferentes caminos que nosotros vayamos planificando. Se puede definir un layout /grid como si fuese un dique más ancho (versión desktop) o un canal mas estrecho (versión mobile). El agua (que es el contenido) fluira por las diferentes construcciones que hagamos.

Images

Otro de los problemas son las imágenes, no pueden ser del mismo tamaño que en la versión de escritorio. Este es un tema denso y complejo, que ha sido abordado con técnicas diferentes.

Hay un buen código js que se encargan de la redimensión de las imgs. Pero no resolvemos el problema de raiz, puesto que las imágenes se descargan en su formato grande, esto es pesado y consume transferencia del 3G contratado. Para solventar esto también hay soluciones como adaptative images que únicamente requieren de PHP, la librería GD y Apache como http server.

Ejemplos de responsive web design

• Smashing magazine
• CSS Tricks
• Boston globe
• Food sense
• Urban fire – burn
• The-cocktail

Test responsive

deviceponsive: con esta herramienta podrás previsualizar de forma rápida tu sitio web responsive en diferentes resoluciones de dispositivos como Maccbook, iPad o iPhone.