Everything Works in Photoshop

I think one of the hardest parts of Web development is to go from a finalized and approved Photoshop file to the Web browser. It doesn’t matter if you are talking about a small banner or a full new page design, things never look or feel exactly the same in the Browser as they do within a Photoshop file or a Photoshop produced comp.

Photoshop, as a graphics program, utilizes color profiles, fonts that may not be available in a Web browser, lighting and shadow effects that can’t be replicated using CSS and (the worst offender) Photoshop images can be resized so that everything appears very tight and all within view (no scrolling).

Web browsers on the other hand display everything slightly different, use different methods to produce colors, shadows and gradients, not to mention that each Browser type displays things at slightly different sizes. To complicate matters even further, each computer and monitor is different, sites can look very different at different screen resolutions (some users may have to scroll while others don’t).

Often I have seen clients get excited about a design in Photoshop only to be disappointed when they see the same design recreated within a Web browser. Complaining that they have to scroll, the text is not as ‘crisp’ or that things just seem different.

I had one client a few years back who measured the pixel spacing between objects in the Photoshop and then sent a scathing email recording all the places that objects in the browser appeared to be 3 to 7 pixels off from what was measured in the Photoshop file.

So What to Do about it

Web People

  • Educate clients to the fact that browsers are different mediums than graphic design programs
  • Use fonts that are available within the Web browser and let the client know up front if any font used will require one time or regular licensing fees.
  • Avoid fancy shadowing and gradients on primary elements (you know someone will open this up in IE8)
  • Explain things like side margins and how they will be displayed in variable widths depending on resolution.
  • Designers who are not developers should coordinate with a developer to ensure all elements can be easily recreated in the browser environment.

Web Clients

  • Ask questions about how the designer is accommodating different resolutions and different browsers.
  • Understand that Web development is about making the site operate in many different environments (desktop, mobile, PC, Mac, Internet Explorer, Chrome, Safari, Firefox etc) and that not all environments render design elements the same.
  • Don’t demand crazy fancy styling attributes but lean towards simplicity.
  • Be flexible – I don’t mean lower your standards.