Search code examples
stylesheetscreen-size

Element sizes in pixels, why..?


I'm a webdeveloper for like... 12 years now, with a lot of those being a hobby and the latest 5 being professional. But I still cannot get my head around the following problem, and this is probably a really stupid question, especially coming from me, but:

Why are we still using pixels for dimensions?

About two to three years ago, I saw the dawn of the new HiDPI screens, like the iPhone 4. I was really wondering how this would affect us in webdesign and webdevelopment. I work at a advertising agency and know more then the average webdever about print (as in, printing on paper or other physical stuff). When I was thinking about where we'd go next, I was thinking in the terms of prints; they do not depend on the pixels (or dots use the right terms) in size, which would be absolutely stupid. Because, if you send your document to the printer, you would need to know the DPI of that device before you start designing your document. That's why they use metrical (or emperial or whatever) sizes and then just deside on advance how high DPI they would eventually support. (300 DPI is a pretty standard max)

So, my answer to the question above (two years ago) was: We probably are going to use metrics or other non-pixel dependent measurement system for the devices. Because we'll have a lot of variety devices with a lot of different DPI. And that's almost the only way we can make sure the device will display the website as it should.

Now, two years later, we've been using some other solutions. Which still feel more like workarounds then true solutions to the large variety of screen setups.

Is my expectation wrong about the metrics system? Is there something I'm overlooking that would make this solution impossible? Is there a true logical solution out there already that I'm overlooking?


Solution

  • Pixels are a fixed format for screen and as you know, all viewable devices for web are through screen (monitors, tablets, phones etc). As you correctly say, DPI and PPI are very different things but as our screen is not concerned about dots then it works.

    However, it doesn't scale where as (for fonts for example) % and "em" do.

    To further explain the px and it's fixed size, here's a small quote from this W3.org page:

    To get an idea of the appearance of a px, imagine a CRT computer monitor from the 1990s: the smallest dot it can display measures about 1/100th of an inch (0.25mm) or a little more. The px unit got its name from those screen pixels.

    Nowadays there are devices that could in principle display smaller sharp dots (although you might need a magnifier to see them). But documents from the last century that used px in CSS still look the same, no matter what the device. Printers, especially, can display sharp lines with much smaller details than 1px, but even on printers, a 1px line looks very much the same as it would look on a computer monitor. Devices change, but the px always has the same visual appearance.

    Now, the point is it depends on what you want for the layout - we have %, px, pt, em (etc) and we can choose to use these tools (or not) for the task at hand. Many people would not use an approach which rescales depending on device (and we have auto detection for this) where as for others it's perfectly suited.

    The issue for me with anything which scales is it is very hard to scale relatively throughout the entire design... In a higher or lower resolution browser your text may appear on one line or need to wrap over multiple lines. If this is crucial then use pixels to fix it.

    This is also why so many websites are centered (including this one). It gives the illusion the entire screen is taken but it is not - there is white space down the left and right margins and it doesn't matter - content is clear and the designer has control.

    I can't count how many times my client requested scaling (against my advice) to then run into layout issues - as you can guess I am keen on this.

    However, what is cool is to use both together - have fixed pixel dimensions as a wrapper and inside use % or similar - this again provides the illusion of fluidity without loosing too much control.

    I don't think your question will get a direct answer as it's going to be very opinion based I'm afraid.