cross platform html5 app, separate designs?

Question

I would now like to make an app that works on basically all html5 enabled devices. The last three have me stumped, as there is little info out there on apps for these devices.

They all have different screen resolutions, do they all need separate designs?

iPhone 3Gs/ iPhone 4
Motorola Droid
iPod Touch
iPad 2
Samsung Tab 7”
Motorola Xoom
Sony Tablet S

Answer 1

If you want them to fit all designs you can use percentages as widths and flex everything to the screen. Start by designing everything to fit your smallest screen resolution and expand based on that. By that I mean since the iphone is smaller resolution get all of the necssary content to fit on the iphone first. Then if you have other stuff you would like to show to ipad users or users with larger resolution you can uses css or your programming language to show a right side content panel or what ever you need to fit the extra space.

This is not necessary since if your left column is 40% and right column is 60% it will fill the same on an ipad but depending on your content you many not need this much space so you can fill up the space with other information only on the larger devices.

You can use JQuery to get the screen width and display different css files for each type and layout.

Good luck

Answer 2

You should consider the user impact of doing a single experience across all devices and form factors.

Phones are very tight on real estate so they generally have a drill in paradigm. Get a list, select, pop a view on the stack, pop-out back to the list etc... It's a navigation heavy flow dictated by the real estate.

Tablets have much larger real estate to work with so you should take advantage of that with pop-over views, multiple split panes etc...

The fact that it's HTML5 and not UIKit is irrelevant. Customers want a good experience and expect different experiences on the different form factors.

What I would recommend is to follow a model view controller even in the HTML5 app. Push as much logic as you can down into a common model set of javascript code and differ by the views only. Same as you would do in UIKit ...

If you create a common model and different views based on real estate size, at least you're only building 2 (tablet vs. phone) and not 2 * number of platforms.