Motive [Home].Glossary.

Guides

The Motive Web Design Glossary

PICture ELement (pixel)

A pixel is the smallest unit of display used on a screen.

For example, a 14-inch monitor typically set to a screen display of 640 pixels wide and 480 pixels high.

Digital images are made up of a grid of individually-coloured pixels.

‘Pixel perfect’ layout

‘What did you call me?’

Digital veterans often reference the humble pixel when describing their work, or the skills of a fellow–designer. Pixel-based titles may denote excellence: ‘pixel surgeon’; the digital equivalent of manual labour: ‘pixel pusher’; or recklessness: ‘pixel jockey’.

A ‘pixel-perfect’ layout is where a webpage design that was originally created in a graphics program (such as Photoshop), is recreated as a webpage using HTML and CSS – and where this recreation is accurate to the pixel.

Achieving a pixel perfect layout is made more difficult by variations in the way that different web browsers understand the HTML and CSS specifications, and the number of ways a person can choose to view the web.

For example, HTML-text may display (render) at a different size than that intended by the page designer; or a person may change the webpage text size to make content easier to read.

The only way to consistently achieve pixel-perfect layout, across all web browsers, is to work with pixels; either by creating images of content, or specifying all units in pixels. Neither of these methods is recommended:

Related terms: above-the-fold, anti-aliasing, compression, degrade gracefully, dithering, dots-per-inch, GIF, JPEG, HTML-text, web-safe color.

 

Motive Web Design Glossary Trivia