A pixel through a keyhole

A pixel is not a pixel, says Peter Paul Koch, web developer extraordinaire from The Netherlands. So, why is that? Read on, dear users!

One of the reasons I started studying Content strategy is that I had the feeling not knowing very much about the technical background of my profession. I had the feeling – and I have it even more so in 2018 – that as journalists, we should know how the web works. Telling great stories isn’t just about beautiful words anymore. I mean, it still is. But then it also about telling it in a multi channel way. Not just on printed paper. To be able to do that, we really, really, really have to know about the basics of web design.

So, let’s talk about on basic web thing – the pixel. For the record, in my brain I’m right now totally nerded out.


Getting back to the ernst of the topic: Web developer Peter Paul Koch explains in one of his talks that “a pixel is not a pixel”. Hence the name of the talk: “A Pixel is not a Pixel”. You can watch it here. The talk is already some years old – I mean, he talks about blackberry… – but the basics haven’t changed that much since. In my humble opinion anyway. Please note that I’m not an expert. So, if there are mistakes in understanding I made, please point them out to me!

Short explanation: pixel is not a pixel because of the differences between desktop and mobile. And because there are three different kind of pixels: So, a pixel is not a pixel because there are actually three kinds of pixels:

  1. CSS-Pixels
  2. Density-independent Pixles or dips
  3. Device-Pixels

A CSS-Pixel, Koch explains like that: “Basically, they are the ones we use in CSS declarations. If you say „width: 190 pixels“ you mean 190 CSS pixels. If you say „padding-left: 20 pixels,“ you mean 20 CSS pixels. […] And the trick of CSS pixels is that their size may be increased or decreased.”

Device pixels are “the physical, actual pixels on the device. A certain device has a certain amount of fixed, hardware pixels. You cannot change that in any way. […] So for instance, the old iPhone had 320 pixels, device pixels.” But there is a problem, because when Apple introduced the Retina screen, there were suddenly more pixles within the screen. There are more hardware device pixels on a Retina screen than on a normal screen. “The problem here is that, because the number of device pixels increases, it could start to break sites”, Koch points out.

To solve or work around said problem with Retina, Google and later on Apple created “a new pixel layer called density independent pixels, which is basically yet another abstract construct created for us web developers.” Dips live somewhere in between CSS pixels and device pixels.

From pixels to viewports

So, this is that. But why is that important. Because when a site is magically altered from a desktop to mobile, browsers need to know how to “alter” the pixels the right way, to show what is meant to be shown on the mobile device. And this is, where the viewports come in. On desktop basically, the view port is the browser window. If this concept would be applied the same way to mobile, “sites would be squeezed to death”.

To avoid this sudden death, for mobile the viewport is divided up into two:

  1. Layout viewport: this is used, to calculate the CSS-Stuff
  2. Visual viewport: this is, what the user sees. This is a keyhole to look at the desktop version of a website.

But in 2018, we are more and more looking at responsive sites concerning all sorts of mobile devices. And of course there is other, very important stuff like media queries or meta viewports that are needed to design really great responsive sites. But the pixel stuff still is the foundation of all of this.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:


Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s