by Tim Van Damme

Follow me on Twitter

What does 320dpi mean to designers?

So the next iPhone (which I’m betting will be called iPhone HD) will almost definitely1 have a screen with a resolution of 640 by 960 pixels, at 320 dots per inch. This is double of what the iPhone 3GS has today (163dpi), and two and a half times the pixel density of the iPad (132dpi), giving you a total playground of 614,400 pixels. Hubba hubba!

At 320dpi, you need more than a decent pair of eyes to see the pixels with your bare eyes. How will this effect the way we design for the iPhone? I’m sure it’ll bring up some interesting issues.

Backward compatibility

You can’t expect everyone to update their original iPhone, 3G or 3GS to an HD. This means that every interface you’ll design from now on needs to have 2 resolutions. I think it’ll be a lot like designing icons in different sizes, you can’t just downsize the largest version to fit the smaller ones, that would leave you with a blurry interface no client would ever pay for. Will “low res iPhones” become the new Internet Explorer 6 nobody wants to build products for?

The opposite won’t be a big issue, iPhone apps currently in the App Store will be upscaled by a factor of 2. On the iPad, the scaling looks wonky because it’s such a big screen, but on the new iPhone the screen size remains the same, and in theory it will render the old apps like we see them today.

We’re gonna need a bigger screen

My MacBook Pro’s screen has a resolution of 1440 by 900 pixels. This means that I won’t be able to view the entire design in portrait mode when I’m working on my laptop (I already have this problem with iPad interfaces, and it’s really annoying). I could poney up for a nice Apple Cinema Display which has 1920 by 1200 pixels, but then there’s still another problem: The entire interface looks huge when you’re designing it, making it hard “feeling” how it would interact without constantly syncing your work to an iPhone.

1 pixel details

When we want to make parts of an interface pop out a bit more, we can do so by adding some 1 pixel details to them. It looks just right. So what if we have double the amount of pixels available? Would crisp 1 pixel details still be visible? Do we need to start using 1.5 or 2 pixel details? I know I’m nitpicking here, but iPhone interface design is all about the smallest details.

I’m sure Apple’s default apps shipping with the HD will give us good examples of how to handle this high resolution.

If you design iPhone interfaces on a regular base, you should start experimenting with this new screen estate today. This will give you a head start for when the iPhone HD’s start shipping, and everyone shows off their high-res interfaces.

Meanwhile, you might want to start reading up on using density-independent pixels2 instead of a completely rasterized layout.

  • Nik Fletcher also wrote about what these mean for people who create iPhone apps. Good read.

1 According to Mac Rumors, originally predicted by John Gruber 2 months ago.

2 More information about density-independent pixels (dip) is available the Android developer guide (hat tip Sebastiaan de With).