Pantalla Retina y diseño web Retina

La densidad de píxeles garantiza la nitidez de los contenidos que se muestran en Internet y en los dispositivos finales correspondientes. Por supuesto, la tecnología evoluciona constantemente: la resolución retina es actualmente el estándar, y todo el mundo habla de diseño web retina y pantallas retina. Todo parece más fino, más suave y más agradable a la vista. Retina no es un término técnico, sino una tecnología de visualización que debe su creación a Apple, entre otros. Hasta ahora, la palabra retina sólo se asociaba a otras cosas, ya fuera la retina del ojo o la nebulosa retina que sin duda conocen los astrónomos.

El desarrollo de Retina

Cuando Apple presentó el iPhone 4, el término pantalla Retina apareció por primera vez. Steve Jobs se refirió a la pantalla de 3,5 pulgadas como pantalla Retina porque tenía una resolución de 960 x 640 píxeles y ofrecía 326 ppi. El modelo anterior del iPhone 4 sólo ofrecía 480 x 320 píxeles, lo que significa que el número total de píxeles visualizables se cuadruplicaba mientras que el tamaño de la pantalla seguía siendo el mismo. El término «pantalla Retina» procede del nombre, ya que supuestamente los píxeles individuales ya no son reconocibles a una distancia de visualización normal de unos 30 centímetros, lo que beneficia a las fuentes y las imágenes, siempre que estén optimizadas para el mayor número de píxeles.

El efecto «todo es más fino, suave y agradable» se crea gracias a la resolución mucho mayor, pero el área visualizable sigue siendo idéntica. Los gráficos adaptados a la pantalla Retina son mucho más grandes y la vista a escala hace que todo sea más agradable a la vista. La desventaja es, por supuesto, que las aplicaciones «antiguas» también deben adaptarse, ya que de lo contrario aparecerán borrosas.

Diseño web Retina

Diseño web RetinaCuando los usuarios navegan por la web, se encuentran con una desagradable sorpresa: contenidos borrosos. Entonces, ¿qué pueden hacer los desarrolladores web para mostrar los sitios web en pantallas HiDPI con toda nitidez, y qué elementos de un sitio web causan esta borrosidad?

Una página web se compone de imágenes, texto y elementos de terceros/vídeo. ¿Qué objetos empeoran la calidad de la percepción? El navegador genera las letras de forma nativa, con una excepción: los bloques de texto se crean como gráficos, lo cual es bastante desfavorable de todos modos, aunque sólo sea por la falta de optimización para los motores de búsqueda. Los pasajes de texto en pantallas retina son ahora nítidos en casi todos los navegadores y su lectura es más agradable que en papel. Conclusión: no es necesario realizar ajustes, ya que el sistema ha cambiado.

Para los vídeos incrustados en Retina Web Design, depende de la resolución del vídeo. Por lo tanto, es aconsejable asegurarse de que la resolución del material es lo más alta posible al incrustar.

El enemigo público nº 1 son los gráficos. Estropean la imagen general de un sitio web al aparecer borrosos. Dependiendo del tamaño de la WEB, cada gráfico utilizado debe ser inspeccionado. Para «repararlos» existen las siguientes opciones: los símbolos, botones, encabezados y otros elementos de la GUI deben realizarse con CSS y fuentes web, que también son ideales para textos e iconos. La ventaja: el navegador genera el contenido de forma nativa.

Existen numerosas soluciones JavaScript y CSS para fotos, logotipos y otros objetos gráficos dentro de la página, que (re)cargan los recursos en función de la densidad de píxeles y, por tanto, pueden servir de forma óptima a cualquier resolución. Como desarrollador web, no hay que ignorar los favicons y los iconos Apple Touch, que suelen utilizar los lectores de feeds.

Dependiendo de la complejidad de un proyecto, la compatibilidad con las pantallas Retina puede implementarse fácilmente. El mayor esfuerzo consiste en generar dos versiones de una imagen: una para pantallas normales y otra en doble resolución para monitores HiDPI. Si es necesario, se puede automatizar el escalado de grande a pequeño.