Krypton Solid

¿Por qué debería estar listo para la retina?

¿Por qué debería estar listo para la retina?

¡Oh mira! Es una característica tecnológica completamente nueva y brillante. Y probablemente ayude que esté siendo implementado por productos de Apple. Un par de sitios excelentes (como este) ya han comenzado a usarlo. ¿Qué hace? ¿Estará por siempre? ¿Qué significa y cuándo o por qué debería probarlo?

Estamos hablando de estar preparados para la retina. Seré honesto contigo; cuando lo escuché por primera vez, lo tiré a un lado. Está principalmente en dispositivos Apple y pensé que era algo que solo ellos podían hacer. No fue un gran cambio de juego porque muchas otras personas no pudieron afectarlo. Pero chico, estaba equivocado.

Ahora, he examinado un par de sitios y escuché a un par de ‘expertos’ y parece que hay una verdadera fascinación por estar listo para la retina. Permítanme decir también que la fascinación es principalmente para los diseñadores web y artistas que se preocupan por que las cosas se vean bien. Estoy seguro de que si le preguntaras a la persona promedio (sin un dispositivo de Apple) qué es retina-ready, te mirarían como si tuvieras dos cabezas. Sin embargo, eso no significa que no será algo que esencialmente resulte grandioso y se apodere del mundo pronto.

¿Así que qué es lo?

Cuando miramos nuestras pantallas, a veces podemos ver los píxeles individuales. Intente echar un vistazo a algo como una esquina redondeada de CSS o una imagen realmente borrosa que se está ampliando. Puede ver los pequeños cuadrados o puntos diminutos que intentan formar el elemento. Los píxeles son extremadamente pequeños, pero para un ojo entrenado, como el de un diseñador, podemos decirlo. Sabemos cuándo vemos pixelación y sabemos cuándo las imágenes y los elementos son simplemente feos.

El problema no fue un gran problema hasta que aparecieron cosas como el diseño receptivo y la necesidad de encajar una cosa en varios tamaños de navegador. Antes, simplemente lo manejaba porque su navegador, en el que estuviera, iba a mostrar exactamente lo que le pedía que mostrara. Ahora, con un diseño receptivo y el funcionamiento de tabletas y otros dispositivos, puedo pellizcar una imagen para hacerla más pequeña o tocar dos veces mi pantalla para aumentar el tamaño de la página.

En los sitios web que no están preparados para retina, las páginas se verán terriblemente pixeladas y borrosas en su estado normal, así como cuando se aumente el tamaño de las páginas. Los sitios web preparados para Retina, junto con los dispositivos, le permiten ver más píxeles por pulgada cuadrada. Por lo tanto, su ojo entrenado ve una imagen o elemento muy suave, de alta calidad y sin distorsión. Estar listo para retina se hace con algo de CSS y Javascript. Sin embargo, para las imágenes, se crean al menos el doble del tamaño que se mostrarán en línea.

Beneficios de los sitios web preparados para retina

1. Imágenes más nítidas: Como ya hemos hablado, toda la idea de la tecnología retina ready es darnos imágenes más nítidas. La idea detrás de retina ready es crear algo que se vea tan nítido como si estuviera impreso. Los colores son vívidos y brillantes porque obtienes más píxeles por pulgada en dispositivos listos para retina. Es esencialmente como alta definición para su computadora portátil, teléfono o tableta.

2. Mejor estética para responder: Una vez más, hemos abordado la idea de que obtienes una mejor calidad de imagen. Lo que es posible que algunos no sepan es que la creación de un sitio web listo para retina permite fuentes más nítidas. Cuando a veces hacemos zoom en páginas web en sitios web, terminamos extendiendo algunas fuentes que no se pueden estirar. Muchas de estas fuentes no deben usarse de esa manera y nos dan el mismo aspecto pixelado que podemos obtener de algunas imágenes.

Los sitios web preparados para Retina ayudan a suavizar las fuentes. También hay algunas fuentes que están preparadas para sitios compatibles con retina y mantendrán su calidad de imagen cuando se acerquen (o incluso se alejen) en dispositivos retina.

3. Diseñar con más detalle: Creo que el minimalismo se ha vuelto muy popular porque es un concepto simple de entender y diseñar. La idea es permanecer lo más limpio posible y deshacerse de la pelusa. De vez en cuando, se incluyen detalles sutiles en este tipo de temas, así como otros que a veces son difíciles de ver en las pantallas normales. Los dispositivos Retina no solo son útiles en la proyección de imágenes de alta calidad, sino también en el brillo de su pantalla.

4. 30 millones de personas piensan que su sitio es feo: Su sitio web está sufriendo en este momento si no está listo para retina. Más de 30 millones de usuarios han comprado estos dispositivos Apple que tienen esta función de pantalla más nítida. Cuando ven su sitio, las imágenes están pixeladas, las fuentes son difíciles de leer y, en general, probablemente haya una mala estética. Si sabe que su audiencia es probablemente la misma audiencia que tiene estos dispositivos, puede ser el momento de seguir adelante y preparar su sitio para que esté listo para retina.

Tutoriales y recursos

Retina.js

Retina.js es un script de JavaScript que verifica su servidor para ver si tiene imágenes de alta resolución disponibles en su sitio web. Por ejemplo, si originalmente tiene picture.jpg disponible, para que esté listo para la retina, buscarán esa imagen que usted cargó que tiene el doble de tamaño y debe ser nombrada en consecuencia. Esto soluciona gran parte del problema con imágenes de alta resolución.

Cómo hacer que su tema de WordPress sea Retina Ready

Una vez que obtienes Retina.js, eso se ocupa principalmente de las imágenes, lo que obviamente es una gran parte de la creación de un sitio listo para retina. Este tutorial explica algunas de las formas en que puede cambiar el resto de su sitio para que funcione en estos dispositivos. Hay algo de CSS, así como el intercambio de salidas de gráficos por fuentes y más.

Cómo crear gráficos Retina para sus diseños web

Entendemos que la mayor parte del trabajo es con gráficos, entonces, ¿cómo cambias los gráficos que tienes para preparar la retina? ¿Y cómo continúas haciendo gráficos listos para retina? Line25 explica algunas de las técnicas disponibles en Photoshop e Illustrator para ordenar sus gráficos.

Cómo crear gráficos listos para la retina en Adobe Photoshop CS6

Para aquellos de nosotros que tenemos poco tiempo y queremos una solución rápida para crear imágenes de retina solo en Photoshop, este es el tutorial para usted. Con 3 pasos rápidos, serás un maestro en la creación de gráficos listos para retina en poco tiempo.

Conclusión

El mundo listo para la retina es todavía nuevo y todavía es algo que Apple conoce. Nadie sabe como lo hace el tiempo, así que esperaremos y veremos. Mientras tanto, muchos de nosotros deberíamos disfrutar de imágenes súper nítidas y de un mejor diseño.

¿Qué te parece que la web esté preparada para la retina? ¿Te importa siquiera? Comparta sus comentarios y enlaces a sitios preparados para retina en los comentarios.

Deja un comentario