Diseño web responsive

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, estamos en un mundo móvil.

El diseño web adaptativo, del 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 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.

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. 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.

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.

 

Diseño web responsive
5 (100%) 1 vote

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Necesita ayuda?