One of the core concepts of JSF was the separation of the data-transfer and rendering components in the JSF Controllers. You can render JSF output for a wide range of media just by substituting an alternate renderer. That's one reason why I always counsel using as little raw HTML as possible when designing JSF Views. If you have raw HTML in a view and the renderer is rendering to PDF, the PDF will contain the HTML as text, since PDF doesn't use HTML tags for rendering.
That particular feature has been downplayed somewhat in JSF2. While rendering to PDF is rather unlikely, rendering to WAP was not back when JSF was new. Most mobile devices these days, however, use full HTML for their displays rather than WAP, so that particular option isn't as useful as it once was.
If you want a "universal" UI for all mobile devices using HTML without considering alternative rendering systems, the key is in using proper layout components and appropriate CSS skins. Needless to say, you should avoid using absolute pixel co-ordinates and dimensions, and limit use of sizes done in terms of how many characters you expect to fit on a row.
For best results, use a device (or resize your browser window) for the following dimensions and "proof" your UIs with them:
320x240 (see note)
768x1024 (typical 7-inch tablet, portrait mode)
8.5x11 inches (i.e. full-sized iPad and relatives)
320x240 is one you might not want to support, since it's a real challenge to design a screen for something that limited. It will almost certainly need to scroll gracefully, since almost nothing will fit on the screen entirely. Also you'd want to have more screens with less controls per screen over fewer screens with lots of controls. The main reason for even considering it is that it was the size for cellphone screens back in the days when a cellphone was smaller than a brick and display screens didn't pack the pixels as tightly. Likewise 640x480, despite the fact that the VGA aspect ration was the original starting point for webapps.
An IDE is no substitute for an Intelligent Developer.
Joined: Aug 19, 2010
Thank you for valuable suggestions.
If you want a "universal" UI for all mobile devices using HTML without considering alternative rendering systems, the key is in using proper layout components and appropriate CSS skins.
What I make from above statement is that I'll have to chose JSF view components (panelgrid,dropdowns,buttons etc) and provide proper styling to them using CSS, avoiding pixel coordinates. Am I right?