El diseño responsivo optimiza la experiencia de navegación del usuario creando una página web flexible y responsiva, optimizada para el dispositivo que accede a ella. El aumento del uso de Internet y la proliferación de aplicaciones web en tabletas y dispositivos móviles ha sido el motor de este desarrollo. ¿Qué es el diseño web responsivo?
El diseño responsivo es una técnica de diseño y desarrollo web que crea un sitio o sistema que reacciona al tamaño de la pantalla del usuario. El diseño responsivo optimiza la experiencia de navegación del usuario creando una página web flexible y receptiva, optimizada para el dispositivo que accede a ella.
Se ha producido un claro cambio en la audiencia hacia la navegación móvil y el diseño responsivo representa la forma más sencilla de llegar a los usuarios a través de múltiples dispositivos y garantiza una experiencia de usuario fluida. El año 2013 ha sido considerado el “Año del Diseño Responsivo”, y con la creciente preferencia de los lectores por leer las noticias en línea a través de múltiples dispositivos (es decir, tabletas y teléfonos inteligentes), el diseño responsivo es cada vez más importante
Leonardo Moreno 31 de marzo de 2021 El diseño responsivo consiste en responder al tamaño de los dispositivos (escritorio, tableta, smartphone, etc.) desde los que se visualiza un sitio web, adaptando la información, sus dimensiones y mostrando los componentes de forma correcta y ordenada. También es una práctica obligatoria para nuestros tiempos, en los que la tecnología se diversifica, así como las formas de acceder a internet.Orígenes
Un punto de ruptura es cuando el contenido de un sitio web se adapta visualmente de una manera determinada para ofrecer una mejor experiencia al usuario. Por ejemplo, cuando entramos en la web de The New Yorker, podemos ver todas las opciones del menú de navegación en la cabecera. Sin embargo, si accedemos a la web desde un dispositivo móvil, el menor tamaño de la pantalla hará que la barra de navegación aparezca en la parte superior izquierda de la pantalla como un menú desplegable.Veamos algunos buenos ejemplos y prácticas:
YoutubeLa página principal de YouTube distribuye las miniaturas de los vídeos de forma fluida en sus dispositivos, pasando de una lectura horizontal en el escritorio a una vertical en el móvil. Otro cambio importante, y que se define como una buena práctica, es ocultar el menú de navegación en móvil, dentro de lo que se conoce como “botón hamburguesa”. Hay que tener en cuenta también que la búsqueda en escritorio es una entrada completa, mientras que en móvil es sólo un icono que tras la pestaña, mostrará la entrada.
Leonardo Moreno 31 de marzo de 2021 El diseño responsivo consiste en responder al tamaño de los dispositivos (escritorio, tableta, smartphone, etc.) desde los que se visualiza un sitio web, adaptando la información, sus dimensiones y mostrando los componentes de forma correcta y ordenada. También es una práctica obligatoria para nuestros tiempos, en los que la tecnología se está diversificando, así como las formas de acceder a internet.Orígenes
Un punto de ruptura es cuando el contenido de un sitio web se adapta visualmente de una manera determinada para ofrecer una mejor experiencia al usuario. Por ejemplo, cuando entramos en la web de The New Yorker, podemos ver todas las opciones del menú de navegación en la cabecera. Sin embargo, si accedemos a la web desde un dispositivo móvil, el menor tamaño de la pantalla hará que la barra de navegación aparezca en la parte superior izquierda de la pantalla como un menú desplegable.Veamos algunos buenos ejemplos y prácticas:
YoutubeLa página principal de YouTube distribuye las miniaturas de los vídeos de forma fluida en sus dispositivos, pasando de una lectura horizontal en el escritorio a una vertical en el móvil. Otro cambio importante, y que se define como una buena práctica, es ocultar el menú de navegación en móvil, dentro de lo que se conoce como “botón hamburguesa”. Hay que tener en cuenta también que la búsqueda en escritorio es una entrada completa, mientras que en móvil es sólo un icono que tras la pestaña, mostrará la entrada.
DiseñoLos beneficios de usar el diseño web responsivo4 min readWill Fanguy – Jun 6, 2018Enlace copiado al portapapelesLa vida era más sencilla cuando los diseñadores web solo tenían que preocuparse de formatear los sitios para los ordenadores de escritorio. La mayoría de los monitores y pantallas eran fáciles de diseñar, y un tamaño se ajustaba a la mayoría. Luego llegó el auge de la web móvil.
Desde los albores de la web móvil, uno de los grandes debates era si había que diseñar un sitio adaptable y con capacidad de respuesta que cambiara para ajustarse a diferentes portales o diseñar un sitio móvil independiente [conocido coloquialmente como diseño m(dot) por la conocida estructura de URL http://m.site.com].
A efectos de nuestro debate de hoy, consideraremos que el diseño m(dot) es cosa del pasado, ya que ya no se considera una buena práctica porque implica la creación de un sitio completamente nuevo con menos contenido, menos imágenes y una navegación simplificada.
A principios de siglo, el debate en el diseño web era entre el diseño fijo y el diseño fluido. Los diseños fluidos se establecían con porcentajes y se estiraban para ajustarse al marco del navegador, mientras que los diseños fijos se encerraban en una única disposición determinada por un ancho de píxel que establecía el diseñador.