iPhone, iPad resolutions

Now that iPhone 4 is on the block as well, let's see how things fit in the screen ratio and resolution ecosystem of Apple. This is a continuation of the previous post I wrote on iFrame.

- iPhone (1st gen, 3G and 3GS): 480x320 ("a half" of iFrame, in width), approx 3.5 inches screen, 160 dpi
- iPhone 4: 960x640 (same as iFrame, in width), 3.5 inches screen, 326 dpi
- iFrame 960x540
- iPad (1st gen): 1024x768, 9.7 inches screen, 132 dpi.
- iMac (21.5 inch) 1920x1080 ("twice" iFrame, both in width and height), 100 dpi
- iMac (27 inch) 2560x1440 ("2.6 times" iFrame, both in width and height), 100+ dpi

iPhone 4 "doubles" the amount of pixels in both directions, resulting in total 4 times more pixels.
In a potential future "retina" iPad this kind of "doubling" would mean 2048x1536, i.e. about 260+ dpi. This is however well under "retina" requirement of 300+ dpi.

The minimum width would have to be around 2.3 times the original iPad width: 2330px. As this is well beyond Full HD resolution (1920x1080), the nearest "match" in the widths is the 27 inch iMac.

So, is Apple really going to the insanely high land also with iPad (2.5 times the original iPad resolution)?
- Retina iPad: 2560x1920, 9.7 inches screen, 330dpi?

At the very least it would be an unlikely bridge between the mobile and desktop pixels. It will be interesting how far Apple really wants to push the total amount of pixels in the "luggable screen size" of an iPad.


Update: Later blogosphere discussion correctly pointed out that "retina" effect is not simply a matter of "300 dpi". It's highly dependent also on the viewing distance. And between iPhone, iPad, laptops and desktop computers, the viewing distance varies greatly.

So what could the next retina displays be like? Tim Ricchuiti has made pretty well-informed guess (quoted below):

The senior years of Flash

I'm pretty sure about this. The Flash (on mobile) is dead. It can take a year, or it can take 5 years. But it's dead in terms of being a major application development platform. Native mobile apps and HTML5 (on mobile web) will take over. On the otherhand, for prototyping on mobile (and elsewhere) Flash will be still very useful.

The final nail in the coffin was unrelently hammered in by these Thoughts on Flash from Steve.

In the desktop land, the user experience on different platforms is not so critically tied to "single app in full screen" and generally the platforms use very similar conventions, i.e. mouse, keyboard, app windows, icons (WIMP).

In the mobile land, the user experience is more varied, and a point of differentiation for the platforms and vendors (e.g. HTC Sense UX on top of Android UX).

As Adobe CEO puts it, the point of Flash is "code once, run everywhere", i.e. developers not having to target particularities of platforms. And this is the exactly wrong direction to go, if the user experience on mobile has high priority. The features that are "NOT common" across mobile platforms are the ones that make the mobile apps better than the average competitor.

So, to me this is one of the defining moments.

The same way the first iMac did away with Floppy drive (used CD instead) and legacy keyboard/mouse ports (used only USB instead). It takes a lot of guts and courage to cut the cords to the past and to legacy compatibility.

...


Things to watch in the future.

The death of discs
There's no BluRay in sight for Apple laptops. Maybe there will not ever be one, in terms of something that is permanently part of the laptop. There are already USB connected external drives available. Expect MacBook Air -like laptops taking over in the future. Movies can be bought, rented and streamed over the net. Software can be installed over the net (nowadays even Adobe Creative Suite!) or via another computer.

DRM-free movies / TV?
Not sure on this one, but Steve was pretty certain music needs to be DRM free. Could it be the same for moving pictures? Or is it entirely different business model?

Apple iFrame

Everybody and their mother is writing about Apple's panel. I think Gruber's thoughts and his links to other places on the topic are most relevant reading.

While some others are much more populistic and techy-minded, there's one good thought intermixed in the wishful thinking – the screen resolution.

Apple already has existing and in-use own video format called iFrame, which could easily be the name of the device as well...

What's interesting about that format is how neatly it fits in the different Apple screens:
- iPhone 320x480 ("a half" of iFrame, in width), approx 3.5 inches screen, 160 dpi
- iFrame 960x540
- iMac (smaller) 1920x1080 ("twice" iFrame, both in width and height), 21.5-inch screen, 100 dpi

At 10 inch physical screen size, the "native" iFrame would calculate to approx 110 dpi screen with 960x540, which would be much more "widescreen" form than iPhone is.

With iPhone form, the numbers could end up as: 960x640, ending up as approx 115 dpi for a 10 inch screen. Which does feel sensible, unless it's not high-enough-DPI for Apple as a touchscreen.

High-DPI version would be 1920x1080, which would be approx 220dpi for a 10 inch screen. Quite likely enough for Apple, even if Nokia N900 does 265dpi (800x480 at approx 3.5inches) :)

iFrame resolution, or some multiple of that resolution seems like quite likely to end up playing a significant role, in at least one of the dimensions of the Apple panel (...or Apple tablet :).

...

Update: It's 9.7 inches,1024x768 pixels at 132 dpi. Oh well, there goes the iFrame theory out of the window...

...

Update 2: Another view on the 4:3 resolution.

Update 3: Pro 4:3 arguments: It's not super-optimized for video watching, instead it's books, web, iWork. Plus, at 9.7 inches, it's physically much more comfortable to use when the device has 4:3 dimensions (landscape and portrait).

At Barcelona - UX meets Code

Let's see what all we can accomplish here. Blogging with MaStory :)

Maemo 5 GUI Design Template (GUI PSD)

The Maemo 5 documentation now includes also the GUI Design Template, which allows one to create high-fidelity image mockups.

Currently the GUI Design template is available in Photoshop format that has a fairly comprehensive library of assets – all fully editable.

As is usual with these things, this is not something you'd use e.g. for wireframes or as a replacement for pen an paper. This is more useful for situations where pixel perfectness is needed.