How Yelp Made Sure Their App Works on Palm® Pixi™

By JR Heard, Yelp lead webOS developer, and Eric Singley, Yelp product manager

In the Yelp developer profile, Developing an app in three weeks and supporting multiple screen sizes" that’s part of the webOSdev "Getting Their Mojo Working" series, Yelp's JR Heard and Eric Singley described their approach to making sure the webOS Yelp application works on the smaller Pixi screen. As JR put it, "It was actually phenomenally easy because webOS allows us to check the number of usable rows. During development we were told that it was eight for the Pre and it would smaller for the new device. For the Pixi, we just added an extra CSS class to the body of that particular scene and wrote an extra CSS rule. It was maybe five or six lines of code and everything else just worked."

Here's their description of the code they used so their app could make the necessary adjustment to the smaller screen. You can read Palm’s guidance on how to build apps that run on both Pixi and Pre in the webOSdev blog entry, "Are your webOS applications Pixi ready?"

The only time we had to do something special for the Pixi was displaying search errors. The error message was getting cut off on the shorter Pixi screen. Everyplace else, our app just worked.

Here's the HTML for the error message:

The large-icon div is a standard webOS error view which defaults to an 80px margin all the way around.

With JavaScript we check to see if the number of rows is less than 8. If so, we add a short class to the error div, as follows:

if(Mojo.Environment.DeviceInfo.touchableRows < 8)
{
$('failed-search').addClassName("short");
}

Then we use CSS to set the top margin for the short class to 20px to make sure that the error message isn't cut off the bottom of the screen on a shorter display, like this:

.palm-fullscreen-error.short .large-icon.error
{
margin-top: 20px;
}

And that's really about it!