Diseños web sensibles (Responsive Web Design)



Hace poco he acabado la lectura de un libro que recomiendo encarecidamente, Responsive Web Design de los siempre geniales A book Apart escrito por Ethan Marcotte diseñador y programador web y habitual de A list apart en el que se explica como unir tres técnicas y tecnologías ya existentes en el desarrollo web para crear sitios webs sensibles al dispositivo que los visita.

De esta manera, Marcotte aboga por el uso de grids fluidos, imágenes flexibes y media queries para construir sitios que se adapten al dispositivo que está visitando nuestro sitio web o incluso de la posición del mismo dando como resultado sitios webs increíblemente flexibles.

Llevamos diecisiete años construyendo nuestras páginas web bajo las mismas premisas y reglas con la que imprimimos en papel pero es hora ya de evolucionar y de dejar ese comportamiento atrás, la web no es papel, la web es flexible, son muchos los dispositivos que pueden navegar por nuestros sitios.

En algunos casos, algunas compañías y/o personas optan por crear dos webs paralelas, una para sistemas de escritorio y otra para navegadores móviles, ese es el caso por ejemplo del blog que estás leyendo, en Genbeta Dev disponemos de una versión móvil del blog mucho más minimalista que la versión para escritorio.

Aunque esta forma de presentar la misma web para diferentes dispositivos es correcta, puede no ser adecuada puesto que tratamos a diferentes usuarios de formas diferentes y duplicamos esfuerzos y recursos.

En su libro, Ethan Marcotte nos habla sobre otras formas de desarrollar nuestras páginas web en las que no es necesario redireccionar el tráfico proveniente de dispositivos móviles a otro dominio o directorio sino hacer un desarrollo basado en prácticas de flexibilidad, fluidez y aprovechar las nuevas funcionalidades que nos ofrecen las media queries de las que ya hemos hablado anteriormente en Genbeta Dev en la serie de “Introducción a CSS3“.

También nos habla Marcotte sobre una variable muy a tener en cuenta a la hora de desarrollar nuestros sitios web y es la variable del contexto. Dependiendo del contexto puede ser deseable el desarrollo de un sitio web completamente a parte para dispositivos móviles que ofrezca otro tipo de funcionalidad como conocer horarios, mapas de Google Maps etc en lugar de visualizar la misma página web que se mostraría a un sistema de escritorio adaptada a dispositivos móviles.

En cualquier caso, Responsive Web Design es un libro que ningún diseñador web debe dejar la oportunidad de leer y ahora que es veranito, hace calor y estamos de vacaciones, no hay excusa para no hacerlo. Si quieres ver una muestra de un sitio web sensible, no dejes de visitar Robot or not? sitio web de ejemplo utilizado en el libro desde tu dispositivo móvil y no dudes en girarlo para ver como se adapta el layout a tu pantalla.



Más Información | Responsive Web Design en A book Apart

Portada de Genbeta