WAP 2.0 Design Principles ~

1. Preparations before site design

When designing a service that targets both mobile devices and PCs, you must first design the user interface of mobile devices. It is usually easier to extend a mobile-oriented service to a PC environment than to expand in the opposite direction.
If the start site is a PC web site, we strongly recommend that you split the PC service into several parts. In the mobile environment, select only those parts that can be used as the core of the service. Focus on these core components when designing mobile services.
Research the physical characteristics of various mobile browsers on the market, so as to use XHTML and CSS for effective application software design. You need to know the maximum allowable size of documents, style sheets, and images. It can be used to display the physical size of the screen space of the content, as well as other physical entities, such as soft key text, icons, titles, etc., reserved screen space. The Nokia mobile phone has a line containing the title of the icon, and the line of the title can also contain the title of the XHTML page. There is also a content area used to display the XHTML page (excluding the title), and the area containing one or more soft key text. The number of soft keys depends on the mobile device type.

2. Basic principles for designing excellent sites

The introduction of xhtml mp and CSS creates a variety of new user interface structures. Xhtml mp contains more elements than WML. With CSS, you can modify the visual display of elements in multiple ways. Xhtml mp provides service providers with more possibilities to make their services more attractive, but at the same time, xhtml mp also increases design complexity, in this way, more challenges are faced with availability.

3. Focus on the navigation model

You should create easy-to-use user interfaces based on consistent and easy-to-learn navigation models. This is more important than all the fancy display functions of XHTML.
The requirements and expectations of mobile users are different from those of users using the customized PC. Mobile users are not page visitors. They prefer to quickly and easily access specific information. Therefore, concise, accurate, and fast information should be provided.
Avoid displaying the core service content on too many pages or flashing screens. However, you can display a small logo or other highlighted trademarks to familiarize users with the service. In any case, important information requested by the user should be immediately displayed.
In mobile devices, data input is very challenging and time-consuming. Therefore, when creating a site, users are required as little as possible, especially text input.
If possible, you should avoid typing when selecting a user, and use the selection list, check box, or single-choice button to select a user from the default list, or provide a default list and an input box.
If you have to enter a template, use the property-wap-input-format to set the input template. For example, * n indicates digital input. This avoids manual conversion of the input mode.
The CSS property-wap-input-format defines an input template for user input data to remove the need to convert the input mode for text or numbers. Because some earlier versions of non-Nokia xhtml mp browsers do not support this attribute, they support the old attribute format = "... ", Therefore, for strings of the same format, the CSS Attribute-wap-input-format and the attribute format should be defined at the same time. For the syntax of the WAP format input template, see WAP June 2000 specification [WML] or WAP Overview [wapover].
Many users pay for the mobile service in minutes. Therefore, if they cannot obtain the information to be searched in a short time, it will stop using the service-this is also an important reason to comply with the above points.

4. Design navigation Layers

The navigation model is a method for users to browse the XHTML page. The XHTML page consists of services, interactions through links, menus, and data input. When designing a navigation model, remember the following principles:
• Maintain the consistency of the navigation model throughout the service.
• For the XHTML service, do not add a link to the previously visited page, because the Nokia mobile browser has a permanent back soft key that can be automatically implemented.
• Avoid creating services that are too "deep. If a service contains more than four or five layers, it is difficult for users to retain the overall impression of the service.
• Add navigation to the Service start page or other major branch pages so that users can easily return to their start point. The more navigation layers, the more you need a method to return to the start page.

5. design considerations for small screen sizes

Forecasts show that the number of mobile devices worldwide will soon exceed the number of PCs, which brings huge business opportunities to user-friendly applications for small screen sizes. Of course, designing creative applications on small screen sizes is more challenging, but it is not impossible to design attractive applications for mobile devices. Keep in mind the following terms:
• Make sure that the user has visible content when entering the page.
• Use the <title> element in the • Use consistent styles on all XHTML pages of a service. Consistency increases ease of use-especially for users who reuse the service.
• Minimize the need for horizontal scrolling. In addition to time-consuming horizontal scrolling, it is difficult for users to determine their position throughout the page. If possible, do not design a display that is wider than or longer than the target device.
• Use the alignment attributes (LEF, right, center) of elements to increase readability, but do not use more than two or three attributes on the same page, as this hinders users from obtaining the organizational structure.
• Use blank space, especially next to high and narrow images. You can use the align attribute in the element to achieve this purpose. For example:

In addition, you can set floating attributes and other attributes for the element in CSS for this purpose (and more ). The floating image allows text to be displayed next to the image, so that the entire display area is used.
• Avoid overemphasizing text attributes, such as bold, italic, and underline, because this reduces the readability of the content on the small display.
• Use short and accurate words whenever possible to avoid lengthy and complex words.
• Avoid using too many different colors on the same page. Although colors can bring more "vigor" to a service, excessive colors can lead to overload. Make sure that the color is consistent. For example, the same XHTML element in the entire service uses the same color.
• Do not describe the color by name. For example, "click the red link to continue ". Customer banners without a color display the color content in black and white.

6. Keep the document size shorter.

As memory available on mobile devices is limited, documents should be kept as short as possible. However, because xhtml mp is different from WML, it cannot support multiple "cards" in a document. Therefore, dividing the content into multiple independent pages slows down the loading speed. Therefore, all relevant information should be combined on the same page, and segment anchor should be used to help jump to the relevant chapter section.
Useful methods to keep documents short include:
•CodeDo not include long comments. Although adding annotations to code is usually a good programming habit, this is not applicable to mobile devices.
• Use tabs instead of spaces for indentation, or do not use indentation. The more spaces, the faster the document size increases!
• Use brief names for file names, CSS classes, and CSS IDs.
• Where possible, use cascade rules to define styles, rather than using class or attribute IDs in elements. For example, in the wap css style sheet, use the following attributes:
P (color: Red)
Instead of the following class attributes:
. Red {color: Red}
In this way, it is unnecessary to define the string class = "red" in each <p> element in the document ".

7. design applications for mobile phones

When developers decide what information the various applications of mobile terminals should contain, they should consider when users use mobile phones. The service content should meet the needs of the target user group, and the most common tasks should be optimized. Because small display devices are easy to move, without a PC, users may first use mobile phones to access the Internet and obtain urgently needed information. Examples include fast access to flight information, viewing newsletters, and weather conditions. However, users are less likely to use mobile phones to surf the Internet.

8. Smooth user task flow and reasonable use of images

The color page looks attractive, but when image transmission slows down the service, the color page may not be quite comfortable. According to availability study 1, users are less keen on services that interrupt their task stream due to image transmission. In particular, large images are not suitable when users search for target pages. Images that contain information value are favored, but in most cases, you can either turn off the image to save time and money, or switch to the next page without waiting for the image to be downloaded. It is important to allow users to browse the page before downloading all images.
Large tables may cause similar problems-that is, the user's operations are frozen before a page is downloaded; or other operations cannot be performed until the page is downloaded. Because mobile phone Display sizes are different, developers should ensure that data tables can be read even on the smallest display, which are usually compressed to meet display requirements.

9 structure is simple for new users, but it cannot ignore skilled users

In mobile communication services, the superficial structure is often easier to understand than the esoteric structure. A descriptive name should be given to the link and page to help the user find the information he/she needs. It is hard to say how many links should be provided on a link list page. If the link is obviously similar and easy to browse (each link occupies one row, in alphabetical order, or in another logical order, so that the user does not have to read each link), then, the better way is to provide 30 links on a page, instead of 5 links on each page. A total of 6 pages are required. If there are dozens of links, it is a good idea to provide sorting options before displaying these links. If the link can be placed on a row, you can select the link at a glance, and the page is more beautiful.
WAP 2.0 does not have <do> elements. On the contrary, they are replaced by access keys. However, most users do not seem to understand the access keys element and cannot find them. To help users understand the concept of accesskeys, developers should ensure that accesskeys are visible on the screen and appear in a similar form of phone keys. If possible, the search function should be provided. Skilled users appreciate this function, just as novice users browse famous sites.

10. provide sufficient information on the page

The interactive page should be short, and the information page should be 32 long. It is not recommended to use a facade page to start the site. The facade page has no effect except greeting visitors and displaying the logo. A better way is to allow users to directly access the service.
In XHTML, the information is downloaded in the form of a page, rather than in the form of a deck in WML. This means that it is more important to provide users with information on a single page to support their task flow. Since the XHTML pages are independently downloaded, switching back and forth between the XHTML pages may consume more time. This is especially true for backward navigation. In such cases, the page cannot be cached. For example, this is the case for systems related to payment or provision of private information.
The first screen (the top) of any page is the most important. All frequently used navigation links, search domains, logon screens, and a large amount of information reside there. You can browse forward before the rest of the page is loaded without scrolling the page.
Do not place banners or images without any information at the top of the page. It is best to place the advertisement on the Left or Right Border of the page.
It is difficult to scroll up or down pages. Therefore, interactive pages with tables should not be too long, because users cannot be sure that they have filled in every field on the long table. If the table occupies more than two screens, the user may lose control.
The target page accessed by the user should have enough information. For example, if the target page contains a story or usage instructions, all content should be displayed on a page. When a user browses a long page with a large amount of information, the sub-title that can guide the user in the page will help the user browse the page.
The fact that information is downloaded from a single page rather than deck is the biggest single change that affects navigation and structural differences between WML and XHTML.

11. Provide information feedback for user operations

Developers should provide correct feedback on user operations and errors and problems. For example, after a user clicks a link, the page title should be the same as the Link name. Reducing the navigation step should not increase the user's insecurity. For example, the user operation confirmation page is necessary, although these pages need to be clicked again. If the confirmation page is lost, the user may feel that she/he needs to check to see if this line is happening-this will lead to more clicks. Users should think that they are always controlling the system
If a problem occurs, you should be prompted what to do next. Explain the expected input format to the user and mark the required items to prevent the error from occurring.

12. Minimize the number of images and reduce the size of images

The number and size of An XHTML page image should be carefully considered. Each image on the page generates an independent round-trip, which in turn slows down the display speed of the entire page. Therefore, we recommend that you minimize the number of rounds. Note that each time an image arrives at a mobile device, the content of the entire page may need to be rearranged, which takes up time and processor resources. Therefore, a page with only a few images may download faster than a page with many smaller images. If possible, we recommend that you use the same image on each page of all services. A specific image can be downloaded only once and saved to the cache. For example, if a custom image is used as a bullet, the same image should be used throughout the service.
TCP/IP connection may cause different page download speeds, even if the data volume is the same. For example, downloading an XHTML page containing four images (2 kb for each image) is faster than downloading a page containing eight images (1 kb for each image.
If a WAP Gateway is used, the WAP Gateway should be closer to the ggsn supported by GPRS. In this example, "near" is the probability of Data delay and packet loss. The loss of information may cause additional latency due to HTTP retransmission. The latency between the WAP Gateway and the content server should be as small as possible.

13 define image height and width attributes

it is recommended that content developers specify the image height and width in the markup language so that the browser can reserve the appropriate space for the image. If the height and width parameters are used in image labels, the XHTML browser can reserve space for the image before downloading the image. Therefore, the page can be displayed before the image is downloaded. Of course, the image can also appear on the page after the download. This does not affect the full download and processing time of the XHTML page, but greatly improves the user experience, because the user can browse the page before downloading the image. Example:

14 Use tables with caution

the XHTML page browser supports the use of tables and nested tables.. Developers should exercise caution when defining the table unit width, especially when processing nested tables.
CSS single-pass (fixed) algorithm can be used to design a table layout to optimize CPU utilization. However, unlike the CSS multi-pass (dynamic) table layout algorithm, the fixed table layout algorithm determines the number of columns and the size of a table based on the first row of the table. Therefore, you can obtain the best performance by using a rectangular table with clear column width.
if you want to use a nested table and specify the width of the child table, developers should avoid specifying the width of the parent table by a certain proportion of the child table width. Because the device has different screen sizes, the percentage may not necessarily represent the same number of pixels. Therefore, we recommend that you use absolute width (in pixels) in the parent table and its nested tables to ensure that the content is correctly displayed. Make sure that the total width of the table is the same as the width of all columns plus the sum of the border and cell interval. Generally, when the number of layers of table nesting increases, the page complexity and the processing time required to display the page will also increase. To ensure timely display of pages, avoid using nested deep tables.
In addition, the border of the table should not be too thick, because for devices with limited display size, the Border width is easy to occupy many pixels, so that the actual available content area is too small.

15. Consider adding style definition options

Developers can define their own styles in various ways, such as using an external style sheet, using style elements in the Document Header, or using the line style attributes of specified elements. In general, although external style sheets may be used to separate styles from the markup language at any time, this is a good method, but you should consider the trade-offs. If the style definition is included in the XHTML code, the display of the XHTML page will be faster, but the use of external style sheets provides a convenient way to change the style throughout the service. The same external style sheet should be used throughout the service to avoid downloading multiple style sheets to the phone. The external style sheet can be downloaded only once and saved in the cache.

16 Delete unnecessary blank areas and comments in the code

It is important to ensure that there are no spaces in the code. Although the blank area is invisible on the screen, it still needs to be processed because the browser needs to analyze, typeset, allocate and display the blank area.
The number of comments in XHTML code should be as few as possible to make the code as compact as possible.

17 use HTTP header instructions to support page caching

in the cache. However, content developers should not assume that the page cache is default. If possible, a clear cache title should be sent together with the document to ensure that the page can be cached on the client. In addition, the expiration time should be set to at least a few days to ensure that the content can be cached for an appropriate period of time across multiple time zones.
the browser does not support placing cache instructions within Meta Tags (for example, using a HTTP-EQUIV), but controls the cache with HTTP headers. The HTTP server can set "cache-control: No-Cache" HTTP header indication, which places a page that defines "Page not cached.
the cache uses the "least recently used" algorithm, which means that the minimum used items are cleared first. We recommend that you repeat the images and external CSS on all XHTML pages to make sure they are in the cache so that they do not need to be re-downloaded every time they are used.
note: in mobile devices of Series 60, content is cached by default, unless there are other requirements in the HTTP header. In Series 40 mobile devices, content is not cached by default.

18 Use the Unicode 2.0 character set to write XHTML content

The Nokia XHTML browser supports the ASCII and Unicode 2.0 character sets. Therefore, to ensure the maximum degree of XHTML interoperability, we should use non-Latin Unicode to create all XHTML content. ASCII can also be used to create Latin. Some gateways and proxies can convert local character sets to Unicode, but not all character sets can be converted. Therefore, the only way to ensure that the terminal receives Unicode is to use Unicode to create content. For more information about Unicode and other non-Latins, see the following:
• Cjkv information processing, Lunde, Ken. 1st edition. O 'Reilly & Associates (December 1998)
• UNICODE: A primer, Graham, Tony. John Wiley & Sons (March 2000)

19 use the correct MIME type and verified XHTML code

The preferred MIME type for xhtml mp content defined by OMA is: "application/vnd.wap.xhtml + XML ". This type can be used to provide xhtml mp document support to the XHTML user agent. You can also use "application/XHTML + XML ". In some Series 60 browsers, the MIME type "application/vnd.wap.xhtml + XML" must be used to ensure the correct xhtml mp content view. The MIME type "text/html" is also available. However, for XHTML, this type should be retained for display on the existing HTML user proxy. Note that XHTML documents in "text/html" format will not be processed in XML format. For example, this means that the user agent may not be able to detect errors that are not in the form of errors. For software developers who want to support both XHTML user proxies and HTML user proxies, they can use HTML documents as the "text/html" type, the XHTML document is of the "Application/vnd.wap.xhtml + XML" type and uses the content negotiation mechanism.
We recommend that you use the *. XHTML file extension for all xhtml mp content. To avoid any interoperability issues and improve performance, you should verify the XHTML code. For example, you can use the W3C validator on the http://validator.w3.org to validate XHTML content. If you dynamically create XHTML content, the generated code is the valid dtd xhtml mp 1.0 code.

20 use descriptive page titles and element labels

The page content displayed in the page title description. We recommend that you use titles in WML, but force titles in XHTML. Titles help users browse applications because they will remind users where they are. A better way is to use a title that should start with a service name and be short. The topic selected by the user determines the title text. For example, the title "bookmarks" tells the user that the display contains a bookmarklist for the application, and the option item selected previously is "bookmarks ".
The title text should use a proportional font. If the title text is too long, the text will be automatically deleted. Generally, the effect of deleting titles is better than that of abbreviations, because users may be confused about the abbreviations they are not familiar.
Although it is recommended that you use acronyms for element tags, you should not use acronyms that are not familiar to the target user group. The same tag should always be used for the same operation, especially the functional tags such as delete, remove, erase, clear, and destroy.

21 use multipart/hybrid methods to download the XHTML page faster

The multipart method can be used to request and transmit XHTML page content in a single multi-segment message. It can replace multiple independent Page Object Requests. This makes page download faster. For example, if an XHTML page contains text, 7 images, and a link to an external style sheet, all content can be obtained through one request without providing 9 separate requests. To use this function, web servers and browsers must support multi-segment methods. Content developers must consider encoding all the displayed content on the page into multi-segment messages.
To find out which Nokia mobile phone supports multipart/mixed MIME types, refer to the document browser MIME types in Nokia GSM phones in www.forum.nokia.com/documents.

22. Test availability

it is always the right choice to test the availability of new applications. People who are not involved in designing and developing application software often notice potential availability issues that are often not obvious to those who are very familiar with design. Availability testing should be conducted as early as possible during development. In this way, any necessary changes can be made according to the test results within the development schedule. Testers who can represent future end users should be invited for testing. If a large number of tests are not allowed on schedule, at least small-scale tests should be conducted.