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!!

Deja un comentario

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