Diseño de Resolución de Pantalla Retina: Consejos y trucos Para Diseñadores de Interfaz de usuario

Vandelay Design puede recibir compensación de empresas, productos y servicios cubiertos en nuestro sitio. Para obtener más detalles, consulte nuestra página de divulgación.

Con la llegada de los teléfonos inteligentes de alta resolución y el iMac retina, se está haciendo evidente que los diseñadores de dispositivos móviles web & deben tener en cuenta las pantallas retina en su proceso de diseño. Más dispositivos están saliendo del estante con una resolución de pantalla retina que agrupa varios píxeles en el mismo espacio físico de la pantalla.

Esto significa que el contenido se verá más nítido si se diseña correctamente. Entonces, ¿cómo debería trabajar un diseñador de interfaz de usuario para manejar pantallas retina? ¿Qué tecnología actual está disponible y cuál es la mejor manera de manejar la mayor base de usuarios?

Me gustaría cubrir los métodos más confiables para manejar pantallas retina/hi-DPI y crear interfaces que simplemente funcionen. Si sigue esta guía, seguramente se irá con consejos aplicables y soluciones prácticas para el enigma de la pantalla retina.

13" y resoluciones de Macbook de 15"

Manejo de dispositivos Retina

El primer paso es comprobar las pantallas basadas en resoluciones de alto DPI. Ahora que algunos dispositivos tienen tamaños @ 3x, querrá verificar varias resoluciones de pantalla antes de mostrar imágenes. Siempre puedes estar seguro con imágenes @3x, pero también son mucho más grandes y requieren más ancho de banda para descargarlas.

Esta comprobación se puede hacer con srcset, pero también hay muchos métodos diferentes que usan JavaScript. Echa un vistazo a este tutorial para obtener más información.

Un buen truco para los iconos listos para retina es usar un iconfont gratuito en lugar de imágenes de mapa de bits. Font Awesome es una opción muy popular que es completamente gratuita, de código abierto y proporciona una biblioteca de iconos para elegir.

página de inicio de iconos impresionantes

Otra opción es usar imágenes SVG en lugar de mapas de bits. Estos SVG son vectores totalmente escalables que poco a poco han ganado soporte completo para navegadores.

caniuse svg check

La única dificultad es diseñar SVG desde cero y aprender a exportarlos correctamente, lo que puede ser más complicado que solo usar PNGs o JPEG. Plus SVG no es útil para imágenes detalladas como fotografías, ya que en realidad es un tipo de archivo vectorial.

Pero los SVG tienen más espacio para animaciones personalizadas que muestran nítidas en todas las resoluciones.

El objetivo es decidir los tipos de archivo y las comprobaciones del navegador caso por caso. Algunas imágenes son mejores como JPG y algunos sitios web son mejores con revisiones de retina CSS vs JS. Personalmente prefiero CSS, pero recomiendo probar ambos para ver lo que prefieres.

Imágenes de fondo CSS

La forma más sencilla de manejar fondos personalizados es con imágenes de fondo retina utilizando la propiedad tamaño de fondo.

Esta es a menudo la forma más rápida de comprobar las imágenes de retina, ya que pueden funcionar en todos los dispositivos, incluso en dispositivos que no sean retina. No está de más tener una imagen sobre optimizada en CSS si no le importan los tiempos de carga extendidos.

El método alternativo sería cargar diferentes archivos CSS basados en comprobaciones de JavaScript o comprobaciones de servidor de backend.

Pero quizás la mejor manera de manejar CSS es con una consulta multimedia CSS retina. Estas consultas comprueban la densidad de píxeles y cargan diferentes imágenes de fondo para esos dispositivos (también ajustan el tamaño del fondo).

CSS es generalmente la forma más sencilla de manejar imágenes, pero no se puede usar para imágenes in-post. Estos son mucho más complicados y deben cargarse con la resolución más alta posible o actualizarse con JavaScript.

Si no está tan preocupado por los tiempos de carga, simplemente elija la resolución más grande para todas sus imágenes. Si no, entonces querrá cargar imágenes @2x y @3x manualmente con una biblioteca JavaScript gratuita como Retina.js.

JavaScript Comprueba

Si desea tener el mayor control sobre el contenido de resolución retina, necesitará JavaScript. La mayoría de los visitantes ejecutan código JS y es la forma más fácil de detectar resoluciones con métodos JavaScript integrados.

Encontrarás muchos tutoriales gratuitos para detectar pantallas retina JavaScript, pero esto es solo la mitad de la batalla. Una vez que conozca la resolución de la pantalla, deberá actualizar las imágenes en consecuencia.

Recomiendo usar una solución preconstruida para ahorrar tiempo y dolores de cabeza durante el proceso.

Los desarrolladores nunca quieren reinventar la rueda. Entonces, si alguien más ya resolvió este problema, ¿por qué debería molestarse en comenzar de cero?

La única razón para lanzar su propia solución es si necesita una funcionalidad personalizada. En ese caso, consulte los enlaces a continuación para ver cómo puede implementar una comprobación de retina JS personalizada.

De lo contrario, sigue desplazándote y coge una de las bibliotecas JS gratuitas que he enumerado en la siguiente sección.

  • 5 Formas de Admitir Pantallas Retina de Alta Densidad
  • Imágenes retina 2x fáciles con jQuery
  • Servir Gráficos Retina En Su sitio web

Herramientas Retina de código abierto

Hay docenas de herramientas retina personalizadas para detectar y administrar imágenes retina. Estos no siempre son los más fáciles de implementar, pero pueden hacer que su audiencia sea mucho más feliz a largo plazo.

Entonces, ¿cuál debe elegir para comenzar? Realmente no hay una respuesta equivocada.

Me gustaría proporcionar algunas de las herramientas más populares y darle la oportunidad de elegir lo que funcione mejor para su sitio.

Retina.js

retinajs código abierto javascript

La Retina.js library es una base de código JavaScript de código abierto gratuita que detecta automáticamente resoluciones de retina y tamaños de pantalla. El script también comprueba si hay una imagen de alta resolución existente siguiendo las directrices de diseño de Apple, y si es así, cambiará a mostrar la versión de alta resolución.

Las convenciones de nomenclatura siguen un sufijo de @2x antes del tipo de archivo. Así que si tienes mi imagen.jpg también querrás tener [email protected] en la misma carpeta.

Este es uno de los scripts más simples porque realmente es plug and play. Pero también se requiere un poco de conocimiento del contenido de retina para que funcione a la perfección. Si acaba de empezar, este es un gran script y no puede equivocarse con la funcionalidad predeterminada.

jQuery Retina

complemento de retina jquery

Otra opción es jQuery Retina con la biblioteca jQuery. Esto funciona de manera un poco diferente porque se ejecuta en atributos de datos HTML5.

Simplemente pasa un valor de URL de imagen al atributo data-retina en cada etiqueta de imagen que requiera una alternativa de imagen retina. Requiere una codificación más dura, pero también es la más fácil de revertir con opciones personalizadas. La página de GitHub tiene más información con los pasos básicos para la instalación.

WP Retina 2x

plugin wp wordpress retina @2x

Si eres un usuario de WordPress, WP Retina 2x podría ser una gran alternativa a agregar un complemento JS de GitHub. El plugin WP Retina funciona directamente con WordPress para comprobar si hay imágenes del tamaño de la retina y las reemplaza automáticamente.

Es otra solución plug-and-play en la que solo tienes que activar el plugin y dejarlo correr. Súper fácil de usar y definitivamente una solución limpia para usuarios de WP no técnicos.

Denso.js

densejs plugin jquery

Lo que más me gusta de los Densos.la biblioteca js es compatible con diferentes proporciones de dispositivos. No todas las pantallas retina son simplemente 2 veces el tamaño. Otras relaciones pueden incluir 1,5 x o 3x.

Este complemento detecta automáticamente qué densidad de pantalla se está utilizando y ajusta las imágenes en consecuencia. Hay muchas opciones, por lo que la personalización no es un problema. Echa un vistazo a GitHub para comenzar y a los documentos en línea para obtener más información.

Si está buscando más recursos de pantalla retina, también recomiendo estos complementos.

  • CSS Media Queries para iPads & iPhones
  • Imágenes adaptativas en HTML
  • Swipebox jQuery Lightbox
  • Grails Plugin de imágenes Retina
  • Elegir una solución de Imagen adaptable

Esperemos que este material ofrezca más de suficiente para ayudarle a manejar imágenes y medios en pantallas retina. Dado que CSS se escalará automáticamente para todas las resoluciones, realmente no necesita preocuparse por cosas como márgenes o anchos de página.

Pero los medios en página, como iconos y fotos, deberán diseñarse a medida para dispositivos retina.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.