Controlling Size(screen) on Mobile Device

[Doug]

Good Afternoon All,

What is the best way to control the size of a page on a mobile
browser? For example, on the sample 'greeting' app that is created
when you create a new project is about 1/3 of the page with when
viewed in a normal browser. If you view it on a mobile device it
takes up about 1/3 of the mobile browsers screen and is soooo small it
is unusable. I know there is a way to make it bigger, but I am not
sure what it is. Can anyone point me in the right direction?

Thanks,
Doug

[Uemit]

Well, the whole resolution independent web development is really cumbersome especially with GWT like web-application UI. 

Static web-sites either stick to the static (i.e. 960 grid system) or fluid/liquid (floating) UI design. 

With the static design the content size is always the same no matter of the resolution you are viewing the web-page. This is done because there is an optimal text length. If you expand text-content to the complete size of the display it becomes really hard to read with high resolution displays. So static web-pages tend to stick the fixed sized layouts. However there is also a move to liquid/fluid layouts where you resize the layout based on the viewport. 

Check out this articles for more information: 

http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

http://www.maxdesign.com.au/articles/liquid/

These two concepts work well in the desktop context where you can expect screen resolutions > 1024px.

However in the mobile context you have to expect lower screen sizes. 

So there are two solutions to that:

You can either use liquid/fluid design. However this doesn't always work well because the sections in of your web-app will be to small and the user has to zoom in and out constantly. 

For example on a tablet it might be viable to have a navigation panel on the left side and a content panel on the right (DockLayoutPanel). However on a mobile phone it might be better to just have the navigation panel  and on clicking an item the content panel is displayed. 

The second solution is to use different View implementations based on the UserAgent (device). 

There was a talk on the last Google IO conference on that and a sample project on how to implement it. 

http://www.google.com/events/io/2011/sessions/using-gwt-and-eclipse-to-build-great-mobile-web-apps.html

http://code.google.com/p/google-web-toolkit/source/browse/#svn%2Ftrunk%2Fsamples%2Fmobilewebapp

Developing a GWT web-app which works on all desktop resolutions as well as on mobile devices are real challenger. Actually it is difficult enough to achieve this if you only want to optimize for different desktop resolutions, especially if you use

Charts which require explicit sizes. 

The MVP pattern can help to have different view implementations and still avoid redundant code.