Website Design

The Web on Small Screen: Mobile phones and Interactive TV

A well designed web site can display on devices very different from desktop computer. Two examples are hand held devices and interactive television set-top-boxes. Hand held devices can be a PDA or a cellular mobile telephone. A interactive television device can be a TV set-top box or a games console and similar technology is used for digital signage: where electronic screens for advertising and information are used in public places. While the screen on a pocket size telephone looks very different to a large screen TV, they have common features when used for a web display:

Small screen

A PDA, mobile telephone and a TV all have limited screen area compared to a conventional PC. The user of a PDA or mobile telephone can read only a few lines of text and see small images on the small hand held display.

Limited keyboard

A telephone is limited to a numeric keypad and a few special function keys. Similarly a TV is limited to a simple hand held remote control.

Distracted user

A computer user will usually be in an office environment and can devote their attention to the screen. In contrast a phone or TV user may be in a noisy, distracting environment and only devoting some time to the device. The content and interface therefore need to be design for quick and easy reading.

Web content can be specially designed for specific mobile or TV devices. However, the target device may not be known, or may change, or resources may not available to tailor for several different devices. W3C's accessibility guidelines were specifically developed with the needs of small devices in mind, as well as disabled users. It is therefore possible to use the guidelines to design content to suit a generic hand held web device and TV, as well as conventional PCs. CSS can be used to detect the device used and modify the page design to suit.

Tools for mWeb

1. W3C Markup Validation Service for XHTML Basic
2. W3C MobileOK Basic checker service

The W3C Markup Validation Service for XHTML Basic is useful in checking web pages for embedded CSS and other HTML features which are not appropriate for efficient mobile pages.

As part of its Mobile Web Initiative, W3C have created a W3C MobileOK Basic checker service. This carries out some of the W3C mobileOK Basic Tests 1.0 against the W3C Mobile Web Best Practices 1.0. The tests go beyond those of validation of the HTML and are similar to those for accessibility.

History of m-Web: I-mode

I-mode provides a web service on a mobile telephone screen, using a proprietary mark-up language based on HTML. I-mode was introduced in Japan in 1999 by NTT DoCoMo. I-mode is the most successful wireless web service:

As of August 2004, i-mode has 43 million customers in Japan, and over 3 million in the rest of the world. i-mode is being provided world-wide through DoCoMo's partners through a licensing scheme through mobile operators in the following countries: Germany, the Netherlands ..., Belgium, France, Spain, Italy, Greece, Morocco and Taiwan. Australia, United Kingdom ... and Israel ... have also been announced ...

i-mode is now a global ecosystem where operators design the compatible handsets, give strong editorial and usability rules to content providers, and propose an open business model to them...

From I-mode, Wikipedia, 6 Jun 2005

On 10 November 2004 Telstra launched the i-mode service in Australia. It closed the service on 10 December 2007.

For mode details of i-Mode see "I-Mode: The Web on a Mobile Telephone", URL: http://www.tomw.net.au/2005/wd/imode.html

cHTML

I-mode's data format evolved from Compact HTML (cHTML). It was designed for portable devices with small memory, low power CPU and initially a small monochrome screen with one font. As I-mode's data format was based on a subset of HTML, simple I-mode pages are compatible with most desktop web browsers.

CHTML is notable not so much for what features it has, as what it leaves out:

We describe the major features which are excluded from Compact HTML, as follows.

• JPEG image
• Table
• Image map
• Multiple character fonts and styles
• Background color and image
• Frame
• Style sheet

... includes GIF image support...

Compact HTML for Small Information Appliances, W3C NOTE 09-Feb-1998, URL: http://www.w3.org/TR/1998/NOTE-compactHTML-19980209/

I-mode example: fixed screen size

An example of an I-mode web page which assumes a fixed screen size:

Supermarket
chain operator
Nagasakiya
Co., which is
currently pro-
tected from
creditors un-
der the corpo-
rate rehabili-
tation law ...

Japan Times - Mobile Edition, 08MAY01/10:03, URL: http://www.japantimes.co.jp/i/START.HTM (no longer availbale)

I-mode example: allowing text to wrap

The People's Daily - I-mode displays better on a conventional web browser by allowing text to wrap:

China Urges Advanced Countries to Help Developing

A Chinese central bank official on Sunday urged advanced countries to coordinate their macroeconomic policies and keep the major currencies' exchange rates stable to create an environment conductive to stability and growth for developing countries.
(04.30 14:0)
Top of Group Top Page

People's Daily - I-mode

Google HTML to iMode conversion

Google provide a limited HTML to iMode conversion (with no graphics) as part of their wireless service:

With Google Wireless WebSearch, your users can search not just the "Mobile Web" of 5 million pages created specifically for wireless devices, but the entire World Wide Web. No other search engine can provide this service. Only Google's proprietary on-the-fly conversion system translates web pages into a language your phone understands, so users can access the world's largest index of web pages (more than 3 billion pages) and view the content from their mobile phones. Google Wireless Search supports WML, HDML, HTML, and i-mode and J-Sky compatible HTML mobile Internet standards.

From: Google Wireless Services, Google, 2003

Compact HTML web pages look like early, simple web pages and like those generated by content management systems specifically for accessible access by the disabled. While very usable, these pages look dull compared with graphics rich web pages designed for conventional browsers. I-mode added more features to cHTML to make a richer user experience on a hand held device, at the cost of compatibility with desk top web browsers.

I-mode has proved very successful in Japan, but it is not clear if this is due to any of its technical features, or due to mobile telephones being very popular and so being the population's first experience of the Internet. The response of the European and USA mobile telephone industry was to create the Wireless Application Protocol.

Wireless Application Protocol

WAP 1 failure, WAP 2 Success?

Wireless Application Protocol Version 1 (WAP 1) used a set of modified Internet standards in an attempt to provide web-like services on a mobile telephone. WAP 1 included an XML markup language called Wireless Markup Language (WML). Like cHTML, WML was designed to be efficient to use on a low bandwidth connection and small screen. However, unlike iMode, WML was not based on HTML and so was not compatible with ordinary web browsers. As a result little WML content was created and it proved to be a commercial failure.

In response to the failure of WAP (and the success of i-Mode), WAP 2 was produced. WAP 2 uses a form of HTML in place of WML (plus a subset of CSS and some extensions for the mobile platform ). It is therefore more likely to be compatible with the web and has a better chance of commercial success than WAP 1. Also the first WAP 2 mobile telephones are high end models with larger colour screens which rival PDAs, allowing more conventional web page design to be used.

WAP 2 calls its markup language XHTML Mobile Profile (XHTML-MP). This is not a formal standard, but is based on XHTML Basic, which is a W3C standard:

The XHTML Basic document type includes the minimal set of modules required to be an XHTML Host Language document type, and in addition it includes images, forms, basic tables, and object support. It is designed for Web clients that do not support the full set of XHTML features; for example, Web clients such as mobile phones, PDAs, pagers, and settop boxes. The document type is rich enough for content authoring.

XHTML Basic, W3C Recommendation 19 December 2000, URL: http://www.w3.org/TR/xhtml-basic

XHTML Basic: XHTML - formatting + CSS = Success?

XHTML Basic omits formatting, such as for font, colour and positioning and so on its own produces compact plain web pages, similar to cHTML. However, external style sheets can be used to produce colorful, engaging web pages. Different style sheets can be automatically selected to suit different devices:

The style element is not supported. External style sheets are recommended. The link element can be used to include external style sheets. The div and span elements and the class attribute are supported to hook style information onto the structure. Separation between structure and presentation allows user agents to download the style sheets if they support style sheets; user agents that do not support style sheets can ignore the external stylesheet. The media attribute can be used to select the appropriate style sheets. ...

XHTML Basic, W3C Recommendation 19 December 2000, URL: http://www.w3.org/TR/xhtml-basic

Examples of WAP 2 devices are the Motorola A920 , with a 208 x 320 pixel screen and Nokia 6600 with 176 x 208 pixels (both have 16-bit TFT Color screens). Mobile telephone makers are not emphasising XHTML in marketing of these telephones, due to the previous failure of WAP as a product. Instead they are differentiating them with cameras, games and multimedia. However, with consumers buying these phones for whatever reason, there will be a pool of XHTML capable devices which web applications can be produced for.

WAP 2 Features

WAP 2 comprises a set of more than 70 complex technical documents. These cover:

• Architecture: The overall design of WAP
• Client ID
• Client Provisioning
• External Functional Interface (EFI)
• General formats
• Multimedia Messaging Service (MMS)
• Persistence
• Pictogram
• Push
• Synchronisation ...

It is possible to design applications which use WAP 2 features of a specific mobile telephone to the full. The server application can check the UAP of the particular phone and then provide images, text and programs which fit that phone's capacity. This might be used in a vertical application where a limited range of WAP 2 phones are used as wireless hand held computers in business and industry.

However given the great range of models and capacities of phone which might be used by the general public, it is very much more difficult to design a WAP 2 application for consumer applications. Also if these applications depend on phone specific functions they will not work with conventional web browsers on ordinary PCs. The "Wireless Application Environment" functional area of the WAP 2 specifications contain specifications related to preparation of web pages. This area contains twenty specifications, but of these the important ones are:

1. Wireless Markup Language version 2 Specification
2. Wireless profile Cascading Style Sheet Specification
3. WMLScript Language Specification

Limiting functions used for web sites to this subset of web standards should make the applications compatible with both conventional web browsers and telephones. Limiting the features used may make the web site more usable, rather than less. It should be noted that iMode has been very successfully while having a very limited range of features compared to WAP.

Lonely Planet Mobile XHTML

One of the first WAP 2 web sites is a version of Lonely Planet's travel guide:

While it was claiid this service is exclusive to Nokia's 3650 phones, it actually operated with conventional web browsers. The display was similar to that for early iMode services, with minimal graphics:

Berlin: Overview, Lonely Planet Mobile, URL: http://mobile.lonelyplanet.com/city_intro.cfm?DPID=591

Web Browsers for Small Screens

Advanced set-top-boxes (STBs) for digital television provide web-like features for the viewer. These allow the viewer to look at the electronic program guide and other information. While previously based on proprietary formats, more recent boxes use some form of HTML. An example of a proposed standard is Multimedia Home Platform (MHP), which attempts to adapt existing Internet and web standards for to digital Television (DTV). MHP uses DVB-HTML, which is an adaption of XHTML. However, MHP has not been widely deployed, suffering from similar problems to WAP 1. A new version (analogous to WAP 2) may b needed to make a practical product.

Canberra's Transact broadband system used Motorola Streammaster 5000 STBs. See: Web Page Display on Transact.

The job of adapting web pages for small screens is not as difficult as it would first seem, due to special features built into some browsers for small screens. These browsers have been designed on the assumption that most web pages are intended for larger screens. The browser therefore modifies the web page design to better render on the small screen. As an example spacing in tables and around text will be reduced to fit more content on the screen, images will be reduced to fit and small fonts made larger so as to be readable. Elements laid out across the screen may be rearranged in a vertical column.

Exactly what modifications the web browser makes varies. It is possible, to some extent, to override the web browser's decisions by using CSS features. However, it may be better to provide an accessible design and rely on the browser to optimise the layout.

Typical Small Devices

Reasonable minimum screen size: QVGA

While it is possible to create web pages for specific devices (and to select between them automatically by checking the device's User Agent Profile), a reasonable minimum screen size to aim for with general web site design is 320 x 240 pixels (known as one Quarter VGA or QVGA). QVGA is the resolution of a typical current model PDA or high end telephone. It is also similar to the effective size of a TV screen. With careful design web pages can be designed to display well on a typical PC screen and also be usable on a smaller QVGA screen.

Hand held device is limited to business card size (A8: 52 mm by 74 mm)

A portrait QVGA screen (240 pixels across by 320 pixels high) can display about 16 rows of 24 characters of text. While higher resolution screens for hand held devices can be expected in the future, they are unlikely to be able to display much more information than this. A hand held device is limited by the size of the user's hands and their eyesight. The maximum size for a hand held screen is about the size of a credit card or a business card (A8 International Paper size, 52 mm by 74 mm). The Apple iPhone and iPod Touch have screens of 3.5 iunch diagonal, close to this maxiumum size (the iPhone requires additional code to adapt a web page). Such a screen is about the same width as a newspaper column, which is printed at high resolution and can display 22 lines of text, 30 characters wide.

TV screens are typically larger than PC screens, but lower resolution

There is no exact size in pixels for a TV screen, as TV standards differ across the world. Also the edge of the TV screen may be masked, so not all the screen resolution is usable. Microsoft's MSN TV for North American TVs, uses a screen of 554 x 384 pixels. Teletext, developed for European TV, provides 40 characters per line in 24 rows. TeleWeb, a web based upgrade of Teletext uses a minimum of 256 colours with VGA resolution (640 x 480). Even when higher resolution TV displays are available, the effective resolution is lower than for a PC as the viewer sits much further from a TV than from a computer screen.

Small devices may have limited or no Java, they are more likely to have ECMAScript. CSS may be supported, it may not produce a readable display on a small screen, or only a subset (such as for WAP 2) may be provided.

Diagram of Screen sizes

A typical small screen can be simulated by reducing the browser window on a typical desktop PC screen (15 inch SVGA) to the size of a credit card or a business card (A8 International Paper size 52 Ã- 74 mm). This shows how precious screen space is and therefore how carefully the web page design must be done:

Small-Screen Rendering

The Opera web browser includes "Small-Screen Rendering (SSR)" feature to reformat conventional web pages for small devices (Opera 7 browser for Windows SHIFT+F11). This increases text size, reduces the space around text and reducing images. In addition it reformats vertical columns in sequence into one column. The BOCOG Web site displayed on a conventional PC web browser, Web TV, Web Phone (Opera Small Screen) and Openwave Phone Simulator:

WebTV STB Emulator

An early Internet TV device sold in the USA was WebTV. This was purchased by Microsoft and renamed MSN TV. While this service is not marketed in Australia there is a useful emulator "The WebTV Viewer" to simulate the TV browser on a personal computer:

It can tell you if your Web content is appropriate for the receiver. It has tools to show you how content is altered to look the best on a television screen. There is a special window that shows how tables and images are scaled... The Viewer does not have a TV tuner, so all of the broadcast pictures are simulated.

From: The WebTV Viewer, Microsoft Corporation, 2001

The WebTV browser increases text size, reduces the padding around text and images and reduces the sizes of images to fit the screen. It does not modify the layout of elements. As a result some designs with large numbers of columns of information do not display well.

See: wTV: Adapting Weather Pages for Internet TV.