NetFront™ Browser for ACCESS Linux Platform™ adds full-featured, proxyless web browsing to ACCESS Linux Platform.
This document will help you create web content that is ideally suited for viewing on mobile devices.
This chapter includes the following topics:
- "A Look at the Architecture"
- "Detecting Web Browser Access"
- "Designing for the Mobile Browsing Experience"
A Look at the Architecture
NetFront Browser for ACCESS Linux Platform works very much like a desktop computer's web browser: it does not use a proxy server (unless the user chooses one) and it transmits HTML and other formats directly to a ACCESS Linux Platform device, as shown in Figure 0.1.
Figure 0.1 Web Browser Transaction Path
NetFront Browser handles the following content types: HTML, MHTML, WML, GIF, JPEG, PNG, WBMP, BMP, and MNG. When you first run NetFront Browser, you can choose for which of these types it should be set as the default viewer.
Detecting Web Browser Access
Because mobile devices typically have smaller screen sizes and other physical characteristics that make them different from desktop computers, you will probably want to design pages specifically for viewing on a handheld device. Your web server can detect NetFront Browser access requests by "sniffing" for the browser's user-agent string. A simple server-side script can detect the access and display pages that work with the handheld device's configuration.
When the NetFront Browser application sends a request to the HTTP server, the following default string is included in the user-agent section of the request header:
Mozilla/4.0 (compatible; MSIE 6.0; Windows 95; ACCESS Linux Platform) NetFront
Once your script has detected a NetFront Browser access request, that script can redirect the user to a set of pages specifically designed for viewing on a mobile device, or perform other processing.
Designing for the Mobile Browsing Experience
While the browser on a mobile device will properly render current web sites, these web sites are generally not well suited for viewing on a small screen. Some will render poorly when confined to a small viewing area, and others will require the user to scroll around the page to see all of it. A site that is designed with mobile devices in mind can accommodate the inherent limitations of screen size, speed, bandwidth, and processing power and make your content accessible to an eager audience.
First impressions are important. Your site's users should have a browsing experience optimized for a mobile device from the beginning without tracking down a special URL or scrolling around a desktop-optimized page looking for a link to the "Mobile Version." For more information about redirecting users to optimized pages, see "Detecting Web Browser Access".
The following sections provide some hints for developing effective web sites under these constraints:
- Mobility
- Connectivity
- Caching
- Screen Size and Resolution
- Navigation and Scrolling
- Tables and Frames
- Images and Color
- Forms
Mobility
The mobile device browsing experience is inherently different from the desktop browsing experience. Website users will visit your site while riding the bus, waiting in line, or sitting in a café. Consider how this affects the structure, content, and presentation of your site.
Connectivity
The vast majority of ACCESS Linux Platform devices access the Internet through telephony-based connectivity solutions. Mobile device users generally need to get to information quickly (especially when they're charged by the minute), so be mindful of download times. You must design your website to issue and return pages to users as quickly as possible. Avoid large graphics, background music, or other data-heavy content, and consider distributing information in smaller chunks.
Caching
NetFront Browser lets you control caching with the following HTTP/1.1 header elements and directives. You may also send any of these elements in HTML META tag format, which will override the HTTP header elements.
See the HTTP/1.1 specification at http://www.w3c.org for more information about each header element and directive.
Cache-Control: must-revalidate
The content will be revalidated with the web server every time it is accessed.
<meta http-equiv="must-revalidate" content="true">
Last-Modified: "GMT-TIME-IN-ASCII"
This element is used to determine the freshness of expired content. This information is sent to the web server. If the content is still fresh, the server returns a 304 (Not Modified) response and NetFront Browser displays the cached content. If it is not fresh, the server sends the fresh content.
<meta http-equiv="last-modified" content="Fri, 02 Mar 2001 01:41:31 GMT">
Table 0.1 Download "wait times," in seconds, for various page sizes at common speeds
Screen Size and Resolution
You will need to reform your content to fit a screen that's less than a quarter the size of the smallest desktop screens. NetFront Browser for ACCESS Linux Platform N.N supports QVGA (240 x 320 pixels), HVGA (320 x 480 pixels), and VGA (480 x 800 pixels).
NetFront Browser has a Zoom feature that lets users shrink images and text to fit the screen.
Other screen elements, such as the NetFront Browser title bar and scroll bar, take up some of the limited screen space. Figure 0.2 shows the actual content area for one common display size. Figure 0.3 shows the content area for the same display size, but in NetFront Browser's full-screen mode (the title bar is hidden).
Figure 0.2 Display area for 240x320-pixel screen
Figure 0.3 Full-screen display for 240x320-pixel screen
Navigation and Scrolling
Consider how users will navigate your site using controls common to mobile devices. Remember that users will be using a 5-way navigation button instead of a mouse, which means that active feedback involving rollovers or "hovering" is significantly less useful. They will often use their devices one-handed, so your target sizes may need to be increased to compensate for reduced dexterity.
Pages that are larger than the device's screen will draw what they can in the available space and allow the user to scroll around the rest of the page (by using scrollbars). As a rule of thumb, assume that things will render on a ACCESS Linux Platform device's screen as they would in a desktop browser window sized to similar dimensions. This applies to framesets, tables, and so forth. However, note that NetFront Browser has a Zoom feature that lets users scale web pages to different screen sizes.
ACCESS Linux Platform licensees can customize NetFront Browser so that it does not support horizontal scrolling, so be aware that some NetFront Browser users may not have horizontal scrolling capability.
If your content absolutely requires scrolling, consider variations that limit scrolling to the vertical axis, as vertical scrolling is assisted by ACCESS Linux Platform hardware controls. For an example of how readability is improved by eliminating horizontal scrolling, see Figure 0.4 and Figure 0.5.
Figure 0.4 Web page with horizontal scrolling
Figure 0.5 Web page formatted for mobile device
Tables and Frames
NetFront Browser for ACCESS Linux Platform displays frames and tables as a desktop Web browser would. However, because NetFront Browser displays on a small screen, you need to think about how wide tables and multiple frames will appear to the user.
Frames will be scaled to fit within the screen if they meet these two criteria:
- the frames are defined with absolute pixel widths
- and their dimensions are greater than the screen size
In this case, everything on the page will appear on the screen, but the page may look cluttered. The frameset size will be scaled to equal the screen size.
If you want your columns to retain the same absolute widths regardless of screen size, use tables. To specify an absolute table width, use a command like the following example. However, note that if none of the cells in a row or column contain text or graphics, the row or column will collapse to fit in the small screen.
<TABLE WIDTH = "120, 360"> graphic or text </TABLE>
If you use percentages instead of pixel widths, the table will be scaled to fit the screen. If you define a relative column width using an asterisk, that column will be scaled to fit in the screen.
You can also use the absolute-positioning features of style sheets (CSS) to preserve the layout of your page.
Images and Color
Beyond the variations in standard screen resolution and color depth, different ACCESS Linux Platform hardware manufacturers use different physical components. Some screens are sharper, brighter, or more saturated than others. Test your pages on several different devices to ensure that your color selections render well across the devices in your intended audience.
In particular, remember that compressed graphics will balloon back to their original size in RAM after downloading. The NetFront Browser application does not scale graphics to fit on the small screen, so you may want to design a handheld-specific page that uses smaller graphics. Reducing the size and number of colors will also help reduce the download times for the user.
Forms
Many web sites include a form that the user fills out and submits to perform a very specific task, such as searching for airline flight information. Rather than present users with the entire home page for your site, you may choose to display a simple page with a few links that take users directly to the tasks they want to perform. Text or image links at the top or bottom of the page can ensure access to the rest of your site if necessary.
Note that forms in NetFront Browser use native ACCESS Linux Platform buttons and pop-up menus, just as in other ACCESS Linux Platform applications. Take the button size into account when designing your form layout.
Pop-up Windows
NetFront Browser for ACCESS Linux Platform can display pop-up windows. Each pop-up window is displayed on a separate page. Each page is the same size as the main web page. The maximum number of pop-up windows allowed is configured by the device manufacturer.
Users have the option to block pop-up windows.
NetFront Browser Support for Internet Standards
NetFront Browser for ACCESS Linux Platform supports common Internet standards as described in the following sections:
HTML Support
NetFront Browser for ACCESS Linux Platform supports the W3C HTML 4.01 standard, plus some extra tags for compatibility. It also supports WAP 2.0, XHTML 1.1, XHTML Mobile Profile, User Agent Profile (CC/PP), and WML 1.3 Parsing and Paring.
WML Support
NetFront Browser for ACCESS Linux Platform supports the W3C WML 1.3 standard.
Scripting Support
NetFront Browser for ACCESS Linux Platform supports the ECMAScript (ECMA-262) standard, which is a unified standard based on JavaScript. It incorporates most aspects of the W3C Document Object Model (DOM).
Most web pages designed with JavaScript 1.3 or JavaScript 1.4 are compatible with NetFront Browser. Test your scripts in the NetFront Browser application to ensure compatibility.
If your script includes an unsupported function, the script will continue on to the next function. Most script errors will fail silently. However, the window.open function will fail with an error if the command is the result of a user action, such as clicking on a link that opens a popup window. Other situations, such as calling the window.open function ONLOAD, will result in a silent failure.
NetFront Browser for ACCESS Linux Platform does not support other client-side scripting languages such as VBScript. NetFront Browser ignores the SCRIPT and NOSCRIPT HTML tags, so it will not recognize these scripts.
SVG Support
NetFront Browser for ACCESS Linux Platform supports the SVG Specification 1.1; Mobile SVG Profile: SVG Tiny 1.2; SVG Micro DOM.
Other Standards
NetFront Browser for ACCESS Linux Platform supports parts of the CSS1, CSS2, and WCSS standards. Most style sheets written with either of these standards will work in NetFront Browser.
NetFront Browser does not support Java (embedded in web pages) or XML at this time.
