Diseño web adaptable: ejemplos y explicación

Diseño web adaptable: una solución

Monitor

¿Te imaginas ver una página web diseñada para un monitor cuadrado (arriba) en la pantalla rectangular de un teléfono inteligente (abajo)?

Teléfono inteligente

¿Cómo puede un diseñador web mantener la coherencia en varios dispositivos y plataformas? Una respuesta sería diseñar una página web para cada dispositivo, pero eso sería mucho trabajo. Una solución más eficiente es el diseño web receptivo ( RWD ), que responde a cómo el usuario ve y usa la página. Las páginas se ajustan automáticamente, teniendo en cuenta el tamaño de la pantalla, la plataforma y la orientación. Los diseñadores que usan RWD eliminan la necesidad de múltiples diseños web para múltiples dispositivos.

Este método de diseño web fue creado por Ethan Marcotte, quien basó el concepto RWD en una arquitectura receptiva . Las características arquitectónicas receptivas en edificios o habitaciones se ajustan a cómo se utiliza la habitación. Un ejemplo sería una habitación que usa sensores de movimiento para cambiar la temperatura de la habitación a medida que más personas ingresan a la habitación.

De manera similar, RWD ajusta una página web en función de las capacidades del dispositivo en el que se visualiza la página web.

Elementos de RWD

Hojas de estilo en cascada

Entonces, ¿qué hace exactamente una página web con RWD de manera diferente? Los diseñadores web que utilizan RWD utilizan hojas de estilo en cascada ( CSS ), un lenguaje de hojas de estilo con capacidades flexibles. CSS proporciona las instrucciones para controlar cómo se presenta una página, cómo se muestran las imágenes y el texto, y otros elementos fundamentales de la página web.

Así es como funciona: el diseñador crea un CSS base que tiene todos los elementos de diseño fundamentales y luego crea una hoja de estilo que define el diseño y la estructura de la página para cada tipo de dispositivo que podría usarse (computadora de escritorio, computadora portátil, tableta, teléfono inteligente). ). Integrada en la página principal de CSS hay una consulta de medios , que busca rápidamente para determinar el tipo de dispositivo que se utiliza para abrir la página, sus capacidades y su orientación, y luego la consulta de medios carga el CSS que mejor se adapta al dispositivo.

Unidades relativas

Los diseñadores de RWD hacen otra cosa importante de manera diferente durante el diseño web: utilizan unidades relativas en lugar de un número absoluto de píxeles . Los píxeles son elementos de imagen que se utilizan para definir el número máximo de puntos en la pantalla que puede ocupar el elemento, ya sea vertical u horizontalmente. Por ejemplo, una imagen con un píxel absoluto de 200 x 149 se vería así:

Imagen: 200 x 149 píxeles

En lugar de definir un número determinado de píxeles, RWD utiliza porcentajes. Los diseñadores escriben la instrucción para decir que el elemento será del 20% x 30%, lo que significa que el elemento tendrá el 20% del ancho y el 30% de la altura de cualquier pantalla en la que se esté viendo. Una pantalla más grande significará una imagen más grande.

Los diseñadores también utilizan este proceso para crear imágenes flexibles . Las imágenes flexibles se pueden cambiar de tamaño proporcionalmente donde el ancho máximo está determinado por el ancho de la pantalla. La altura se determina manteniendo iguales las proporciones de ancho y alto. A esto se le llama mantener la relación de aspecto . Apliquemos esto a la imagen de 200 x 149 que vimos anteriormente: si el ancho máximo es 150 píxeles, el aspecto vertical sería 112.

Imagen: 150 x 112 píxeles

Estructuras de diseño personalizadas

Los diseñadores también pueden usar CSS para desarrollar estructuras de diseño personalizadas . Las estructuras de diseño personalizado realmente adaptan el diseño de la página para el dispositivo que se utiliza. Digamos, por ejemplo, que el diseño en una pantalla más ancha tiene barras laterales (texto o imágenes que complementan el texto principal y aparecen a los lados de la pantalla). Con una estructura de diseño personalizada, cuando se abre en una pantalla más pequeña, las barras laterales se mueven hacia la parte inferior y se utilizan barras de desplazamiento verticales.

Veamos una página web en una pantalla más amplia en la siguiente imagen:

Estructura de diseño con barras laterales.

En una pantalla más pequeña, esa misma página web podría verse así:

Estructura de diseño personalizado sin barras laterales

Si un dispositivo no usa CSS, los diseñadores pueden lograr el mismo efecto usando el lenguaje de programación JavaScript para escribir un diseño flexible. Los diseñadores también pueden simplemente optar por no mostrar cierto contenido, como imágenes o texto complementario, cuando la página se visualiza en una pantalla más pequeña.

Resumen de la lección

El diseño web receptivo fue desarrollado por Ethan Marcotte y se basó en el concepto de arquitectura receptiva en la industria de la construcción. Con el creciente número de dispositivos que las personas pueden usar para ver páginas web, los diseñadores web crearon páginas web que podrían adaptarse a cualquier dispositivo que usara el espectador, ya sea una computadora de escritorio, computadora portátil, tableta o teléfono inteligente. El diseño web receptivo permite diseños y estructuras flexibles utilizando hojas de estilo en cascada (CSS) o JavaScript.

Al usar CSS, el diseñador puede crear una hoja de estilo principal para controlar el diseño básico de la página web y luego crear varias hojas de estilo complementarias para abordar las estructuras de diseño para una entrega específica. El CSS usa una consulta de medios para determinar primero qué tipo de dispositivo se está utilizando y luego usa la hoja de estilo que funciona mejor en ese entorno. Usando CSS o JavaScript, los diseñadores pueden definir el elemento de la página web en términos de porcentajes en lugar de píxeles absolutos y pueden usar imágenes flexibles que mantienen su relación de aspecto, sin importar el tamaño u orientación del dispositivo.