User Interface

Mobile WebWearable Web

Dependencies

  • Tizen 2.4 and Higher for Mobile
  • Tizen 2.3.1 and Higher for Wearable

Related Info

The W3C specifications provide HTML and CSS, which are the core technologies for building Web pages and Web applications. With HTML, you can define the structure of the application screens, while CSS allows you to define the look and feel of the screens.

The main HTML and CSS features are:

  • HTML features

    HTML is the language for describing the structure of the Web pages.

    • HTML Priorities in mobile and wearable applications only

      Enables you to use CSS and JavaScript code effectively with HTML elements.

    • HTML5 Forms in mobile and wearable applications only

      Enables you to easily implement Web forms for user input using HTML5 elements.

    • Selectors API (Level 1 and 2) in mobile and wearable applications only

      Enables you to select element nodes in the DOM tree by matching them against a group of selectors.

    • Media Queries in mobile and wearable applications only

      Enables you to define media features for specific output devices using the CSS media queries.

    • Multiple Screen Support in mobile applications only

      Allows you to create an application that is both scalable and adaptive to multiple screen resolutions.

    • Multiple UI Layouts in wearable applications only

      Allows you to design your application layout so that your application can run on multiple Tizen devices.

    • Frame Flattening in mobile applications only

      Allows you to improve the scrollability of small screens.

    • HTML5 Session History in mobile and wearable applications only

      Enables you to manage the browsing history of a device.

    • Clipboard API and events in mobile applications only

      Enables you to copy content and paste it in an editable area.

    • HTML5 Drag and Drop in mobile applications only

      Enables you to create and manage draggable elements and implement drag events.

  • CSS features

    CSS is the language for describing the presentation of the Web pages, including colors, layout, and fonts.

  • Designing for multiple screens

    Tizen supports various device types with several different screen sizes.

    To provide an optimal user experience, it is important to design your application to support different screen sizes. In addition to different devices, you must also consider system configuration changes, such as the default home screen layout and system fonts after OS upgrades, since they can change the size of the viewable content screen. Such changes affect the application layout, and can lead to an undesirable UI design layout. Use the following topics to design your application to be highly flexible and adaptive against these possibilities.

    • Multiple UI Layouts in wearable applications only

      Allows you to design your application layout so that your application can run on multiple Tizen devices.

    • Multiple Screen Support in mobile applications only

      Allows you to create an application that is both scalable and adaptive to multiple screen resolutions.

    • CSS Fonts Module (Level 3) in mobile and wearable applications only

      Enables you to define the font-face and font-family, to avoid layout incompatibility due to the default system font changes after OS upgrades.