S40 TS Handset Guidelines

Nokia Series 40 Theme StudioVersion 2.2

Handset GuidelinesSeptember 2006

Copyright © Nokia 2006. All rights reserved.

This document is for use with Nokia Series 40 Theme Studio. Reproduction, transfer, distribution or storage of part or all of the contents in this document in any form without the prior written permission of Nokia is prohibited.

Nokia, Theme Studio Handset Guidelines, and the Nokia Connecting People logo are trademarks or registered trademarks of Nokia Corporation. Other product and company names mentioned herein may be trademarks or trade names of their respective owners.

Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc.

Nokia operates a policy of on-going development. Nokia reserves the right to make changes and improvements to any of the products described in this document without prior notice.

UNDER NO CIRCUMSTANCES SHALL NOKIA BE RESPONSIBLE FOR ANY LOSS OF DATA OR INCOME OR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL OR INDIRECT DAMAGES HOWSOEVER CAUSED.

THE CONTENTS OF THIS DOCUMENT ARE PROVIDED "AS IS". EXCEPT AS REQUIRED BY APPLICABLE LAW, NO WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE, ARE MADE IN RELATION TO THE ACCURACY, RELIABILITY OR CONTENTS OF THIS DOCUMENT. NOKIA RESERVES THE RIGHT TO REVISE THIS DOCUMENT OR WITHDRAW IT AT ANY TIME WITHOUT PRIOR NOTICE.

The availability of particular phone products may vary by region. Please check with the Nokia dealer nearest to you.

Visit Forum Nokia (http://www.forum.nokia.com), the site designed for developers using technologies supported by Nokia.

http://www.forum.nokia.com

Nokia Series 40 Theme Studio 2.2 Handset Guidelines 1

Content

About this document..........................................................................................................................3

Information that applies to all handsets..........................................................................................5Number of screens ......................................................................................................................... 5Animation delay times ................................................................................................................... 5Content type information............................................................................................................... 6

Tables of handset guidelines .............................................................................................................9240x320 display size handsets (version 1) ...................................................................................... 10240x320 display size handsets (version 2) ...................................................................................... 11208x208 display size handsets ....................................................................................................... 12128x160 display size handsets ....................................................................................................... 13128x128 display size handsets ....................................................................................................... 15Graphic zone dimensions ............................................................................................................. 16

Image scaling............................................................................................................................. 16240 x 320 screen size (version 1) ................................................................................................. 17240 x 320 screen size (version 2) ................................................................................................. 19208 x 208 screen size .................................................................................................................. 21128 x 160 screen size .................................................................................................................. 23128 x 128 screen size .................................................................................................................. 25

2 Nokia Series 40 Theme Studio 2.2 Handset Guidelines


About this document

This document contains technical specifications that can help you design a UI theme for Nokia handsets. The document is a supplement to the Nokia Series 40 Theme Studio User Guide.

When referring to Nokia Series 40 Theme Studio, this document uses the abbreviation Nokia S40 TS.Note: The handsets and content types listed in this document are for reference only. For the most up-to-date information, see www.forum.nokia.com/devices and the Browser MIME Types in Nokia GSM Devices at www.forum.nokia.com/documents.The latest version of this document is located in www.forum.nokia.com/themes.The following documents contain additional information about the UI themes:

• Nokia Series 40 Theme Studio Installation Guide

• Nokia Series 40 Theme Studio Release Notes

You can download the documents in www.forum.nokia.com/themes. Nokia Series 40 Theme Studio User Guide and this document are located in the Help menu of Nokia S40 TS.

http://www.forum.nokia.com/themes

http://www.forum.nokia.com/devices

http://www.forum.nokia.com/themes

http://www.forum.nokia.com/documents

About this document



Information that applies to all handsets

The information in this section applies to all handsets and to the Nokia S40 TS application in general. This information can help you develop an awareness of what works in the UI themes and what does not.

Number of screensSome Nokia Series 40 phones have only one screen. Others - for example, fold phones - have two screens:

• Main screen, which you can see only when the phone is open. Through this screen, you can perform any task the phone’s features allow.

• Mini screen, which you can see always, even when the phone is closed. This screen typically has a more limited number of tasks you can perform.

Nokia S40 TS allows you to define many theme elements separately for the mini screen, so that they differ from those on the main screen (for example, the status area font color). Typically, if the handset uses a theme that sets a main screen value and has no corresponding mini screen value, the handset uses the main screen value also on the mini screen.

Animation delay timesA zero delay between the frame display time of an animation causes Nokia S40 TS to run the animation as fast as possible, and can also result in slow loading times for the theme containing the animation. To prevent an animation from running faster on Nokia S40 TS than it does on the handset, you need to possibly adjust the frame delay in the animation. Generally, a zero delay time in animations is discouraged.



Content type informationThe image content types listed in the handset guideline tables are defined in the following table:

The audio content types listed in the handset guideline tables are defined in the following table:

Image type File suffix Content type string

BMP .bmp image/bmp

JPG .jpg.jpeg

image/jpg

image/jpeg

GIF .gif image/GIF87a (static)

image/GIF89a (animated)

M3G .m3g image/m3g

PNG .png image/png

WBMP .wbmp image/vnd.wap.wbmp

(Wireless BMP file)

SVG .svg.svgz

image/svg+xml

FlashLite .swf application/x-shockwave-flash

Audio type File suffix Content type string

AAC

AAC+

eAAC

eAAC+

.aac audio/aac

AMR (NB-AMR) .amr audio/amr

WB-AMR .awb audio/amr-wb

MIDI

MIDI (poly 24)

MIDI (poly 64)

SP-MIDI

.mid audio/midi

audio/mid

audio/x-midi

audio/x-mid

audio/sp-midi

Content type information


MP3 .mp3 audio/mpeg

audio/mpeg3

audio/x-mpeg3

MP4 .mp4 audio/mpeg

audio/mpeg4

audio/x-mpeg4

WMA .wma audio/x-ms-wma

Audio type File suffix Content type string




Tables of handset guidelines

The following tables list:

• The current list of handsets that Nokia S40 TS 2.2 supports, along with the content types they support.

• The various sizes of the customizable UI elements (or zones) for each handset display size.



240x320 display size handsets (version 1)Use the display simulation labelled [240x320] to simulate the following handsets:

Handset 6270 6280 7370 6131 / 6233 6282 6275

Main screen

Area (pixels) 240 x 320 240 x 320 240 x 320 240 x 320 240 x 320 240 x 320

Color 18 bit 18 bit 18 bit 24 bit 18 bit 18 bit

Mini screen

Area (pixels) No mini screen

No mini screen

No mini screen

128 x 160 No mini screen

No mini screenColor 18 bit

Image content types

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.svg

.swf

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.svg

.gif

.jpg

.bmp

.wbmp

.m3g

Audio content types

AAC

AMR (NB-AMR)

WB-AMR

MIDI

MP3

MP4

AAC

AMR (NB-AMR)

WB-AMR

MIDI

MP3

MP4

AAC

AAC+

eAAC+

AMR (NB-AMR)

MIDI (poly64)

SP-MIDI

MP3

MP4

AAC

AAC+

eAAC+

AMR (NB-AMR)

MIDI (poly64)

SP-MIDI

MP3

MP4

AAC

AAC+

eAAC+

AMR (NB-AMR)

WB-AMR

MIDI (poly64)

SP-MIDI

MP3

MP4

AAC

AAC+

eACC

eAAC+

AMR (NB-AMR)

MIDI (poly64)

MP3

MP4

240x320 display size handsets (version 2)


240x320 display size handsets (version 2)Use the display simulation labelled [240x320] to simulate the following handsets:

Handset 5300 7373 7390 6234

Main screen

Area (pixels) 240 x 320 240 x 320 240 x 320 240 x 320

Color 18 bit 18 bit 24 bit 24 bit

Mini screen


No mini screen

160 x 128 No mini screenColor 18 bit

Image content types

.gif

.jpg

.png

.wbmp

.m3g

.svg

.swf

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.svg

.swf

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.svg

.swf

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.svg

Audio content types

AAC

AAC+

eACC

eACC+

AMR (NB-AMR)

WB-AMR

MIDI (poly64)

SP-MIDI

MP3

MP4

WMA

AAC

AAC+

eACC

eACC+

AMR (NB-AMR)

WB-AMR

MIDI (poly64)

SP-MIDI

MP3

MP4

AAC

AAC+

eACC

eACC+

AMR (NB-AMR)

WB-AMR

MIDI (poly64)

SP-MIDI

MP3

MP4

WMA

AAC

AAC+

eACC+

AMR (NB-AMR)

WB-AMR

MIDI (poly64)

MP3

MP4



208x208 display size handsetsUse the display simulation labelled [208x208] to simulate the following handset:

Handset 8800 Sirocco

Main screen

Area (pixels) 208 x 208

Color 18 bit

Mini screen

Area (pixels) No mini screenColor

Image content types

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.svg

.swf

Audio content types

AAC

AAC+

eACC

eACC+

AMR (NB-AMR)

WB-AMR

MIDI (poly64)

SP-MIDI

MP3

MP4

WMA

128x160 display size handsets


128x160 display size handsetsUse the display simulation labelled [128x160] to simulate the following handsets:

Handset 6111 6125 6136 5200 6151 6070/6080

Main screen

Area (pixels) 128 x 160 128 x 160 128 x 160 128 x 160 128 x 160 128 x 160

Color 18 bit 18 bit 18 bit 18 bit 18 bit 16 bit

Mini screen


96 x 65 96 x 65 No mini screen

No mini screen

No mini screenColor 16 bit 16 bit

Image content types

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.svg

.swf

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.svg

.gif

.jpg

.png

.wbmp

.m3g

.svg

.swf

.gif

.jpg

.png

.bmp

.wbmp

.m3g

.svg

.swf

.gif

.jpg

.png

.bmp

.wbmp

Audio content types

AAC

AMR (NB-AMR)

WB-AMR

MIDI

MP3

MP4

AAC

AMR (NB-AMR)

WB-AMR

MIDI

MP3

MP4

AAC

ACC+

eACC

eACC+

AMR (NB-AMR)

WB-AMR

MIDI (poly64)

MP3

MP4

WMA

AAC

ACC+

eACC

eACC+

AMR (NB-AMR)

WB-AMR

MIDI (poly64)

SP-MIDI

MP3

MP4

WMA

AAC

ACC+

eACC

eACC+

AMR (NB-AMR)

WB-AMR

MIDI (poly64)

MP3

MP4

AMR (NB-AMR)

WB-AMR

MIDI (poly24)

MP3



Handset 6103 7360

Main screen

Area (pixels) 128 x 160 128 x 160

Color 16 bit 16 bit

Mini screen

Area (pixels) 96 x 65 No mini screenColor 12 bit

Image content types

.gif

.jpg

.png

.bmp

.wbmp

.gif

.jpg

.png

.bmp

.wbmp

Audio content types

AMR (NB-AMR)

WB-AMR

MIDI (poly24)

SP-MIDI

MP3

AAC

AMR (NB-AMR)

WB-AMR

MIDI (poly24)

SP-MIDI

MP3

128x128 display size handsets


128x128 display size handsetsUse the display simulation labelled [128x128] to simulate the following handset:

Handset 2610

Main screen

Area (pixels) 128 x 128

Color 16 bit

Mini screen

Area (pixels) No mini screenColor

Image content types

.gif

.jpg

.png

.bmp

.wbmp

Audio content types

AMR (NB-AMR)

MIDI (poly24)

SP-MIDI

MP3



Graphic zone dimensionsThe tables in this section give specific dimensions (in pixels) for the UI screen areas (zones) that are customisable for specific Nokia handsets as defined in the Series 40 UI Theme 2.0 specification. These are given to help graphic designers create images that work effectively on Nokia Series 40 handsets.

Image scalingSometimes an image is too large or too small to fit perfectly into the zone (such as Left Softkey Background or Grid Menu Item Highlight) for which it is selected. Depending on the specific zone and the image size, a handset can scale the image up or down. Knowing about the way a handset scales images can help you make decisions about the dimensions of the images you create for a theme.Theme images are scaled differently by Series 40 handsets, depending on where in the handset UI they are used. There are four scaling types the handsets use:

• Best: Images are scaled down until a first dimension fits exactly inside the zone. Any remaining parts of the image are cropped. Smaller images are not scaled up. The original aspect ratio is preserved.

• Down to fit: Images are scaled down until the entire image fits inside the zone (no cropping). Smaller images are not scaled up. The original aspect ratio is preserved.

• Up/down to fit: Images are scaled up or down until the entire image fits exactly inside the zone (no cropping). The original aspect ratio is preserved.

• Stretch: Each dimension of the original image is scaled up or down until the entire image exactly fits inside the zone. The original aspect ratio is not preserved.

All images are centered both vertically and horizontally within their zone.In addition, note that the larger an image is than its target zone, the slower the rendering of the image can become in the handset. For the best image rendering performance, design images that are as close to their respective zone dimensions as possible.Several image types behave slightly differently. The Flashlite renderer scales its content to fit, and then fills the entire graphic zone with the background color, if any. The M3G renderer, because it is a 3-D system, sets the graphic zone as a viewport onto the scene, so the image is never distorted regardless of the shape.The tables below list the sizes and scaling behavior of all UI zones used by Series 40 themes.

Graphic zone dimensions


240 x 320 screen size (version 1)The following table describes the sizes (in pixels) and scaling type for the UI screen zones for 240x320 devices that can be customized as defined in the Series 40 UI Theme 2.0 specification.

* Varying dimension

Zone Size (w x h) Image scaling type

Full screen

Wallpaper 240 x 320 Best

Screen Saver 240 x 320 Best

Startup/Shutdown 240 x 320 Up/down to fit

Flip/Slide Open/Close 240 x 320 Best

Background (Main) 240 x 320 Up/down to fit

Background (Grid) 240 x 320 Up/down to fit

Background (Tab) 240 x 320 Up/down to fit

Background (Radio) 240 x 320 Down to fit

Background (Audio Player) 240 x 320 Down to fit

Background (Calendar) 240 x 320 Down to fit

Common screen zones

Menu Scroll Bar* 250 x 15 -

Softkey Bakcground (Left) 80 x 22 Up/down to fit

Softkey Background (Middle) 80 x 22 Up/down to fit

Softkey Background (Right) 80 x 22 Up/down to fit

Background (Softkey area) 240 x 22 Up/down to fit

Background (Status area) 240 x 46 Up/down to fit

Main menu

Main Menu Icon (List) 46 x 48 Down to fit

Main Menu Icon (Grid) 74 x 62 Down to fit

Main Menu Icon (Grid, animated) 74 x 62 Down to fit

Highlights

Highlight (Main menu, list view)* 224 x 48 Stretch

Highlight (Folder list)* 224 x 48 Stretch

Highlight (Grid) 74 x 80 Stretch

Highlight (Grid reorder) 74 x 80 Stretch

Highlight (Tab menu)* 224 x 28 Stretch

Highlight (Tab shortcut row)* 240 x 48 Stretch

Highlight (Tab icon) 43 x 48 Stretch

Highlight (Active Idle row)* 240 x 25 Stretch

Highlight (Active Idle shortcut row) 240 x 50 Stretch

Highlight (Active Idle icon) 44 x 50 Stretch

Highlight (Forms)* 224 x 34 Stretch



* Varying dimension


Special

Note Background* 236 x 114 Stretch

Wait Graphics 220 x 24 Down to fit



240 x 320 screen size (version 2)The following table describes the sizes (in pixels) and scaling type for the UI screen zones for 240x320 devices that can be customized as defined in the Series 40 UI Theme 2.0 specification.

* Varying dimension


Full screen











Common screen zones







Main menu




Highlights





Highlight (Tab menu)* 224 x 36 Stretch

Highlight (Tab shortcut row)* 240 x 48 Stretch

Highlight (Tab icon) 43 x 48 Stretch







* Varying dimension


Special





208 x 208 screen sizeThe following table describes the sizes (in pixels) and scaling type for the UI screen zones for 208x208 devices that can be customized as defined in the Series 40 UI Theme 2.0 specification.

* Varying dimension


Full screen











Common screen zones







Main menu




Highlights

Highlight (Main menu, list view)* - Stretch




Highlight (Tab menu)* - Stretch

Highlight (Tab shortcut row)* - Stretch

Highlight (Tab icon) - Stretch

Highlight (Active Idle row)* - Stretch

Highlight (Active Idle shortcut row) - Stretch

Highlight (Active Idle icon) - Stretch




* Varying dimension


Special





128 x 160 screen sizeThe following table describes the sizes (in pixels) and scaling type for the UI screen zones for 128x160 devices that can be customized as defined in the Series 40 UI Theme 2.0 specification.

* Varying dimension


Full screen











Common screen zones







Main menu




Highlights














* Varying dimension


Special





128 x 128 screen sizeThe following table describes the sizes (in pixels) and scaling type for the UI screen zones for 128x128 devices that can be customized as defined in the Series 40 UI Theme 2.0 specification. Note that this screen does not have Active Idle, Radio, Audio, or Tab screens.

* Varying dimension


Full screen











Common screen zones







Main menu




Highlights

Highlight (Main menu, list view)* - Stretch







Highlight (Active Idle row)* - Stretch

Highlight (Active Idle shortcut row) - Stretch

Highlight (Active Idle icon) - Stretch




* Varying dimension


Special



Documents

S40 TS Handset Guidelines