Creating styles for dynamic content

Fonts and properties

Use a cascading style sheet (CSS) to specify relative measurements for fonts rather than absolute values such as pixels (font-size: 12pt). This is important on a mobile device because:

  • A font size that is just right for the desktop is often too small to read on a mobile device.

    For example, many web pages use font-size: 12pt. If viewed on a mobile device with a resolution of for example 640 x 360 pixels, the font is very small.

  • A font size defined in pixels does not scale if the mobile device user changes the font size setting.

    Web developers sometimes find this desirable on desktop web pages so that they can maintain the integrity of their content but this can be very frustrating to mobile device users.

    Note that fonts do scale when zoomed regardless of how they are defined.

  • Some mobile devices have a set number of fonts.

    If pixels are used in these cases, the mobile device determines the font that is closest in size and uses that. There is no guarantee that the size you define is the size that is used.

Using relative values is good because the mobile device automatically maps those values to a font size appropriate for the screen size. For example, all of the following are relative to the mobile device default font size:

  • em—ems, where 1.0em is the default font size.

  • %—where 100% is the default font size..

  • absolut-size keywords—where medium is the default font size.

  • +/-—where the size is larger or smaller than the default font size.

Use a CSS to specify relative measurements for properties such as borders, margins, padding, and so forth. You can use the following relative units to specify the characteristics of elements such as tables, lists, and so forth:

  • em—ems, relative to the height of the element's font.

  • ex—x-height, relative to the lowercase character x.

  • px—pixels, relative to the canvas resolution. Although you can use pixels, it is not recommended.

For example, the following example specifies fonts and margins that are based on relative values:

h1 {
    display: block;
    font-size: large;
    margin: .67em 0 .67em 0;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: medium;
    margin: .83em 0 .83em 0;
    font-weight: bold;
}

HTML media attribute

WRT does not support the HTML media attribute (<link rel="stylesheet" href="handheldstyles.css" media="handheld"/>, which specifies the intended medium for style information. However, it may still be a good idea to label any mobile-specific CSS styles with the media type because support may be added in later browser versions.

Widget examples

For an example of how to use CSS to design widgets for multiple screen sizes, see the AccuWidget Example on Forum Nokia.

If you want more control on the screen layout for widgets, you can use separate CSS files that are selected for use according to the screen size. For an example, see STEW: supporting different screen sizes.

Browser examples

For an example of using styles to define web page fonts, see Font style recommendations for the S60 Browser.

© Nokia 2009.