Building Applications for WebOS, not the Pre

[kesne]

Hello fellow developers,

We all knew this day would come, developing for WebOS, not just the Palm Pre. All of us have been working with a 320x480 screen size and designing apps around this. Well now we have to face an unfortunate bump in the road named Pixi. The Palm Pixi sports a 320x400 screen, 80 pixels shy of the Pre's screen. What does this mean for us developers? It means we have to develop for two screen sizes.

While you personally may prefer different techniques to fit 480px of app in a 400px space, I'll outline my method here briefly, other developers can feel free to respond with their thoughts on the topic.

1. Scrolling: This is number one for a reason, it has the biggest impact. Enabling scrolling on a scene is as easy as adding

disableSceneScroller: false

while pushing/swapping a scene. Scrolling can solve almost all of the issues that you will run into while working with a smaller screen.

2. Small Images: We need to face the facts here, you can't have a button that is over 200px tall. While on the Palm Pre, 200 pixels is only a little over 1/3 of the screen, on the Pixi that is half of the screen.

3. Short Headers: Many apps suffer from bloated headers, 100-150 pixels tall. Keep headers short and to-the-point. Palm provides some very nice (small) headers inCSS elements, take a look at developer.palm.com, they have a list of all of them.

4. Focus on the content: Your app should be very direct, there shouldn't be too much 'fluff' while browsing through it. Simply elimination fluff could reduce 20 pixels or more.

5. Keep content readable: Don't sacrifice font size, keep everything at a readable level. Fonts should be clear, crisp, and easy to read without the aid of a magnifying glass.

6. Adjust dynamically: This is something that I highly recommend. Lets say you have an image that is 60x60 pixels. It is on the middle-bottom on the Palm Pre, but on the Pixi, it may appear chopped off at the bottom. You could fix this by changing the image size, BUT, you can also change it dynamically. You can use javascript to get the screen size, then if the user is on a Pixi, adjust the image size accordingly

So there you go, six techniques for saving you apps space, hope you enjoy.

[webfellow]

This is great, thanks. Anybody else have more tips to add? I think it is a smart idea to have some best practices for developing in WebOS that are readily available.

[kesne]

Originally Posted by webfellow

This is great, thanks. Anybody else have more tips to add? I think it is a smart idea to have some best practices for developing in WebOS that are readily available.

Thank you, I tried to cover most of it, but I'm sure there are many other things that developers can do.

[mt3ck]

Here is some more info, does not apply directly to the palm pre but same concept.

Good info so far kesne!

Effective Design for Multiple Screen Sizes | mobiForge