Los tiempos han cambiado (y mucho) durante el pasado 2012. Como ya te habrás dado cuenta, cada vez se utilizan más los dispositivos móviles para navegar por internet. Seguro que conoces a alguien a quien los reyes magos le han traído una tableta digital. Cuando vas al bar a almorzar ves que siempre hay alguien leyendo el marca en el teléfono móvil.

Este hecho, tradicionalmente, obligaba a los diseñadores a hacer 2 páginas web: una para el ordenador de sobremesa o portátil y otra para los teléfonos móviles. Con la fuerte llegada de las tabletas haría falta otro diseño web intermedio para que el sitio fuera navegable en estos dispositivos. Bueno, pues esto se acabó.

A finales de 2.012 llegó para quedarse una nueva tendencia llamada Diseño Web Adaptable (Responsive Web Design en inglés) que hace que la misma web se adapte a la pantalla en la que se está mostrando.

DISEÑO WEB ADAPTABLE o RESPONSIVE WEB DESIGN, ¿ ESO QUE ES ?

Básicamente consiste en diseñar webs que se adapten a cualquier tipo de resolución y dispositivo. Veamos como define la wikipedia este término:

El diseño web adaptable o adaptativo (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

 

Distintas resoluciones de pantallas

 

Una página con un Diseño Web Adaptable es útil porque con un único diseño un sitio web puede ser visto en todo tipo de dispositivos con todo tipo de tamaños de pantalla. El sitio web simplemente se adapta (o responde, de ahí lo de responsive) a este ambiente y auto-ajusta su contenido en el acto para crear una experiencia de navegación óptima para el dispositivo que el lector está usando.

COMO FUNCIONA

Lo mejor del Responsive Web Design es que se trata de una solución tecnológica muy ligera, que prácticamente no afecta al tiempo de carga de la página. Todo recae sobre una nueva característica del código CSS llamada media query que nos permite llamar a diferentes estilos dependiendo del tamaño de pantalla y orientación detectada en el dispositivo que el lector está utilizando

 

Elementos flotando diseño adaptable

Por ejemplo, imagina que hemos pensado tu web para que tenga 3 columnas con contenido para que se vea todo bastante bien en un ordenador de sobremesa o portátil. Pero, ¿Que pasa si ves esta web en un iPhone?  Pues pasa que cuesta bastante leer el contenido. Con estos media query podemos cambiar el estilo de la web y decirle que en lugar de 3 columnas lo muestre todo en una columna ancha con el texto más grande.

Y PORQUE DICES QUE PUEDE HACER AHORRAR DINERO A UN EMPRESARIO

Pues lo digo sobre todo a la hora de planificar la creación de una nueva página web. Considero que hoy en día encargar el diseño de una web y no exigir que tenga un diseño web adaptable en parte es tirar el dinero. Y digo en parte porque ya has visto como ha cambiado todo esto en el último año. Y con las nuevas televisiones que te permiten navegar por internet todavía va a cambiar más.

Necesitas que tu nueva página web se adapte al monitor de un ordenador, a la pantalla del teléfono móvil, al iPad, al televisor y a cualquier otra pantalla que en un futuro pueda servir para navegar por internet

 

Ejemplos diseño adaptable

 

Si la intención de tu página web es ayudar a tu empresa a hacer negocios no puedes pasar esto por alto. Cada vez más gente realiza compras por internet a través de la tableta digital o del teléfono móvil. Si tu web en tu web vas a mostrar tus productos o servicios, se tienen que ver bien en todos estos dispositivos y en los que están por llegar

Algunos estudios indican que para el año 2014 el acceso a internet desde dispositivos móviles superará a los que se hacen desde líneas de conexión fijas.

Os dejo una infografía muy bien hecha por la gente de Ideas Chicago en la que se explican las características y ventajas de este tipo de diseño de páginas web que se adaptan a los teléfonos móviles y resto de dispositivos:

Infografía diseño adaptable

 

¿Y tu que opinas? ¿Crees que el Diseño Web Adaptable ha llegado para quedarse? ¿O tal vez opinas que debemos seguir realizando diferentes páginas web adaptadas para cada dispositivo?.

 

Artículo original: Bermole 2.0