Would you like to tell us how we are doing?

You bet No thanks

Different screen sizes

Designing a UI to accommodate different screen sizes can be a challenge. If you're designing an app for different BlackBerry smartphones, keep reading to discover ways to design it more efficiently.

If you use UI components that are included in the BlackBerry Application Platform, the components are scaled based on the screen size. If you use custom UI components, try dynamic layouts, such as a dock or stack layout.

See below for the full display specifications of released devices:

Model and input method Display Screen size Aspect ratio Screen density

BlackBerry Z10 smartphone showing the Hub and home screen.

BlackBerry Z10 smartphone

Touch screen

LCD

768 x 1280 pixels

4.19 in

15:9

356 ppi

0.07125 mm (dot pitch)

BlackBerry Z30 smartphone showing the BBM video screen.

BlackBerry Z30 smartphone

Touch screen

OLED

720 x 1280 pixels

4.97 in

16:9

295 ppi

0.0860 mm (dot pitch)


BlackBerry Q10 smartphone showing the Hub and home screen.

BlackBerry Q10 smartphone

Touch screen and physical keyboard

OLED

720 x 720 pixels

3.1 in

1:1 square

330 ppi

0.077 mm (dot pitch)


BlackBerry Q5 smartphone showing the Hub and home screen.

BlackBerry Q5 smartphone

Touch screen and physical keyboard

LCD

720 x 720 pixels

3.1 in

1:1 square

330 ppi

0.077 mm (dot pitch)

Porsche Design P'9982 smartphone showing the BBM chat screen.

Porsche Design P’9982 smartphone from BlackBerry

Touch screen

LCD

768 x 1280 pixels

4.19 in

15:9

356 ppi

0.07125 mm (dot pitch)

BlackBerry Z3 smartphone showing the BBM video screen.

BlackBerry Z3 smartphone

Touch screen

LCD

720 x 1280 pixels

(see note below)

4.98 in

16:9

295 ppi

(see note below)

0.0860 mm (dot pitch)

Porsche Design P'9982 smartphone showing the Clock screen.

Porsche Design P'9983 smartphone from BlackBerry

Touch screen and physical keyboard

OLED

720 x 720 pixels

3.1 in

1:1

330 ppi

0.077 mm (dot pitch)

BlackBerry Passport showing the home screen.

BlackBerry Passport smartphone

Touch screen and touch-sensitive physical keyboard

LCD

1440 x 1440 pixels

4.5 in

1:1

453 ppi

0.0561mm (dot pitch)

The BlackBerry Z3 smartphone's native resolution is 540 x 960 pixels and its screen density is 221 ppi (0.1149 mm dot pitch), but it simulates a 720 x 1280 pixels and 295 (0.0860 mm dot pitch) ppi display, so apps should target those higher values.

Tips for a square screen

Best practices for optimizing layouts

Make sure that your layouts scale across devices. Use dock and stack layouts so that layouts scale automatically. If you created custom layouts in the past, or used fixed or absolute layouts, you might need to adjust the sizes and positions of your UI components manually to fit different screen sizes.

Pay attention to background bitmaps and assets that use the full screen. If you created custom bitmaps and assets for larger BlackBerry smartphone screens, you might need to scale those assets by 94% if you want to use the assets for smaller BlackBerry smartphone screens.

Make static segments scrollable. Consider making static segment controls scrollable with the main view to make sure there's enough space to present the information they contain.

Rethink background images. Consider using a repeatable background pattern instead of a static image. Repeatable patterns expand to fit any screen resolution.

Don't create views in landscape orientation for smartphones with a 1:1 aspect ratio. The BlackBerry Application Platform does not support landscape orientation on smartphones with a 1:1 aspect ratio.

Best practices for focusing on content and primary tasks

Make sure that the most important information is visible. Use non-sticky mode for titles and filters. Adjust the initial scroll position of views so that the most important information is in focus. Reconsider the organization of your content so that vital information is shown clearly.

Optimize screen real estate. Consider allowing UI components such as title bars to scroll out of view. If you're designing an immersive application, such as a video player, where users typically stay in the application for a significant period of time, UI components should disappear from the screen after a few moments with no interaction and reappear when a user starts interacting with the screen again.

Make UI components semi-transparent if they overlap with content such as pictures. This effect allows users to focus on the content instead of the component.

Consider how camera sensors and media formats use different aspect ratios. When you are using the camera, or displaying photos or video, consider whether it's better to crop to maximize the content area or scale to show the full content.

Best practices for optimizing split-screen views

Adjust the height of each view. Review and optimize the height of each view so that there's enough room for users to see and interact with the content.

If you cannot optimize, remove. If you can't optimize your split-screen views, consider removing them for smaller screens.



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

comments powered by Disqus