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