Responsive Web Design, de Ethan Marcotte

Cuando un diseñador web se enfrenta a un nuevo diseño lo tiene que hacer pensando en cómo se va a ver en diferentes dispositivos, con sus diferentes resoluciones. Uno empieza con la idea en la cabeza y ésta tiene que ir moldeándose según la imaginas en diferentes tamaños de monitor, pero ahora nos encontramos con que no solo se ve la página web en un monitor, en los que las resoluciones ya las tenemos más o menos controladas. Además tenemos que tener en cuenta que ha habido un incremento muy importante de personas que navegan por Internet con dispositivos móviles, en los que el diseño de nuestra página cambia radicalmente. No es lo mismo ver nuestro diseño en un monitor de un equipo de escritorio que verlo en un smartphone  o en un tablet. Aquí es donde debemos tomar una decisión crucial, puesto que el destino final de nuestra página web es que tenga como destino el mayor número de lectores.

Tener en cuenta los diferentes dispositivos en los que se visualizará nuestra web tiene un nombre: Responsive Web Design. Que quiere decir diseño web sensible o que reacciona, y no diseño responsable como algunos lo han traducido por ahi. Y también, es el título de un libro escrito por Ethan Marcotte.

Se trata de un concepto muy actual y de hecho todavía no hay muchas webs que estén diseñadas teniendo en cuenta ésto. Tampoco hay, todavía, mucho tutorial que lo explique, pero todo esto va muy rápido y en breve se verán más y más diseños cumpliendo ésto. De hecho me encuentro haciendo pruebas con algunas webs y los resultados son más que satisfactorios. Me encanta.  Sin ir más lejos, en el último Curso de Diseño multimedia y web, que hace muy poco que finalicé, incluí una clase explicando como se hace. Y dentro de poco subiré un vídeo explicándo como hacerlo.

El secreto está en el uso de CSS3 en el que se incluyen una serie de condiciones en función de la resolución que esté usando el navegador en ese momento, y así, de esta forma usar unos estilos u otros. En el libro se puede seguir paso a paso el desarrollo de una página web responsive. La web que se usa como ejemplo es https://robot-or-not.com/. También podéis visitar la web del autor, Ethan Marcotte, que está preparada igualmente para ser sensible a la resolución.

La verdad es que es un libro muy recomendable, si lo que quieres es dar a los diseños web ese plus extra de web actual y moderna. Si queréis comprar el libro lo podéis hacer en el siguiente enlace:

Responsive Web Design, por Ethan Marcotte

Deja un comentario