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.

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.

List

You can lay out items in a list format. All-touch smartphones have enough vertical space to accommodate a header, but smartphones with a physical keyboard do not. Add a 2 pixel divider between list items.

For devices with a 720 x 1280 screen resolution

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

For devices with a 768 x 1280 screen resolution

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

For devices with a 720 x 720 screen resolution

Diagram showing measurements for an Active Frame with a list, 720 by 720 screen resolution.
comments powered by Disqus