How to go about serving the same app on different resolutions/screens

Question

Scenario: You need to expose the same app on different screens - let's say a standard 15''-17'' a portable 10'' and a mobile 4'', possibly working on different resolutions.

Question: Do you attempt to go for a liquid layout that gets rearranged depending on the real estate available or do you roll N (one for each range) separate UI layers, optimized for each specific supported resolution/screen-size.

What's the industry standard on this kind of problems?

Does it make sense to come up with very trick layouts partitioning the screen in priority areas that will go away /come back when the screen gets resized one way or the other?

We all know iPhone apps (or any other palm device) can't be nothing like the desktop version, so I am assuming in that case (4'' or less) you're forced to roll different UIs, but is there a middle ground (let's say between 13'' - 7'' screens, with the latter requiring fingers as primary input) where it makes sense to go for the liquid layout?

Answer 1

Mobile Apps (for cell phones and other portable devices) usually get a hand rolled mobile UI.

The 10" - 13" case you're talking about is more in the netbook range. In this case, the device UI is similar (in most cases) to a regular desktop UI so I would go with a liquid layout and use the same UI.

EDIT

See the comments for clarification on requirements...

But considering the smaller interface is going to be a touch interface, and the larger interface will not...I'd suggest rolling different UIs for each. The UX for the touch version will be much better if special considerations are made regarding touch based concerns.

Answer 2

You seem to have already decided that a seperate UI is needed for mobile devices and I support this. The way the user interacts with these devices is so different that you need to think of them in a specific way.

For other screen sizes I think they need to be approached from a users perspective. If the user interacts with the screens in different ways then you need seperate interfaces. However in my experience users tend to look at screens from about 10" upwards as simply bigger or smaller versions of the same thing, and so you should treat your UI in the same way. Don't change it dramatically for smaller screens. Instead you need to find a way for it to grow or shrink in such a way that the user feels that they have more space to work in. with the same old UI.

Text editors are a prime example of this. The document window grows bigger, there is more space for documents to be edited in, but the actual interface stays pretty static.

Answer 3

We are just starting a project where we have a very similar problem.

In our case the app will work slightly differently on the different screens, more stages and fewer options on the smaller screens for example.

What we plan to do is to use the ASP.Net MVC framework, and implement a view for each screen resolution / sub app. We will try to keep the rest of the app common to all screen resolutions.

Answer 4

In the context of web applications, Jakob Nielsen suggests (basing his assessment on recent usability tests, read linked article for details) to design a dedicated UI for mobile devices. I think that even if your application is not web-based some of his guidelines are useful anyway.

He has guidelines for desktop resolutions also.