2.7. El diseño adaptable o responsivo
Desde 2016, el número de usuarios de móvil a escala internacional superó los dos mil millones. De hecho, más del 60 % de las búsquedas en línea ahora provienen de un dispositivo móvil. La rápida introducción de los dispositivos móviles y su uso cada vez más intenso ha llevado a la necesidad de diseñar interfaces que sean totalmente funcionales, independientemente del dispositivo desde el que se acceda a ellas (por ejemplo, un ordenador portátil, un móvil o una smart TV). El diseño web responsivo surge de esta necesidad.
Un sitio web responsivo permite cambiar el diseño para ofrecer una experiencia basada en el dispositivo que se utiliza.
Por ejemplo, un sitio web móvil responsivo incluye elementos de diseño como:
- Texto fácilmente legible sin requerir zoom.
- Espacio adecuado para interaccionar con elementos usando una interfaz táctil.
- Interfaz completa sin desplazamiento horizontal.
Fuente: https://www.hughesandco.com/responsive-web-design-what-you-need-to-know/.
El diseño responsivo ofrece tres ventajas principales:
- Mejora la experiencia y la hace más consistente para cualquier usuario y en cualquier dispositivo.
- Aumenta la capacidad de respuesta del sitio web y asegura que las personas que usan un dispositivo móvil solo estén viendo la información más esencial, mejorando así la usabilidad la página.
- Aumenta la visibilidad en los buscadores. Una web que ofrece una experiencia efectiva y flexible es priorizada por los motores de búsqueda.
Las claves del diseño:
Una cuadrícula fluida garantiza que el diseño sea flexible y escalable.
Los elementos tendrán un espaciado y una proporción consistentes, y podrán ajustarse a un ancho de pantalla relativo. La técnica consiste en usar porcentajes para expresar los anchos de las divisiones de la página. Es decir, deberemos determinar si una división debe ser el 100 % de la página o algo menos. Sin embargo, a veces no queremos que una división se dimensione en un monitor muy grande; en estos casos, podemos aplicar una propiedad de ancho máximo para limitar el tamaño a esa dimensión.
Fuente: https://www.vervesearch.com/best-practice-guides/responsive-web-design/.
Texto e imágenes flexibles.
El texto y las imágenes flexibles se ajustan dentro del ancho del diseño de un sitio web, de acuerdo con la jerarquía de contenido establecida en la hoja de estilo. De esta forma, el texto es legible independientemente del dispositivo del usuario final. Con un contenedor flexible (dentro de la cuadrícula), el texto puede ajustarse con un aumento en el tamaño de fuente en dispositivos más pequeños. Para asegurarnos de que las imágenes sean fluidas, tendremos que crear un estilo que establezca un tamaño máximo para el escalado de las imágenes; esto hará que la imagen responda y se dimensione para que nunca supere cierto porcentaje de su tamaño original y así evitar que la calidad se vea afectada.
Consultas. Queremos manejar la mayor cantidad de diseño receptivo con anchos porcentuales como sea posible.
Sin embargo, a veces, cuando se dimensiona por porcentaje, hay otros elementos que deben cambiarse para ciertas pantallas o ventanas de tamaño. Por ejemplo, el tamaño del texto de los elementos de navegación puede ser demasiado grande en los tamaños más pequeños, o podemos preferir que se apilen algunos elementos o divisiones uno al lado del otro en un tamaño más pequeño. También se pueden incluir consultas para ajustar los elementos dependiendo de la orientación de la pantalla (vertical u horizontal) y para diferentes tipos de medios, como impresión o televisión. Para esto, se utilizan las consultas de medios. Las consultas de medios son simplemente estilos o reglas especiales que solo se implementarán en un tamaño determinado, permitiendo múltiples diseños utilizando la misma página web codificada en HTML.
Ejercicio
En uno de los ejercicios anteriores hemos realizado un primer prototipo del diseño de una web de búsqueda de pisos; ahora vamos a usar Sketch (para usuarios de Mac OS) o Figma (para usuarios de Windows) para modificar el comportamiento de algunos elementos en búsqueda de un diseño más responsivo:
- Identificad qué elementos de la página principal estarán presentes en la pantalla de un PC, la de una tableta y la de un móvil.
- Identificad qué elementos serán diferentes o incluso desaparecerán en algunos de estos tipos de pantalla.
- Cread el título (h1) y subtítulo (h2) de la página si no lo habéis hecho ya. En la versión de PC, el título h1 podría ser de unos 72 px, mientras que el h2 de unos 32 px. En el caso de que la web se visualice desde un móvil, 72 px es demasiado grande y dificultaría la legibilidad. Tendremos que hacer que el título h1 y h2 respondan al tipo de dispositivo. Necesitamos crear un estilo para cada encabezado h1 y luego guardarlo como un estilo de texto con la sintaxis o convención de nomenclatura correcta. Esto nos permitirá seleccionar más tarde el h1 necesario según sea necesario mientras diseñamos el resto de la página. Cread los estilos y organizad las diferentes tipografías usando la siguiente sintaxis: para el h1 grande para PC usamos Headings/H1/Desktop, para una tableta usaremos Headings/H1/Tablet y para un móvil Headings/H1/Phone.
- Podéis hacer lo mismo con la adaptación del tipo de h2.
- Una cosa más que podemos hacer es configurar los fondos para que también sean fluidos. Las alturas de las secciones difieren entre los diseños móviles y pantallas de PC. Esto significa que tendréis que mover los elementos de fondo hacia arriba y hacia abajo a su lugar correcto.