Ericsson R380 Design Manuallines
  1. Manuals
  2. Brands
  3. Ericsson Manuals
  4. Cell Phone
  5. R380
  6. Design manuallines
Ericsson R380 Design Manuallines

Ericsson R380 Design Manuallines

Design guidelines for wap services
Hide thumbs Also See for R380:
Table of Contents

Advertisement

Quick Links

Download this manual See also: User Manual, Manual
LZT 108 3339

Mobile Phone

R 380

Design Guidelines

for WAP Services
e

Advertisement

Table of Contents
loading

Related Manuals for Ericsson R380

Summary of Contents for Ericsson R380

  • Page 1: Mobile Phone

    LZT 108 3339 Mobile Phone R 380 Design Guidelines for WAP Services...
  • Page 2 Ericsson is the leading provider in the new telecoms world, with communications solutions that combine telecom and datacom technologies with freedom of mobility for the user. With more than 100,000 employees in 140 countries, Ericsson simplifies communications for its customers - network operators, service providers, enterprises and consumers - the world over.

  • Page 3: Table Of Contents

    Contents PREFACE _______________________________________________ 2 Who Should Read this Guide? Overview of Contents Related Publications Ericsson Publications Other Publications Terminology Abbreviations Definitions GENERAL USABILITY ASPECTS ____________________________ 4 USER INTERFACE ISSUES _________________________________ 5 The Browser Display The On-screen Keyboard Navigating DESIGN COMPONENTS ___________________________________ 7...

  • Page 4: Preface

    PREFACE This document describes how to design WAP services for the Ericsson Mobile Phone R380. Who Should Read this Guide? This document is intended for developers of WAP services who want a deeper insight into designing applications for the Ericsson R380 WAP browser.

  • Page 5: Terminology

    An attribute in the Card element indicating that the current browser context should be re-initialized upon entry to this card. A collection of WML cards, with the entry card. A WML application residing on a web site. The R380 WAP browser. newcontext attribute set in the...

  • Page 6: General Usability Aspects

    Internet server used. Please consult your Internet server documentation for details on how to make use of the information contained in the HTTP header fields. A R380 browser can be identified at the server side by the contents of the HTTP/1.1 ”...

  • Page 7: User Interface Issues

    USER INTERFACE ISSUES The Browser Display The Ericsson R380 display is a grey scale black and white touchscreen with a resolution of 360x120 pixels with 0.23 pitch. This means an active screen size of almost 83x28mm. The browser display has three sections: the Browser Area, the Card Title bar at the top, and the Toolbar to the right.

  • Page 8: The On-Screen Keyboard

    Toolbar The Toolbar is an area containing buttons required by the browser. The On-screen Keyboard Text input is done with on-screen keyboards or a character recognition screen. Three different keyboard layouts are available: an alpha layout, a numeric layout and a layout with national characters.

  • Page 9: Design Components

    Using Text Font Size and Font Style The font used in R380 is a proportional font. A proportional font gives a dynamic and minimized width for each character, which improves readability of the displayed texts. This generally allows more characters to be displayed per line.

  • Page 10: Line Spacing And Line Breaks

    Line Spacing and Line Breaks The line spacing in the R380 browser is single line with one additional pixel before the line and one after. If a line is too long to fit horizontally in the browser area, the line will be word- wrapped onto multiple lines.

  • Page 11: Paragraphs

    Paragraphs Text on a WML card comprises one or more paragraphs. A paragraph always starts on a new line and is preceded by an extra line space of 3 pixels. Text within a paragraph is by default displayed left aligned. However, it can optionally be displayed right aligned or centered.

  • Page 12: Indented Paragraphs

    Indented Paragraphs Related text and other components can be grouped together to increase usability. Such groups can be nested. Each group is indented 20 additional pixels and preceded by an extra line space of 3 pixels. A header in bold font can optionally precede a group. In such a case a so-called hanging indent applies.

  • Page 13: The Card Title Bar

    The Card Title Bar Card Title Bar on page 5. The title in the Card Title bar is defined by using the Using Select Lists A select list is an input component that specifies a list of options for the user to choose from. Single and multiple choice lists are supported.

  • Page 14: Multiple Choice Lists

    Text in the title An example of a single choice list <p> <b>Select Pizza</b> <select> </select> <a href="#pizzainfo">What's On</a> </p> <p> <b>Select Size</b> <select> </select> </p> Multiple Choice Lists A multiple choice list is used for the selection of zero, one or more items in a list. The list is presented as a number of check boxes, one for each choice.

  • Page 15: Using Buttons

    select element Attribute Description multiple Yes and No. The default value is No. To create a multiple choice list, this attribute is set to Yes. option element option Text in the element content is displayed to the right of the check box using the Normal regular font.

  • Page 16: Using Input Fields

    Buttons are defined by using the Pressing the button invokes the action defined in the The R380 supports the following attributes: Attribute label type Note: to create unique bindings. <p align="center"> <do type="accept" label="Continue"> <go href="#third"/> </do><br/> </p> Using Input Fields Input fields are the only components enabling a user to enter text.

  • Page 17: Using Images

    Name<input type="text" title="Enter name:" name="name"/><br/> Address<input type="text" title="Enter address:" name="address"/> </p> Using Images The R380 browser supports images in WAP bitmap (WBMP) and GIF formats. WBMP supports black and white. If the GIF format is used, three different “colors” are available: White 0% black...
  • Page 18 However, the R380 user can choose not to load images at all. In this case, the placeholder is permanent. There is no limitation on the height of an image. A user must scroll in order to view a large image.

  • Page 19: Using Hyperlinks

    An image example <p align="center"> <img alt="baker"src="baker.gif" vspace="5" width="40" height="30"/><br/> <b>The oven is turned on, and your pizza will be delivered just in time.</b><br/> </p> Using Hyperlinks Hyperlinks are underlined text or a graphic that can be tapped to navigate within a deck or go to a new deck on a WML site, to initiate a voice call or to start composing an e-mail.

  • Page 20: Using Images As Hyperlinks

    An image can also serve as a link. By default, there are no differences in image layout if the image serves as a link or not. However, the R380 browser can be set to show image links with a frame of 1 black and 1 white pixel. This affects the card layout.
  • Page 21 In addition to text and images, tables can also contain hyperlinks and images used as hyperlinks. table element is used together with and images. element is used as a container to hold a single table row. element is used as a container to hold a single table cell data. Attribute Description align...
  • Page 22 <tr> </tr> <tr> </tr> </table> </p> </card> The Pizza Penguin <card id="first" title="Pizza Penguin" newcontext="true"> <p> <table align="cc" columns="2"> <tr> <td> <td> </tr> </table> </p> </card> <td>Rain</td> <td>Overcast</td> <td>Partly Cloudy</td> <td>Sunny</td> <td>Sunny</td> <td>5-10&#176;C</td> <td>6-7&#176;C</td> <td>10-11&#176;C</td> <td>10-14&#176;C</td> <td>14-20&#176;C</td> example table <a href="#second"><img alt="Penguin" src="bigpenguin.gif" hspace="4"...

  • Page 23: The Pizza Penguin Example

    THE PIZZA PENGUIN EXAMPLE Below is a complete WML code listing from a WAP demonstration application. The examples in the previous chapters were mainly selected from this application. <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="first" title="Pizza Penguin" newcontext="true"> <onevent type="ontimer">...
  • Page 24 <p> <b>Select Extras</b> <select title="Extras" multiple="true"> </select> </p> <p align="center"> <do type="accept" label="Continue"> <go href="#third"/> </do><br/> <a href="#fifth">[Contact Us]</a>&#160;&#160;&#160; <img alt="Penguin" src="xspenguin.gif" width="11" height="19"/>&#160;&#160;&#160; <a href="#first">[Go to Start]</a> </p> </card> <card id="third" title="Delivery"> <p> <b>Please Enter Your Name and Address</b> </p>...
  • Page 25 </p> </card> <card id="sixth" title="Oven On"> <p align="center"> <img alt="baker" src="baker.gif" vspace="5" width="40" height="30"/><br/> <b>The oven is turned on, and your pizza will be delivered just in time.</b><br/> </p> <p align="center"> <a href="#fifth">[Contact Us]</a>&#160;&#160;&#160; <img alt="Penguin" src="xspenguin.gif" width="11" height="19"/>&#160;&#160;&#160; <a href="#first">[More Pizzas]</a>&#160; </p>...

Table of Contents