Documentation versions (currently viewingVaadin 7)

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.

Mobile Features

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.


The mobile browsing field is currently evolving at a quick pace and the special conventions introduced by leading manufacturers may, in the next few years, stabilize as new web standards. The browser support in TouchKit originally concentrated on WebKit, which appears to be emerging as the leading mobile browser core. In addition to Apple’s products, also the default browser in Android uses WebKit as the layout engine. Yet they have differences, as the Android’s JavaScript engine, which is highly relevant for Vaadin, is the Google Chrome’s V8 engine. As of TouchKit 4, Internet Explorer on Windows Phone is also supported.

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.

Back Button

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.