Would you like to tell us how we are doing?

You bet No thanks

Active Frames

An Active Frame (also called an application cover) appears on the home screen. Users tap an Active Frame to re-open the app.

When you are deciding whether to create an Active Frame for your application, consider the following:

  • Is there a single item that users should know about when the app is minimized (for example, a calendar shows the next event or a weather app shows the current temperature)? If so, create an Active Frame.
  • Is it more important for users to see the state of the app when it is minimized? If so, you don't need to create an Active Frame. A scaled-down version of the current app screen displays as the Active Frame.
Screen showing Active Frames.

Best practices

For smartphones with a 720 x 1280 screen resolution, create an image that is 319 pixels wide by 437 pixels high. A footer appears automatically and includes the title of your application. The text appears in Slate Pro Font at regular weight and is set to 30 pixels high.

For smartphones with a 768 x 1280 screen resolution, create an image that is 334 pixels wide by 396 pixels high. A footer appears automatically and includes the title of your application. The text appears in Slate Pro Font at regular weight and is set to 35 pixels high.

For smartphones with a 720 x 720 screen resolution, create an image that is 310 pixels wide by 211 pixels high. A footer appears automatically and includes the title of your application. The text appears in Slate Pro Font at regular weight and is set to 30 pixels high.

Future smartphones with a 1440 x 1440 screen resolution can display two sizes of Active Frames. Large Active Frames are 440 pixels wide by 486 pixels high. Small Active Frames are 440 pixels wide by 195 pixels high.

If you add text to the main body of the Active Frame, use the Slate Pro Font at regular weight and set it to 35 pixels high. Set secondary text to 30 pixels high. In some cases (for example, with a time stamp), you can set the font size to 24 pixels high.

Place the most important information near the top of the Active Frame. Only the top half of the Active Frame appears on BlackBerry smartphones with a physical keyboard.

Avoid including too much information on the Active Frame.

Header

You can make the header a solid color or make it semi-transparent if you want a bigger image.

Use Slate Pro Font at regular weight and set it to 25 pixels high. If you include an avatar, make it 50 x 50 pixels.

For devices with a 720 x 1280 screen resolution

Diagram showing measurements for an Active Frame with a header,720 by 1280 screen resolution.

For devices with a 768 x 1280 screen resolution

Diagram showing measurements for an Active Frame with a header,768 by 1280 screen resolution.

For devices with a 720 x 720 screen resolution

Diagram showing measurements for an Active Frame with a header, 720 by 720 screen resolution.

Grid

You can lay out images in a grid format.

For devices with a 720 x 1280 screen resolution

Diagram showing measurements for an Active Frame with a grid, 720 by 1280 screen resolution.

For devices with a 768 x 1280 screen resolution

Diagram showing measurements for an Active Frame with a grid, 768 by 1280 screen resolution.

For devices with a 720 x 720 screen resolution

Diagram showing measurements for an Active Frame with a grid, 720 by 720 screen resolution.

Small and large-sized Active Frames

See below for examples of a large and small Active Frame, which can be used on future devices with a 1440 x 1440 screen resolution.

A large Active Frame, with a list view

Diagram showing a large Active Frame with a list view.

A small Active Frame, with a grid view

Diagram showing a small Active Frame with a grid view.


Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus