DIW

Appearance

Dispositivos y diseño responsive ​

Una aplicación web puede visualizarse desde dispositivos con características muy diferentes:

  • ordenadores de escritorio;
  • portátiles;
  • tablets;
  • teléfonos móviles;
  • pantallas de distintos tamaños y resoluciones.

Por este motivo, una interfaz no debería diseñarse pensando únicamente en una resolución concreta.

Tamaño de pantalla y viewport ​

El espacio disponible para mostrar una interfaz depende del dispositivo y del tamaño de la ventana del navegador.

Este espacio visible recibe habitualmente el nombre de viewport.

Una misma aplicación puede disponer, por ejemplo, de:

  • mucho espacio horizontal en un monitor;
  • menos espacio en una tablet;
  • una pantalla estrecha en un teléfono móvil.

Esto puede obligar a modificar la distribución de los elementos.

Diseño responsive ​

El Responsive Web Design consiste en diseñar interfaces capaces de adaptarse a diferentes tamaños de pantalla.

No se trata simplemente de reducir todos los elementos, sino de reorganizar la interfaz cuando el espacio disponible cambia.

Por ejemplo, un listado de productos puede mostrarse así:

text
Escritorio

[Producto] [Producto] [Producto] [Producto]
[Producto] [Producto] [Producto] [Producto]

En un dispositivo móvil podría reorganizarse:

text
Móvil

[Producto]
[Producto]
[Producto]
[Producto]

Cambios habituales ​

Cuando cambia el tamaño de pantalla podemos modificar aspectos como:

  • número de columnas;
  • disposición de los elementos;
  • tamaño de imágenes;
  • navegación;
  • espaciado;
  • tamaño de algunos componentes;
  • elementos visibles u ocultos.

Por ejemplo, una barra de navegación horizontal puede convertirse en un menú desplegable en dispositivos pequeños.

Breakpoints ​

Los breakpoints son determinados tamaños de pantalla a partir de los cuales modificamos la distribución de la interfaz.

De forma conceptual podemos trabajar con tres grandes tipos de dispositivo:

  • móvil;
  • tablet;
  • escritorio.

WARNING

Estos grupos son únicamente una referencia de diseño. No debemos asumir que todos los dispositivos móviles, tablets u ordenadores tienen exactamente el mismo tamaño de pantalla.

Mobile First ​

Una estrategia habitual consiste en comenzar diseñando la interfaz para pantallas pequeñas y ampliarla posteriormente para dispositivos mayores.

Esta estrategia se denomina Mobile First.

Puede ayudarnos a identificar:

  • qué información es realmente importante;
  • qué acciones deben estar siempre disponibles;
  • cómo simplificar la interfaz;
  • cómo aprovechar progresivamente el espacio adicional.

Responsive y componentes ​

Los componentes también deben adaptarse al espacio disponible.

Por ejemplo:

  • una tabla puede necesitar desplazamiento horizontal o una representación alternativa;
  • varias tarjetas pueden cambiar el número de columnas;
  • un formulario puede pasar de dos columnas a una;
  • un menú puede transformarse en un menú móvil;
  • algunos elementos secundarios pueden cambiar de posición.

Los frameworks de frontend suelen proporcionar sistemas de grid y breakpoints que facilitan posteriormente esta adaptación.

Diseñar para varios dispositivos ​

Durante la fase de diseño debemos comprobar cómo funcionará la misma vista en diferentes tamaños.

Como mínimo podemos crear versiones para:

text
Desktop
Tablet
Mobile

El contenido y las funcionalidades principales deberían mantenerse, aunque su distribución pueda cambiar.

INFO

En esta unidad nos centraremos en planificar y diseñar estas adaptaciones.

La implementación mediante CSS, media queries, unidades relativas y sistemas de layout se estudiará en la UD2.