Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
When designing a UI for a mobile web application (non native) that is expected to run on iPhone, Android and possibly more platforms, what should be the baseline?
Would you design it based on iPhone standards? Android Standards? Or just select your own look and feel ?
How for example would you display a system message popup?
It's a web app. You don't pretend it's not. The general standards apply to most all touch devices (touch areas, relative screen sizes, etc.) but don't try and use actual native UI elements from either device as that's somewhat deceiving (it's not a native app) or just confusing (the UI isn't that of the device you are on).
As for a system message popup, you can't show that from the browser. So you have to build your own. You can leverage the browser's native JS alert and confirm pop-ups, or you can build your own modal window implementation using JavaScript.
When creating a non native app then you need to be very careful about including elements from another OS into the one that you've released on. For instance, if you're releasing on Android and iOS then don't incorporate elements from either.If Apple see an Android look-a-like app they won't approve it and if Google find and iOS look-a-like then you'll probably get asked to redesign it. You can however include elements that are common to both such as the slide out side menu if you do it with JQuery and/or CSS. You can however build two (or more) CSS files which will change the look of the app dependant on whichever device the app is on. You should also take into account that both OS's do things differently from each other and all other mobile OS's. Therefore creating all of your apps functions in JQuery or CSS is probably the best option.
As DA01 says it's not native so don't try to pretend it is. Users can find that somewhat confusing as it won't be able to do everything that a native app can, it'll probably be slower and it'll act differently to a native app. If they think it's a native app and it doesn't act or look as it should they'll probably one star your app on the market.
The big factors you need to consider are screen size, and the fact that you're on a touch screen. (retina/ultra HD image optimization's important as well, but only to the aesthetic, it's not essential to interaction).
Android and iPhone's standards are great for advice in terms of usability with small touch screens. Things like minimum icon sizes are things that should be taken seriously.
However, you don't want to imitate the graphic elements of the operating system, because as DA01 mentions, that's deceptive. It can confuse the user as to where they are (they should remember that they're just hanging out in their browser) and how much access your site has over their device.
Touch screen, screen size, and of course, how people hold and use the device, are the big factors you need to concern yourself with while developing a mobile interface. No need to emulate the graphic style of one brand or another.
