Pixel-Perfect, Fast Development by Designing to Scale

If a PhotoShop design of a web page is not callibrated to 96 PPI, then the client may view the design in a viewer that displays it at a different scale. They would then not know the designer’s intended scale. In that scenario, the designer, the client, and the developer may all have a different understanding of how big or how small the page should be.

To make a web design that is built to scale, it has to be callibrated to 96 PPI. That just means that the design, if saved as JPG and viewed in a browser at 100% browser zoom, looks as desired. If the client likes the way the design looks in a browser at 100% zoom then the design is calibrated to 96 PPI.

Designers can ignore the PPI setting that image editing software lets you specify for design files. That file property might be used if you were to print an image, but it is not used by browsers and it is not relevant here.

Web pages commonly use pixel measurements in the code. By building design files to scale, a number of benefits are derived:

  • Front-end development will be simplified and sped up.
  • It will be possible to exactly nail the replication as a live page.
  • The scale of the page will be as expected.

Screens vary greatly in physical pixel density. Some screens are 72 pixels per inch, some are 534 pixels per inch. Why do things not appear 8 times smaller on some screens? The virtual pixel. That’s where the 96 PPI comes from.

Browsers use a virtual pixel density, which they superimpose over the physical pixels of the screen. The virtual pixel is a pixel at 96 pixels per inch. A 96-pixel-wide image viewed in a browser will be 1 inch wide, regardless of the screen’s physical pixel density.

Using design files calibrated to 96 PPI simplifies development because programmers will not need to judge proportionality and scale. CSS widths, heights, margins, paddings, etc. can all be quickly and easily taken from the design file. 100 pixels width in the design file means 100px width in the CSS. Font size can be taken from the design file also, because the “pt” unit of measurement is equal to height in pixels, at 96 PPI.

The coded page can look like a perfect copy of the original design, if the developers know they can take measurements directly from the design. There won’t be discrepancies in spacing or size caused by getting measurements from trial and error.

Raster images can be taken directly from a design file that is built to scale and they will be proportional. If, however, the design was meant for 72 PPI then this would not be the case, and raster image elements of the page would either be stretched at the intended proportionality, would appear too small, or a separate, higher-resolution graphic asset would be needed.

This easy trick provides clarity to the client, makes development easier, and allows for perfect replication of a design.

Get a FREE eCommerce Business Assessment – learn how you can manage orders, product data, customer information, and accounting processes in one seamless system.

 

April 17, 2019

All Articles