Some people love Apple, some people are indifferent but one thing that’s become difficult to deny is that they have produced some revolutionary products that have changed the face of many industries. They’ve kept Microsoft and many PC manufacturers on their toes with computers and operating systems, the iPod – which received a cold reception from some quarters when it was launched – blew the portable music player industry apart, but surely it’s the iPhone that has changed the way people perceive electronics the most. It has not only changed how phones look and work but also peoples’ perception and expectation of how operating systems can be.
So another year, another iPhone. And this one has not been without its controversies! But I’d like to focus in on one feature which I think is a hugely important step in consumer electronics: the screen, and in particular the pixel density.
What is pixel density and PPI?
So firstly what is the pixel density, how is it measured and why is it important? The pixel density is the number of pixels in a given area of a screen. You can measure the pixel density in a number of ways but a common if arcane one for the moment is PPI, which is the number of pixels per linear inch on a screen and it is very similar to DPI: the dots per linear inch printed on a piece of paper. The screen on your computer is probably about 100 PPI and therefore it is probably pretty easy for you to see an individual pixel. This means that if you try to make text with just black and white pixels it comes out looking noticeably blocky like this:
To get over this blocky look programmers use a range of techniques, the simplest is called anti-aliasing, which is the method Flash uses. This involves sampling the text at a sub-pixel scale and then using mid tones to represent pixels which are partly full, which looks like this:
The method you’ll probably be most familiar with for making text as sharp as possible uses the fact that each pixel on a computer screen is made up of a red dot, a blue dot and a green dot, and it displays text in multi colours so that it uses these sub pixels.
But what PPI would you need so that you wouldn’t need to do all this clever stuff with aliasing? How small would a pixel have to be so that your eye no longer has the optical resolution to resolve a single pixel? Well the answer is the same for screens as it is for print: 300 DPI. And what is the pixel density of the iPhone 4 screen? 326 PPI.
The iPhone 4 screen
I think the screen looks stunning, it’s amazing how detailed the icons are and it’s slightly perplexing that you can’t see the pixels no matter how close you get. To give you an idea of how many pixels this screen has check it out pixel for pixel on your own monitor:
This allows Apple to produce a reading experience that is much closer to and may become preferable to reading on paper, and I think it is a vision of the future.
Now before everyone says it, I know this isn’t the first device with a high pixel density screen, but it’s probably the first one that most people will see and although Apple may not be the first to bring these features to market, they produce the device that changes the market.
The future of computing and websites?
I think it is inevitable that there will begin to be demand for these high pixel density screens on desktop, laptop and netbook computers in the coming years, but it poses two huge problems: a hardware problem and a software problem.
The harware problem is a simple one, for a 22 inch screen you would need a resolution of about 5550 x 3450 pixels, which is going to be difficult to manufacture and expensive to buy.
The software problem is a little more fundamental. Historically when screen resolutions have increased so have the physical size of the screens, which has kept the PPI approximately the same. So this gave you more screen real estate but kept the physical size of – let’s say – the start bar the same. You can see how little change there has been in pixel density by looking at this screen shot of Windows 95 from 15 years ago!
This stability of pixel density has allowed developers to use the number of pixels as a stable measurement that corresponds to a physical size on the screen. This basically means if you went to the Igloo site on one of these imaginary screens the Igloo site would measure just 10cm across, which is clearly not how it was intended… Even things like the text size are not defined in terms of their final size like they are on paper, but on their height in pixels.
So what does this mean for the future of the web? Well obviously it doesn’t spell it’s demise! Old websites could just be scaled to be three times bigger (or nine times the area!) and they would still be blocky but they would be the physical size they were intended; the text could then be rendered at a higher quality but a similar physical size. That is the approach that Apple took when viewing legacy iPhone apps on an iPhone 4. But what about new websites? Will browsers have a feature that scales new websites down for older computers? Or will developers have to produce two versions until the user group using these old fashioned screens is small enough to ignore? That will depend on the operating systems and the browsers and ultimately only time will tell.
I would like to see a step change in the way that websites and indeed operating systems work, whereby image and text sizes are measured in mm and points instead of pixels, and will have a “DPI”. Each element would then be rendered for each person’s screen. This would be a major step in freeing up hardware manufacturers to produce high pixel density screens and ultimately would be a great step towards the paperless office.
Perhaps the change will be so complex to make that by the time the technology is ready the world wide web of hyper-linked web pages would have been superseded by the next generation of internet pages/programs.
For me though the change to high pixel density screens (or HPD screens to coin a term) can’t come soon enough.
