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?
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.