Responsive Design: introducción

En Genbeta Dev hemos hablado antes sobre Responsive Design, pero voy a hacer una pequeña guía de como crear diseños que se adapten a todo tipo de pantallas con el uso de CSS, que actualmente nos brinda al posibilidad de crear un diseño adaptable sin necesidad de JavaScript e incluso gran parte de la base es compatible con navegadores antiguos (lo que es la base, no podemos pretender que Internet Explorer 7 visualice un completo diseño adaptable).

¿Qué es eso del Responsive Design?

Esta técnica de diseño web consiste en crear una estructura de una página web que según el tamaño de la pantalla (o ventana) en la que se visualice variará su contenido para que siempre sea visible y cómodo de usar desde PC, tablets y smartphones (principalmente, porque esto afectará a todo con lo que lo visualicemos, si así lo establecemos) y se puede poner en práctica esta forma de adaptar el contenido a todo tipo de resoluciones con hojas de estilo CSS (que es en lo que me voy a centrar) y con JavaScript (tenemos que tener en cuenta también en que puede haber personas o bots que tengan desactivado JavaScript).

Beneficios

Hace un tiempo hice un artículo sobre porque era tan necesario el diseño adaptativo, entre lo que destaco lo siguiente:

• La web se visualizará en todos los dispositivos que usemos correctamente, sin necesidad de hacer zoom y se adaptará a los giros en dispositivos móviles.

• Google tiene en cuenta que páginas usan diseños que se adaptan a dispositivos móviles.

• Ayudamos a las personas que tienen minusvalías visuales a que puedan usar más fácilmente la web.

Como implementarlo

Aquí tienes dos opciones, tener una web existente o crearla de cero, si tienes una web existente dependiendo de su complejidad puede ser cosa de coser y cantar o puede ser una tarea tediosa (sobre todo si es un CMS con una plantilla desastrosa, a nivel de estructura).

En cuanto avance un poco la guía veréis que crear el diseño sensible desde cero no conlleva mucha dificultad (siempre y cuando el Responsive Design sea la respuesta a la adaptación para móviles de la web que estás desarrollando, no siempre es la mejor opción, pero suele serla).

Ejemplos

Voy a poneros 3 ejemplos de páginas web con diseños adaptativos y os mandaré a una de las herramientas que propuse hace poco para desarrolladores web, ScreenQueries, con la que podréis ver el diseño como se adapta a los distintos tamaños (Está hecho con la resolución del iPhone 3GS para que no fuese demasiado grande, con la herramienta podéis probar con distintas resoluciones de móviles y rotar la pantalla).

Tipos de Responsive Designs

Cuando creamos el diseño adaptativo podemos hacerlo de cualquier forma, como mejor se adapte a nuestra web o de la forma que nos mande nuestra imaginación, pero en términos generales hay varios tipos de responsive designs comunes.

Nota: pondré varios ejemplos según el tipo que se abrirán en una página a parte y no añadiré imágenes porque sería demasiado extenso el artículo, podéis probar como se adaptan haciendo más pequeña la ventana del navegador.

Adaptándose al ancho

Este tipo de diseño es uno de los más comunes, que se distingue por no mover en exceso los elementos de la web e intentar que se adapten al ancho de pantalla reduciendo el menú (a veces cambiando la disposición), redimensionado las imágenes y poco más, como ejemplos pongo los siguientes: Mejorando.la y Xitrus.

Cascada de columnas

En este caso tenemos una web con varias columnas, como podría ser Genbeta Dev (con la columna principal con el contenido y la lateral con la publicidad, editores y demás) que al visualizarse en pantallas estrechas se pondría una debajo de la otra seguidamente, por ejemplo: Modernizr y Wee Nudge.

Reestructuración

Como el propio título indica en esta variante cambiamos la estructura de los elementos disponiéndolos de una forma distinta según el tamaño de ventana y se puede hacer de muchas formas (hay solo depende del diseño que queramos) por ejemplo: CSS-Tricks y Food Sense.

Cambio del diseño visual

Esta se podría decir que no es una forma de estructurar el contenido para hacerlo más fácil de manejar fuera del navegador de escritorio, sino que según el tamaño de la ventana adapta el diseño de una forma u otra por motivos estéticos, y suele usarse en las típicas web que te dan la información sobre algo de forma rápida y concisa, como en las siguientes: Neovada y Design made in Germany.

Resumen

Podemos hacer muchos tipos de diseños adaptables, o incluso puede que sea mejor hacer una web dedicada a móviles, eso lo debemos de decidir a la hora de hacer nuestro proyecto, pero crear un Responsive Web Design es apostar sobre seguro.

Esto es solo la introducción, en la guía añadiré todo lo necesario para hacer un diseño adaptativo.

Más información | Xitrus y Lukew

En Genbeta Dev | Introducción al Responsive Design