¿Qué es el diseño receptivo? (Video explicativo e infografía)

Ha tardado una década en diseño web adaptable (RWD) para pasar a la corriente principal desde Cameron Adams presentó por primera vez el concepto en 2010. La idea era ingeniosa: ¿por qué no podemos diseñar sitios que se adapten a la ventana gráfica del dispositivo en el que se visualizan?

¿Qué es el diseño receptivo?

El diseño web receptivo es un enfoque de diseño que garantiza que un sitio web brinde una experiencia de visualización óptima en cualquier dispositivo, independientemente del tamaño o la resolución de la pantalla. Implica el uso de diseños flexibles, diseños basados ​​en cuadrículas y consultas de medios para crear un sitio que se ajuste al tamaño de la pantalla en la que se está viendo. Esto significa que un sitio web diseñado con un diseño web receptivo se verá y funcionará bien en una computadora de escritorio, una tableta o un teléfono inteligente.

En otras palabras, los elementos como las imágenes se pueden ajustar, así como el diseño de esos elementos. Aquí hay un video que explica qué es el diseño receptivo y por qué su empresa debería implementarlo. Si está desarrollando un nuevo diseño de sitio o una aplicación web, el diseño web receptivo es imprescindible, no una opción, dado que más de la mitad de todo el tráfico web proviene de dispositivos móviles que tienen diferentes anchos y altos de ventana gráfica.

El diseño receptivo también es óptimo para los diseñadores web, que no tienen que crear experiencias independientes que sean únicas según el dispositivo o la ventana gráfica. El diseño web receptivo se puede lograr usando CO.

Consultas de ventana gráfica CSS de diseño receptivo

Este es un ejemplo de una hoja de estilo que ajusta el tamaño de la fuente en función de la ventana gráfica mediante una consulta de medios:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

Los navegadores son conscientes de su tamaño y cargan la hoja de estilo de arriba a abajo. Al consultar los estilos aplicables para el tamaño de la pantalla, puede establecer elementos de estilo específicos para cada ancho mínimo y máximo del dispositivo. Esto no significa que tengas que diseñar diferentes sitios para cada tamaño de pantalla, solo necesitas cambiar los elementos necesarios usando las consultas de medios.

Operar con una mentalidad de móvil primero es el estándar básico en la actualidad. Las mejores marcas de su clase no solo piensan en si su sitio es compatible con dispositivos móviles, sino en la experiencia completa del cliente.

Lucinda Duncalfe, directora ejecutiva de Monetate

Aquí hay una infografía de Monetate ilustrando los beneficios potenciales de crear un diseño receptivo para múltiples dispositivos:

¿Es su sitio receptivo?

Una forma simple de ver si su sitio responde es simplemente agrandar o reducir la ventana de su navegador para ver si los elementos se mueven según el ancho del navegador.

Para mayor precisión, apunte su Google Chrome navegador a su sitio. Seleccione Ver> Desarrollador> Herramientas para desarrolladores del menú. Esto cargará un montón de herramientas en un panel o ventana nueva. Haga clic en el ícono pequeño a la izquierda de la barra de menú Herramientas para desarrolladores que parece un ícono de dispositivo móvil y tableta. Puede seleccionar algunos dispositivos estándar e incluso cambiar si desea ver la página horizontal o verticalmente.

Puede usar las opciones de navegación en la parte superior para cambiar la vista de horizontal a vertical, o incluso seleccionar cualquier número de tamaños de ventana gráfica preprogramados. Puede que tengas que volver a cargar la página, pero es la herramienta más genial del mundo para verificar tu configuración de respuesta y garantizar que tu sitio se vea genial en todos los dispositivos.