Escalando imágenes para todas las pantallas

Hace unos meses os hablamos de problemas y soluciones cuando se intentan traspasar imágenes grandes de un diseño de escritorio a una pantalla pequeña. En el post de hoy os hablaremos de otro caso muy común en nuestros días que es justo el contrario: qué hacer con las imágenes diseñadas para móvil pero que se adaptan pobremente a pantallas más grandes.

Web de Visit Seattle que Norman Nielsen pone como ejemplo de mala adaptación de móvil a pantalla grande. Imagen de Norman Nielsen

Norman Nielsen ha publicado otro artículo con problemas y soluciones a esta cuestión, cuya autora es Amy Schade.

Problemas

Cuando se preparan imágenes destinadas a una interfaz de un dispositivo móvil al probarlas en una pantalla más grande y de mayor resolución como puede ser una televisión o un ordenador de escritorio.

Los problemas más comunes en estos casos según Norman Nielsen son:

• Escalado desproporcionado: a veces pasa que al pasar una imagen a un tamaño mayor no contamos con el tamaño de los elementos que lo rodean, haciendo un escalado desproporcionado que hace que en una pantalla más grande el usuario vea menos información que en otra más pequeña. Suele ocurrir con carruseles que se diseñan para ocupar una parte de la pantalla en móvil y que luego en escritorio se muestran a pantalla completa.
• Recorte inadecuado: ocurre cuando un elemento en móvil es preponderante visualmente hablando, pero en escritorio tiene menor peso visual. Un recorte inadecuado normalmente le cambia el significado a la imagen, algo que ocurre con frecuencia cuando se recorta verticalmente, manteniendo todo el ancho original.
• Reposicionamiento: ocurre cuando una imagen interactúa con otros elementos de la pantalla haciendo que cambie el significado de ésta, al superponerse un título sobre ella tapando elementos significativos de la imagen.

Soluciones

Para los problemas reseñados en el punto anterior, Norman Nielsen ofrece una serie de soluciones:

• Escalado y recorte: para solucionar un escalado desproporcionado lo mejor es combinar escalado y recorte y probar el comportamiento de las imágenes con una herramienta, como ish de Brad Frost, que nos permita probar los diferentes tamaños de pantalla con los que nos podamos encontrar y comprobar que las imágenes no pierden significado.
• Usa imágenes que funcionen en diferentes ratios y diferentes dimensiones: Norman Nielsen recomienda usar imágenes que funcionen en diferentes ratios y diferentes dimensiones, y para ello debemos hacernos varias preguntas:
  • ¿La imagen se ve bien con diferentes ratios?
  • ¿Es la imagen lo suficientemente grande como para ser recortada de cualquiera de sus cuatro lados y no perder el significado?
  • ¿Hay un motivo central que necesitas que esté visible sea cual sea el tamaño?
  • ¿Es la imagen necesaria en todos los tamaños de pantalla?
• Fija un tamaño de imagen máximo: otra técnica para que las imágenes no pierdan significado ni se deformen es fijar un tamaño máximo a partir del cual aparezcan márgenes a los lados, manteniendo el ratio de la imagen (y de la pantalla) igual.
• Cambia o elimina imágenes: puedes usar varias imágenes, usando para cada tipo de pantalla la que mejor se adapte al aspecto. Por ejemplo, imágenes cuadradas o verticales para dispositivos móviles y en formato apaisado para pantallas grandes. Como última opción puedes eliminar imágenes si ves que éstas no aportan significado o si consideras que hay demasiadas.

Desde el Estudio esperamos que estos consejos os sirvan, y sobre todo os recomendamos probar con ish vuestro producto digital para verificar que las imágenes se ven correctamente en todos los tamaños de pantalla.

En Torresburriel Estudio te podemos ayudar a implementar procesos de mejora continua en tus productos digitales mediante una consultoría de acompañamiento. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.