Retina Display y el diseño web

Nadie dijo que ser diseñador web sea una cosa fácil, aunque a nuestros clientes les parezca que sea arrastrar y mover menús, imagenes, etc, es algo un tanto más complicado.

La tecnología va avanzando, y nosotros, con ella, también. Nuestra forma de programar hace 5 años y ahora, ha cambiado, se añaden nuevas tecnologías y nosotros debemos renovarnos con ellas. Como se dice: «Renovarse o Morir».

Es el returno de la «Retina Display» o alta definición.

Debemos de diseñar para tres tipo de pantallas, verdad? Para teléfonos, tablets y ordenadores de sobremesa o portátiles.

¿Qué debemos de hacer?

Para hacer una imagen de alta resolución lo que tenemos que hacer es crear una con el tamaño normal, y correcto, y luego, otra con el doble de su tamaño. Si quieres que tu logo se vea bien a 200×200 cea una imagen a 400×400 y ponla de tamaño a 200×200 usando css. Esto en todas las imagenes de la web. Sencillo, verdad?

Vamos al tema de optimización: Antes de documentarme al empezar a diseñar para retina display, vi un truco que decían por ahí: Si exportas una imagen en formato jpg al doble de resolución, con un 40% de calidad y CSS lo redimensionas a la mitad de su tamaño, se ve genial en pantallas normales y en pantallas retina.

Sería algo asi:

Style.css

#logo {
background-image: url('images/logo.png');
background-size: 200px 200px;
background-repeat: no-repeat;
}

Retina.CSS

#logo {
background-image: url('images/@2xlogo.png');
}

Fácil cierto? Todavía tu web no esta optimizada para retina display? A que esperas!!

Imagen destacada: https://www.shutterstock.com/es/image-photo/cracow-june-26-man-uses-ipad-290995835

Otros post que te podrían interesar

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable: Marta Torre Ajo.
Finalidad: Los datos que te pido son los mínimos necesarios para poder responder a las consultas que realices.
Legitimación: Aceptación expresa de la política de privacidad.
Destinatarios: No cederé nunca tus datos a terceros, salvo obligación legal.
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.
Información adicional: Puedes consultar la información detallada en este enlace.