Authored by Primate

A rather awesome, informative
and witty blog about all things web

Goodbye pixel perfection

An image of bananas, half of it is pixellated

In the year 3000 this image would consist not of pixels, but of actual bananas.

Half a decade ago I took a huge step in my career: I departed from the world of print and plunged into the unpredictable depths of interactive design. Now, facing a new generation of devices and delivery methods, I once again have to challenge my mindset and embrace change as we’re heading towards (or perhaps, returning to) a pixel-less reality.

Designers who have themselves made the leap from print to web will know the process of coming to terms with the rules and limitations of the digital world: the shift from static to dynamic, from manual layouts to cascading style sheets, the move from InDesign to Photoshop and the mental shift from vector graphics to pixels – all interesting, to say the least. I remember how clunky Photoshop seemed to me having only been used to Illustrator and InDesign but also just how excited I was to approach graphics from a different perspective.


Physicists will scoff at this feeble comparison but in the early days working directly with pixels felt somewhat like handling the very atoms of my medium. And why wouldn’t it? Pixels were, in fact, the smallest tangible unit of my new universe, certainly the smallest I had the tools to manipulate. Consequently I came to believe that pixels were the unit by which to measure and achieve layout precision in web design, a belief I’ve only recently realised is bound for oblivion. We talk about pixel perfection but I predict we won’t do for very long.

I came to believe that pixels were the unit by which to measure and achieve layout precision in web design

Over the past weeks I’ve been writing an article about CSS baseline, highlighting some of the difficulties in achieving pixel perfect typographic alignment. During a rigorous review process, discussions were had about ems vs. pixels and by the time I’d finished the article my perspectives had changed: where I used to be firmly on the pixel side, I’m now leaning more towards ems. I still believe unitless values are imperfect – they’re meaningless without context and 10+ decimal numbers are never reassuring as far as accuracy is concerned – but with the increasing variety of ways in which online content is consumed it seems only natural to embrace the more scalable evil.

Yet ems and percentage based layouts are only the beginning. The way I see it, the gradual shift towards a pixel-less web is not only encouraged by variable viewports but also by the increasing power of our hardware. Whilst the mere prosperity of browsing devices has firmly brought responsive principles to the forefront of contemporary web design, the sheer notion of variable pixel density questions the value of pixel definitions altogether. When 100 pixels on a retina display can take up the same physical space as 50 pixels on a non-retina display it begs the question “how big is a pixel exactly?”. As long as the answer is “that depends” then the unit is useless as far as layout measurement is concerned.

At the current rate it won’t be long until most browsing devices – including desktop displays – compete with print in terms of pixel density. We won’t be able to tell individual pixels apart in photos published online any more than we can tell individual ink-dots apart in their printed counterparts. In such a world it would be much more useful to define size by a unit that correlates to the size things are actually being viewed at (millimetres, anyone?) and, because of the large file size required for high-resolution bitmaps, vector formats would in many cases be a more cost-effective way of displaying images.

Tellingly, we seem to be well on our way to that reality, with icon fonts and vectors replacing graphics traditional bitmaps in efforts to take advantage of the increasing resolution of device displays. And it probably won’t stop there. The way we work with photography is likely to change, from restrictive tags to flexible containers that allow us to scale, crop and manipulate their content. Such images will, of course, still be pixel-based at their core but their apparent size in the viewport  will not be defined by their pixel value but by the proportions and attributes of their containers. What’s more, the typography of tomorrow’s Internet will rival, if not supercede, the crispness and legibility of printed media – perhaps we’ll finally see the end of badly rendered fonts.

All things considered I’m enthusiastically anticipating a new era of digital design and the transition may be easier than I originally expected. One the one hand, the pixel-less web entails a radical break away from a print design mindset – our layouts undoubtedly need to be dynamic and scalable as opposed to static and fixed – but on the other it looks like we’re returning to the familiar concept of physical size vs. output resolution. Not a bad bargain.

Let’s just hope browser technology will keep up.

If you liked this article then why not subscribe to our RSS feed.

Author: Espen Brunborg

Espen can easily ruin conversations with questions about chimneys.

Tags

,

Comments

Showing 2 Comments

Leave a comment
  1. Matthieu L December 22, 2012 at 2:12 pm

    I had just read your article about CSS baseline, that got me thinking about whether or not I should find a way to reinject pixels in my RWD in order to lever the power of a grid layout with nice vertical align rythm, when I came onto this article through your blog’s home page.

    I’m very glad to see that you believe in the em/percentage based layout compatibility with the realisation of an eye/mind-friendly grid.
    In case you didn’t come across it yet, the ‘rem’ unit can go a long way when dealing with relative sizing.

    Thanks for writing such interesting articles. Keep up the good work!

    • Espen January 4, 2013 at 5:58 pm

      Thanks Matthieu, I appreciate the support! Moving away from pixels is definitely on our radar, and rems is one direction we’re looking at. Defining breakpoints using ems/rems is also a priority when it comes to our responsive thinking. In terms of grids we’re still experimenting but yet to find a ‘perfect’ solution.

Leave a Reply