La última tendencia de diseño web es el Responsive Design o «Diseño Adaptativo». Con la ayuda del HTML5 y CSS3, ahora podemos adaptar los diseños de páginas web en función del tamaño de pantalla del usuario. La característica fundamenteal de este tipo de diseño web, es que se adapta perfectamente a cualquier resolución, basta con ir cambiando el tamaño de la ventana del navegador, para ver cómo se van recolocando los módulos que forman la web.

Gracias a esta técnica no tenemos que hacer distintas web o utilizar distintas CSS para hacer un diseño para web, smartphone o tableta. El mismo diseño se verá correctamente en cualquiera de los distintos dispositivos y lo más importante, se reducirán los costes de creación y mantenimiento.

La idea de implementar esta técnica viene de lejos, del año 2008, recomendado por W3C  en «Mobile Web Best Practices» bajo el subtítulo «One Web«.

Hoy en día la disparidad tan grande que hay en tamaños de pantalla (sobremesas, portátiles, smartphones, tablets…), ha provocado que finalmente los diseñadores web nos planteemos esta práctica como indispensable en todos nuestros diseños.

Ejemplo de web responsive o adaptativa

Aquí tenéis una muestra de una web responsive o adaptativa. Se trata de http://www.bostonglobe.com. Podéis ver cómo al reducir el tamaño de pantalla, la web se va adaptando al ancho, pasando de las tres columnas en 1024px a las dos en 880px y quedando en una única columna para resoluciones pequeñas de smartphones. Las columnas se recolocan para así poder facilitar la lectura de la página, al ir reduciendo el tamaño de pantalla, la columna 3 pasa a colocarse debajo de la columna 2, si seguimos reduciendo pantalla, llega un momento en el que las tres columnas quedan colocadas una debajo de la otra.

Se trata pues de módulos elásticos, que al llegar a determinado ancho, cambian su posición dentro de la maquetación de la página.

Una de las características de este tipo de web son las imágenes flexibles y el código CSS para conseguirlo es darle a las imágenes de la web el estilo » max-width: 100%;«. De este modo la imagen se muestra cuando cabe en su contenedor a su tamaño real y se va escalando en contenedores más pequeños. En el caso de los videos, podemos hacer lo mismo aplicando este porcentaje a la etiqueta «object«. Lo que le estamos indicando al navegador, es que el mayor ancho permitido es el 100% del tamaño real del elemento y que si reduce este tamaño, que lo haga escalando dicho elemento.

Cuando vayas a maquetar tu web responsive o adaptativa, tienes que tener en cuenta aspectos como por ejemplo,

• UTILIZAR MEDIDAS EN PORCENTAJE – nada de utilizar pixels para definir el tamaño de un objeto, todo en porcentajes y relaciones
• IMÁGENES FLEXIBLES – se adaptan al ancho de pantalla y no te darán problemas de rotura de contenedores
• UTILIZAR EL VIEWPORT DE APPLE – está claro que los terminales Apple son una parte importantísima de nuestro público, por lo que no podemos olvidarnos de preparar las páginas para este tipo de terminal.

A continuación os dejo direcciones de sitios web que me han parecido interesantes para poder entender todo este proceso de diseño.

TESTEAR VUESTRA PÁGINA RESPONSIVE O ADAPTATIVA

– Si queréis ver cómo se ve vuestra web en distintas resoluciones (240px, 320px, 480px, 768px y 1024px), os recomiendo que utilicéis http://mattkersley.com/responsive/

EJEMPLO Y DESCARGA DE MENÚ ADAPTATIVO

– Tanto para web como para smartphone http://www.hongkiat.com/blog/responsive-web-nav/

CÓGIDO PARA WEB RESPONSIVE O ADAPTATIVA

– Algunos sitios en los que podréis encontrar documentación y código

• http://bradfrost.github.com/this-is-responsive/ – TODO SOBRE RESPONSIVE
• http://webcodebuilder.com/examples/responsive-html5css3-template/ – DESCARGAR PLANTILLA Responsive HTML5/CSS3
• http://www.codeproject.com/Articles/400502/Responsive-Web-Design – CÓDIGO
• http://www.tripwiremagazine.com/2012/04/responsive-web-design-tools.html – 35 HERRAMIENTAS RESPONSIVE
• http://lessframework.com/ – SISTEMA LESS FRAMEWORK CON PLANTILLAS PARA RESPONSIVE
• http://cssgrid.net/ – SISTEMA CSS GRID PARA RESPONSIVE – 12 COLUMNAS.
• http://www.tinyfluidgrid.com/ – CONFIGURA TU PLANTILLA Y DESCÁRGALA

JQUERY PARA WEB RESPONSIVE O ADAPTATIVA

• 30 plugins jQuery para páginas responsive o adaptativas: http://www.jquery4u.com/page-layout/30-jquery-responsive-layout-plugins/#.UGGUrKTPxUM
• http://www.creativasfera.com/slider-de-imagenes-para-un-diseno-web-responsive – SLIDERS DE IMÁGENES PARA DISEÑO RESPONSIVE O ADAPTATIVO

EJEMPLOS WEB RESPONSIVE O ADAPTATIVA

• 25 ejemplos de web responsive o adaptativa
• Themes WordPress responsive o adaptativos

TIPOGRAFÍA RESPONSIVE O ADAPTATIVA

Principios básicos

De momento con esto creo que tenemos más que suficiente para ir haciendo nuestros diseños, de todos modos, iré ampliando información sobre este tipo de diseño en siguientes posts.