Considerations Regarding Mobile Browsing
When developing web applications that support mobile browsing, you need to consider various issues that are different from non-mobile use. TouchKit is designed to help with these issues.
Mobile Human Interface
Mobile devices use very different human interfaces than regular computers. For example, the screen can be rotated easily to switch between portrait and landscape views. This does not just change the dimensions of the display, but also affects how to arrange components for the best user experience. In addition to TouchKit, responsive layouts help in allowing flexible layouts, as described in Responsive Themes.
The user interface is used with a finger instead of a mouse, so there are no features such as "right-finger-button". When using a mouse you can click double-click or right-click, but on a touch device, you are using interactions such as tap and "long tap". Finger gestures also play a large role, such as using a vertical swipe gesture for scrolling instead of a scroll bar. Some browsers also allow using two- or multiple-finger gestures.
There is normally no physical keyboard, but an on-screen keyboard, which can change depending on the context. You also need to ensure that it does not hide the input field to which the user is trying to enter data when it pops up. This should be handled by the browser, but is among the issues that requires special testing.
Bandwidth and Performance
Mobile Internet connections are often significantly slower than with fixed lines. With a low-end mobile connection, such as 384 kbps, just loading the Vaadin client-side engine can take several seconds. This can be helped by compiling a widget set that includes only the widgets for the used components, as described in Building an Optimized Widget Set, by compiling the theme into the widget set, and so forth.
Even with mobile broadband, the latency can be significant factor, especially with highly interactive rich applications. The latency is usually almost unnoticeable in fixed lines, typically less than 100 ms, while mobile Edge connections typically have latency around 500 ms, and sometimes much higher during hiccups. You may need to limit the use of the immediate mode, text change events, and polling. The latency compensation in some components, such as NavigationManager, allows view change animations to occur while the server request to display the result is being made.
Further, the choice of components affects performance. TouchKit components are designed to be light-weight. Of the other Vaadin components, some are more light-weight than others. Especially, most other layout components have a more deeper DOM structure and are slower to render than the light-weight CssLayout. TouchKit also includes special styling for CssLayout.
Phones and tablets have many integrated features that are often available in the browser interface as well. Location-awareness is one of the most recent features. And of course, you can also make phone calls.
For the list of devices supported by the latest TouchKit version, see the TouchKit product page at the Vaadin site.
Vaadin TouchKit aims to follow the quickly evolving APIs of these major platforms, with the assumption that other browsers will follow their lead in standardization. Other platforms will be supported if they rise in popularity.
Some mobile devices, especially Android and Windows Phone devices, have a dedicated back button, while iOS devices in particular do not. TouchKit does not provide any particular support for the button, but as it is a regular browser back button, you can handle it with URI fragments, as described in Managing URI Fragments. For iOS, the browser back button is hidden if the user adds the application to the home screen, in which case you need to implement application-specific logic for the back-navigation.