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

diseño web adaptable

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

¿Qué es el diseño receptivo?

El diseño web receptivo (RWD) es un enfoque de diseño web destinado a crear sitios para proporcionar una experiencia de visualización óptima (lectura y navegación fáciles con un mínimo de cambio de tamaño, desplazamiento y desplazamiento) en una amplia gama de dispositivos (desde teléfonos móviles hasta computadoras de escritorio). monitores). Un sitio diseñado con RWD adapta el diseño al entorno de visualización mediante el uso de cuadrículas fluidas basadas en proporciones, imágenes flexibles y consultas de medios CSS3, una extensión de la regla @media.

Wikipedia

En otras palabras, se pueden ajustar elementos como las imágenes, 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. Recientemente reconstruimos el DK New Media sitio para responder y ahora estamos trabajando en Martech Zone ¡hacer lo mismo!

La metodología para crear un sitio que responda es un poco tediosa, ya que necesita tener una jerarquía para sus estilos que se organizan en función del tamaño de la ventana gráfica.

Los navegadores son conscientes de su tamaño, por lo que cargan la hoja de estilo de arriba a abajo, consultando los estilos aplicables para el tamaño de la pantalla. Esto no significa que tenga que diseñar diferentes hojas de estilo para cada tamaño de pantalla, solo necesita cambiar los elementos necesarios.

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 que ilustra los beneficios potenciales de crear un diseño receptivo para múltiples dispositivos:

Infografía de diseño web receptivo

Si desea ver un sitio receptivo en acción, apunte su Google Chrome navegador (creo que Firefox tiene la misma función) para DK New Media. Ahora seleccione Ver> Desarrollador> Herramientas para desarrolladores del menú. Esto cargará un montón de herramientas en la parte inferior del navegador. Haga clic en el pequeño icono de móvil en el extremo izquierdo de la barra de menú Herramientas para desarrolladores.

responsive-testing-chrome

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.

3 Comentarios

  1. 1
  2. 2

    Muchas gracias Douglas por este artículo tan bien explicado. Debo estar de acuerdo con esto aunque en el lado del contenido de las cosas. Para la mayoría de los sitios que hacemos, un diseño receptivo no será suficiente. Necesitamos contenido receptivo. ¡Pero para los sitios web más básicos, seguramente usaremos su artículo bien documentado sobre cómo manejar esto!

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.