May 14, 2009

Being Pixel Perfect - Part 4 (How to make it pixel perfect?)

Lets discuss "How should we make it pixel perfect?" and "Who should make it pixel perfect?" in this post.

Here's the flow I think of...
  1. The designer on the project creates the UI spec.

  2. The UI developer takes the UI spec and creates HTML rendition of the UI spec.

    - The HTML produced is the result of negotiations and agreements between the designer and the UI developer. Everything may not be possible and sometimes UI developer will have to modify the designs to be able to actually make it work in a web page. But the designer should always be aware of the changes the UI developer plans to make, and they should discuss to see what are the possibilities.

    - He/she can use free tools like Firebug (Firefox plugins) to edit/debug CSS/HTML live in the web page and compare their work to the UI spec using Pixel Perfect compare their to validate it

  3. The development team then takes the HTML code and builds the application using it. They don't have to worry about being pixel perfect as long as they don't change any "style" elements/code

So, it is the UI developer's responsibility to make the page components pixel perfect. With this process being pixel perfect can become much simpler.


  1. Prasoon,
    Thanks a lot of introducing me to Pixel Perfect. Its a great tool to compare UI and can be of great use to compare other stuff like a graph/chart output as well. Automating graph/chart comparison can save tons of times on projects where this needs to be done manually.

    However, i think we may be able to avoid the situations which cause us to use this tool for comparing web application UI. What if:

    1) UI designers take ownership of all UI components (templates, js files, css files, images, etc.,)

    2)There is a "data bucket" defined between the UI layer and the backend. UI designers would expect the data to be present in this bucket and render the UI appropriately.

    3)Programmers would ensure to fill in the "data buckets" at runtime. On mockup, UI designers would use static snapshot of data.

    If we do this then i think we may be able to move towards building RIA applications more quickly and easily than if we were to keep passing UI templates back and forth between the UI designer and developer.

    One constraint that i foresee is the availability of UI designers and their billing rate(as compared to UI developers!). Solution to that could be to have the UI designers hand over the same components (not a copy) to the UI developer who can then make small changes and take the designers help if required. Still using the same infrastructure/components all the time.

    This would also ensure a clean seperation of UI and programming/business logic. You would also get a greater compliance in terms of applying UI best practices.

    Sorry for the long comment. Would be interested to find out your thoughts on this.


  2. Amar,
    I agree with you. App developers should get pixel perfect UI code from the UI team* and fill in the "data buckets".

    * UI designer (UI spec) & UI developer (UI code). Our UI designers (Kelly/Carlos) have paired-up with our UI developers (Allan/Nazomi/ to form this team.

    Although the team collectively owns the code, the UI team should be responsible for giving app developers pixel perfect UI code.

    Often in our teams, the task of developing UI code ends up with app developers who don't have HTML/CSS skills... We need to address this to be pixel perfect.

    - prasoon

  3. Prasoon,
    Thanks for your response. One additional suggestion from my side would be to have the UI code environment aware, if possible.

    This way, we wouldn't need to change the UI "code" that is developed to fit DEV, TEST and PROD env's.


  4. Or maybe the environment could be a "data bucket" by itself. :)