Active Frames

A nice and smart description about Active Frames

An Active Frame (application cover) appears on the running apps panel on the home screen. Users tap a frame to re-open the app.

As you decide whether to create a 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 and 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 frame.
This screen shows examples of active frames.

Best practices

For all-touch smartphones, 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 physical keyboard, 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 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.

Put the most important information near the top of the frame. Only the top half of the frame appears on BlackBerry smartphones with a physical keyboard.

Avoid putting too much information on the frame.

Header

You can make the header a solid color or make it semi-transparent if you'd like 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.

All-touch smartphones:

This image shows an active frame with a header.

Physical keyboard smartphones:

QWERTY_Active_frame_with_header

Grid

You can lay out images in a grid format.

All-touch smartphones:

This image shows an active frame in grid format for all-touch smartphones.

Physical keyboard smartphones:

This image shows an active frame in two-column grid format for smartphones with a physical keyboard.

This image shows an active frame in two-column grid format with a header for smartphones with a physical keyboard.

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.

All-touch smartphones:

This image shows an active frame in list format for all-touch smartphones.

Physical keyboard smartphones:

This image shows an active frame in list format for smartphones with a physical keyboard.