Para un web developer oír hablar de “pixel perfect” puede ser un dolor de cabeza. La cuestión es que si el web designer ha proyectado aquella imagen para la web e incluso el cliente ya lo ha validado, hay que transformar en código aquel diseño. Bueno, por lo menos darle una apariencia lo más fidedigna al trabajo del diseñador que sea posible. El problema viene cuando el diseñador habla de pixel perfect, y no habla precisamente de la película de Disney.

La necesidad de transformar un diseño web en una página web y que sea pixel perfect en una época donde el responsive design es obligatorio es una tarea interesante y apasionante, sobre todo cuando hay que respetar el tema cross-browsers. Felizmente hay diferentes formas de abordar este problema y solucionarlo.

Pixel Perfect

Pixel Perfect es un add-on de Firebug, para Firefox  que en mi versión de Firefox (25.0.1) no ha funcionado y en otras versiones funciona incorrectamente. Así que no he dedicado mucho tiempo investigándolo, a pesar de la buena pinta que tiene.

PerfectPixel

PerfectPixel es de aquellos add-ons que simplemente funcionan y es realmente fácil de usar. Por lo menos en mi versión de Google Chrome. PerfectPixel es una herramienta sencilla, pero poderosa. Es una extensión que permite sobreponer imágenes, supongo que tal como el Pixel Perfect del FF, directamente sobre el HTML, lo que  facilita el trabajo de redimensionar y posicionamiento de elementos por pantalla.

PerfectPixel permite editar el nivel de opacidad de la imagen de forma intuitiva, controlar la escala de la misma y añadir diferentes capas. Su interface permite mover la imagen por el monitor y también fijarla.

Otra de las características interesantes es que las capas se guardan en las sesiones del navegador. ¡No hay que volver a añadir una nueva capa después de recargar la página! Con PerfectPixel es posible obtener resultados muy precisos y de una forma muy rápida.  Realmente vale la pena experimentarlo.

Otras opciones

Como siempre, cada developer tiene sus trucos y a lo mejor una herramienta personalizada es la más adecuada para este trabajo de transformar el diseño en un site pixel perfect. Una alternativa por ejemplo es la de Samuel Claxon que ha decidido solucionar esta necesidad con un pequeño código de HTML  & CSS.

Fuentes:

• http://www.afxdesign.com/web-design-blog/web-development-tips-tricks/pixel-perfect-webpages-with-just-css/
• https://medium.com/cool-code-pal/3f10a496b515
• http://www.smashingmagazine.com/smashing-book-1/the-art-and-science-of-css-layouts/
• http://blog.microsecommerce.com/index.php/uncategorized/responsive-design-and-the-demise-of-pixel-perfect/