SVG and Canvas should not care about pixels, because they work in vectors. The lines are blurry by design. …
When will pixels become obsolete?
No matter how many EM’s or percentages we use in our design, we are still locked down with pixels for images and screen sizes. For how much longer?
It used to be so easy. Every screen was 72DPI, so you were quite certain in how large or small something would display on a monitor. Nowadays, websites are viewed on all sorts of devices with all sorts of DPI. Most screens have 72 or 92DPI, some have 120DPI. An iPhone has 160DPI and regular cellphones have around 100 to 200DPI
That means that your 400px wide image will look very different on a range of monitors, and that the pixel will become less and less the “solid” measure most Front end developers regard them as. This isn’t new, Roger Johansson blogged about it two years ago.
One thing the article mentions is that a CSS pixel is not always equal to a device pixel (otherwise zooming would be impossible, for instance). Unfortunately, as you can read in the same article, this doesn’t mean you can go merrily about your ways, because it will still look different on a screen with higher or lower DPI.
I think that in the future, pixel based designs will not be a viable option for web design any more. Technologies such as SVG and CANVAS, coupled with relative sizing (relative to the base size of browsers), or even the CSS gradients, repetition and stretching background options CSS3 and the Webkit team bring us, will be used in favour of jpg’s, gif’s and png’s. For most website designs, SVG etc. would be easier to use and maintain than pixel based formats. But alas, not all browsers support it yet.
However, this doesn’t completely solve the problem, because there are plenty of photographs used in web design. What about those? The current idea is to give higher resolution images to screens with a higher DPI and lower resolution images to screens with lower DPI. I am uncertain if this will work, as it essentially doubles the work of a web designer.
Well, will they become obsolete?
I certainly hope so! It might not be in the next couple of years, but in a decade or so, I think web developers won’t be thinking in pixels any more.
Something I recently ran into for a project were the CSS Media types. We all know about <link media="print" />, but that’s only scratching the surface. I didn’t find a nice, all-encompassing article about them either, so I decided to make one myself: The CSS media types, and what you can do with them. What are…
This spec allows you to define your own selector as an alias for a list of other selectors …