Podemos resumir en 3  los tipos de formatos de pantallas que utilizamos a diario: teléfonos, tablets y ordenadores (desktops y laptops)

Empieza a haber una considerable cantidad de dispositivos que utilizan pantallas con una doble densidad de píxeles, concretamente 326px por pulgada, de los cuales, el ojo humano tansolo es capaz de percibir 300px. Con el iphone 4, se dió la primera aparición del nuevo tipo de pantalla, denominada «Retina display«.

Para la unificación de criterios entre dispositivos se ha desarrollado el concepto de Diseño Adaptable o Responsive Design, que con una sola versión se cubren todas las resoluciones de pantalla, es decir, el sitio web creado estará optimizado para todo tipo de dispositivos. De esta forma se reducen los costes de creación y mantenimiento. Muy interesante!

PERO: Esta sería la imagen obtenida por una pantalla normal (izquierda) y por una pantalla retina (derecha) con un jpg a la misma resolución:

Entonces como se deben preparar los contenidos?

En cuanto al diseño como siempre las fuentes son adaptables a todos los cambios (por su carácter vectorial) pero no podemos decir lo mismo de las imágenes.

En imágenes, la solución es publicarlas con el doble de píxeles para las pantallas de retina, bajarles la calidad a un 50% (para que no pese el doble) y forzarles el tamaño a la mitad con HTML o CSS, para poder verlo impecable, increíble pero cierto!

Los swf se verán correctamente si todos los assets son no vectoriales, pero se tendrá que tener en cuenta si hay jpg insertados.

En los vídeos directamente no hay una buena solución por el momento, una realidad que afecta también al HTML5.

Así que con esto os aconsejo ir adaptando vuestros sitios para esta nueva generación de pantallas que van a provocar un cambio en la visualización de contenidos a mejor, siempre que estos estén preparados para ello. A continuación os dejo a el más grande para que os acabe de convencer.

Deja una respuesta

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