El diseño web adaptativo o responsive design

Estamos en un mundo móvil, y cada vez más accedemos a internet desde dispositivos variados, con necesidades y en situaciones diferentes. Así como los diseñadores sobre el papel tenían el control absoluto de lo que se presentaba estáticamente, fijo, impreso, al diseñar para web se encuentran con multitud de resolución de pantallas, con navegadores diferentes, con formas de interactuar que van desde un teclado, mouse, stylus o los dedos. Como dice John Allsop, desarrollador, “debemos entender y adoptar la idea de que la web no tiene los mismos límites y debemos diseñar con esta flexibilidad. Pero primero debemos aceptar la marea y el flujo de las cosas”.

El diseño web adaptativo, del inglés responsive web design, a veces se traduce no del todo correctamente como “diseño responsivo”, tiene todo que ver con esto. Es una técnica de diseño y desarrollo web que, mediante el uso de estructuras e imágenes fluidas y media queries en la hoja de estilo CSS permite que el sitio web se adapte al entorno del usuario, sea cual sea el dispositivo que utilice para navegar.


El término fue creado por Ethan Marcotte, quien además de escribir una serie de artículos sobre el tema en A List Apart, publicó un libro al que llamó Responsive Web Design, donde describe teoría y práctica. El concepto One Web había partido del W3C en 2008 y hace referencia a construir una Web para todos (Web for All), accesible desde cualquier dispositivo (Web on Everything).

En los sitios móviles puede darse el caso de que la función y el contenido necesiten ser diferentes que en el sitio visto en la versión de ordenador de sobremesa, y allí es donde el diseño adaptativo puede resolverlo, quitando o reduciendo la visibilidad de ciertos elementos.

El diseño web adaptativo supone que usando HTML y CSS logremos una sola versión que cubre todas las resoluciones de pantalla, por lo que el sitio web creado es accesible desde todo tipo de dispositivos. Marcotte define como tres los ingredientes técnicos para el diseño web adaptativo:
  • Fluid grid (cuadrícula fluida): En lugar de píxeles utiliza porcentajes para definir los anchos de las columnas o divs.
  • Imágenes flexibles: Las imágenes no tienen anchos fijos sino un máximo (o max-width), que por lo general suele mostrarse al 100% en un ordenador de escritorio. De esta manera, las imágenes se reducen para ajustarse a otras pantallas o resoluciones de navegador.
  • Media queries: permiten consultas al CSS personalizado basándose en el ancho mínimo y máximo de un navegador (min-max width).

Ventajas

La cantidad de usuarios que acceden a la web desde dispositivos móviles ha aumentado y seguirá haciéndolo. Un estudio de Compuware, un proveedor de servicios y software, muestra que un 57% de los usuarios no recomendaría una compañía con un sitio móvil mal diseñado y que un 40% visitarían la página de un competidor antes que usar un sitio escasamente optimizado para su navegación en móviles.

Las ventajas del diseño web adaptativo son obvias:
  • Mejor experiencia de usuario: todos los usuarios ven la web de la mejor manera posible para el dispositivo desde el que acceden
  • Costes más bajos: Se reducen los costos de creación y mantenimiento: ya no es necesario desarrollar aplicaciones para distintas versiones móviles
  • Actualizaciones más eficientes: cualquier actualización o modificación en el diseño, se ve reflejado en todas las plataformas, lo que reduce tiempos y márgenes de errores
  • Búsquedas: Al hacer una búsqueda, aparecerá una URL única en los resultados, por lo que se ahorran redirecciones y posibles fallos.
  • Mejor SEO: Google puede descubrir mejor tu contenido
  • Accesible a todos: incluidos las personas con distintos problemas de disminución visual

The Boston Globe y otros ejemplos


La de The Boston Globe es considerada la web insignia del diseño web adaptativo, en parte porque fue uno de los primeros grandes sitios en internet en adoptar el responsive design y también por estar el mismo Ethan Marcotte en el equipo de desarrolladores que se encargó de su rediseño. Además de esta, hay otros buenos ejemplos de diseños adaptativos, empezando por la misma de Marcotte, como era de esperar:

Comentarios

Publicar un comentario

Entradas populares de este blog

3 plataformas para construir elegantes sitios web sin programar

Imagen
Cada vez es más común ver cómo alguien que no tiene grandes conocimientos de programación consigue crear un sitio web realmente rápido, bonito, moderno y elegante, y eso es algo que puede conseguirse con varias plataformas existentes en la actualidad. En esta breve lista os mostramos tres opciones que vale la pena tener presentes para todos aquéllos que quieran comenzar a trabajar creando sitios web: – Slides : Se trata de una solución no gratuita que tiene bastante fama en el mercado. Han lanzado ahora la versión 3.0, mucho más intuitiva y flexible. Las ventajas de usar Slides es que tiene componentes individuales que pueden configurarse de muchas formas diferentes para crear una infinidad de combinaciones. Podemos elegir varios tipos de menús, listas, títulos, botones, formularios, tablas de precios, enlaces, galerías de fotos… Solo tenemos que ir navegando por las secciones que queremos incluir en cada página, seleccionar las opciones deseadas y adaptar el diseño
Leer más

Dabbleboard, una pizarra para hacer más productivas las reuniones

Imagen
Gracias a la red, cada vez es más habitual desarrollar proyectos y trabajar con equipos de trabajo deslocalizados , es decir, situados en distintas ubicaciones geográficas distintas (empresas con varias sedes, empleados que desempeñan sus funciones en teletrabajo , freelances …). En este tipo de entornos de trabajo es fundamental una buena coordinación y el establecimiento de mecanismos de comunicación ágiles que permitan hacer fluir la información o concentrar toda la información que se genera dentro de un repositorio común. Herramientas como Skype o, incluso, los hangouts de Google+ pueden ayudarnos a mantener reuniones virtuales y, por tanto, a “acortar distancias” pero fruto de una reunión es posible que surjan múltiples ideas que nos interesen plasmar en algún tipo de mapa conceptual para que el brainstorming no se pierda y pueda desarrollarse dentro del proyecto; esta tarea podemos hacerla también de manera colaborativa recurriendo, por ejemplo, a Dabbleboard Dabbleb
Leer más

Cómo evitar la instalación de programas no deseados en tu ordenador

Imagen
Una de las plagas más grandes de Internet es el adware, banners de publicidad maliciosa invitándote a instalar programas extraños y gratuitos con alguna promesa de falsa seguridad, o dinero, o “diversión”. Pero aún peor, son esos programas no deseados que se instalan en nuestro ordenador simplemente porque no prestamos suficiente atención . Pasa mucho, bajas alguna app gratuita, y mientras haces clic en “siguiente, siguiente, siguiente” no te diste cuenta y aceptaste instalar una barra de tareas en tu navegador, un buscador extraño nuevo, o se han creado accesos directos en tu escritorio que no tienes ni idea de qué son. Unchecky al rescate El crapware puede llegar a volver muy lenta tu PC en el mejor de los casos, y en otros te podrías estar infectando con malware sin saberlo . A todos nos gustan los programas gratuitos, y sería mentir si decimos que nunca más los vamos a instalar. Así que mejor usar una herramientas que nos evite instalar más de lo que queremos. C
Leer más