Un sitio web receptivo ( RWD , diseño web receptivo en inglés : diseño web receptivo ) es un sitio web cuyo diseño apunta a través de diferentes principios y técnicas para brindar una consulta cómoda en pantallas de muy diferentes tamaños. De este modo, el usuario puede consultar el mismo sitio web a través de una amplia gama de dispositivos (monitores de ordenador, smartphone , tabletas, televisión, etc.) con el mismo confort visual y sin tener que utilizar el desplazamiento horizontal o el zoom in / out en los dispositivos táctiles, incluidos, manipulaciones que a veces pueden degradar la experiencia del usuario , tanto de lectura como de navegación. Un sitio web receptivo es un ejemplo de plasticidad de interfaz .
La noción de web reactiva replantea la forma de diseñar rutas de navegación en Internet, ya que ya no se trata de diseñar tantas rutas como familias de terminales hay, sino de diseñar una interfaz reactiva. Así, las fuentes de información y las bases técnicas no se duplican. Esto genera economías de escala en el diseño y mantenimiento de sitios.
Un sitio web diseñado bajo el principio RWD utiliza la tecnología CSS3 media queries , una extensión de la regla @mediapara adaptar el diseño al entorno de consulta gracias a una cuadrícula fluida en la que se ordenan los diferentes contenidos de la página.
El concepto de RWD, como lo describe Ethan Marcotte, se basa en los tres elementos técnicos mencionados anteriormente.
Si las consultas de medios se plantean a menudo como el principal elemento técnico del diseño web responsive, para Marcotte E., solo se utilizan para realizar algunas modificaciones en la interfaz cuando el uso de cuadrículas fluidas no permite resolver todos los problemas relacionados a la adaptabilidad del producto.
Esta “trinidad sagrada”, como la llama Raphaël Goetter, a veces es criticada, algunos Considerando que la rejilla fluida no es necesaria para tener un producto completamente reactivo.
Para facilitar la creación de modelos reactivos para la web, y así ahorrar tiempo, existen muchos frameworks en CSS responsive ( Bootstrap , Foundation, Gumby, Skeleton…).
El concepto de RWD viene con la proliferación de terminales de consulta de sitios web. Hay dos enfoques diferentes para el diseño de sitios web receptivos que deben tenerse en cuenta.
Comenzando con la versión de escritorio del sitio web, ciertos elementos que componen la página web se reformatean gradualmente a medida que disminuye el ancho de la pantalla, cuando no se eliminan simplemente. Se trata de adaptar el diseño a la definición más débil de la pantalla. El caso más frecuente y revelador es el cambio de un sitio con varias columnas en la versión de escritorio a una sola en la versión móvil.
Este método a veces se cuestiona en la comunidad de diseñadores web, ya que en realidad, un teléfono inteligente cargará la versión de escritorio del sitio web y la versión móvil y, por lo tanto, descargará datos e imágenes de estilo innecesarios que pueden ser pesados desde una red celular.
El concepto de móvil primero puede considerarse como una forma de pensar en la que se favorecería la construcción de una interfaz ergonómica para terminales móviles antes de establecer la ergonomía para un terminal de " escritorio " (oficina). Este pensamiento tiene como objetivo mejorar la experiencia del usuario (UX).
El desarrollo de una interfaz ergonómica bajo la restricción de un pequeño espacio de exhibición obliga a purificar al máximo los elementos visibles por el usuario final. Una tendencia que encontramos cada vez más en la ergonomía de las interfaces web.
Este pensamiento se ve cada vez más favorecido por las herramientas destinadas a la creación de sitios web. Por ejemplo, Wordpress y Drupal CMS están diseñados para integrar esta opción de " primero móvil ". El constante aumento de las ventas de " dispositivos inteligentes conectados " (PC, teléfono inteligente y tableta) ha aumentado el interés en producir modelos RWD para la mayoría de las herramientas de gestión de contenido . El CMS de Joomla! también ofrece modelos de diseño que integran la dimensión receptiva.
Para ir más allá, los nuevos sistemas de gestión de contenido integran el " diseño web adaptable " en su diseño. Algunos CMS como Rubedo integran de forma nativa sistemas de maquetación mediante Fluid Grids y permiten (gracias a Media Queries) definir los elementos de las páginas que se mostrarán según los medios mediante simples casillas de verificación.
El diseño web adaptable se puede aplicar a otros usos de ese sitio web. Todo lo que utilice tecnologías web puede considerarse receptivo. Por lo tanto, es posible diseñar correos electrónicos HTML receptivos, aplicaciones HTML5 móviles receptivas o aplicaciones receptivas de Facebook .