WRT support for AJAX
The S60 Web Browser supports AJAX technology, but differences such as screen size and access speed can diminish the mobile end-user experience if these issues are not carefully considered when creating Web content. A lack of attention to mobile user requirements can render Web pages unusable. On the other hand, carefully targeting the capabilities of the S60 Browser should make information easier to find and user interaction much simpler, as well as result in a more engaging design.
AJAX is not a new technology; rather, it represents a different use of a number of existing technologies. There are two main parts to AJAX: visualization and data gathering.
Visualization
Given the limited screen area of a mobile device, all visual effects must appear within the mobile browser window.
Despite the small screen size, if used effectively, features like expandable menus (accordion list) can greatly improve navigation on a Web site. Additionally, if only top-level menu items are presented, page design can be enhanced and complex menu structures can be presented more easily. However, to use expandable menus effectively, research done by Google shows that animating the actions is critical for the mobile device user to understand what is happening. If the menu is expanded instantly (for example, when the text is longer then the display), then the next bars suddenly disappear (because they are below the display) and the mobile device user gets confused. To avoid this, the expansion of the menu should be animated smoothly, so that the mobile device user can see the bars move down and off the display.
Figure: Using AJAX to expand a menu
Data gathering
The use of XMLHttpRequest to
gather “raw” data instead of a full page can significantly reduce the amount
of data loaded, which can be more cost efficient for users (who may pay their
carrier based on the amount of data transferred) and, more importantly, can
reduce the time spent waiting for a page update.
Figure: Using XMLHttpRequest to gather “raw” data
Traditionally, difficulty using a mobile device's keypad to type in text has made user input to browser pages very slow. Sites created using AJAX offer the possibility to auto-fill input fields based on predictive text or previous user entries.
Mobile device considerations
There are challenges in ensuring that the mobile user gains from the technology offered by Ajax. However, there are certain technical or platform issues that may present difficulties. Many AJAX patterns are impossible to use without a touchscreen or support for certain mouse and key events (see x-ref to event support). For example:
Click/draft effect.
Drag-and-drop.
“Hover here” for pop-up details.
In the following example of an A9 map, the AJAX click/drag effect does work, but too slowly (much data transfer, processing power needed). Also, the mobile screen size may be too small for the map area or it may be squeezed.
Figure: AJAX click/drag effect
In the following example of a movie website, the “Hover here” for pop-up details is not readable. The pop-up is off-screen in mobile browser with no means to navigate to it. When the mobile device user scrolls right, the pop-up goes away.
Figure: AJAX pop-up effect