Designing for 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 adjust based on the screen size. If you use custom UI components, try dynamic layouts such as a dock or stack layout.

The screen size for the BlackBerry Z10 smartphone (the first BlackBerry 10 touch device) is 768 x 1280 pixels. However, future BlackBerry smartphones will have the following screen sizes:

• All-touch smartphones: 720 x 1280 pixels (16:9 aspect ratio)
• Smartphones with a physical keyboard: 720 x 720 pixels (1:1 aspect ratio)

Tips for the square screen

Best practices for optimizing layouts

Make sure that 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'll likely need to manually adjust the sizes and positions of your UI components to fit different screen sizes.

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

Make sure that segments don't use too much space. Consider making static segment controls scrollable with the main view to ensure 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 will expand to fit any screen resolution.

Don't create landscape-only views and features for smartphones with a 1:1 aspect ratio. Landscape mode is not supported on smartphones with a square aspect ratio.

Best practices for focusing on content and primary tasks

Make sure that the most important information is visible. Use the 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 clearly shown in both screen sizes. Show and hide UI components based on mode.

Optimize screen real estate. As users scroll, 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 allows users to focus on the content instead of the component.

Consider how camera sensors and media formats use a different aspect ratio. 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

Adapt 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, re-organize. If you can't optimize your split-screen views, consider removing them for smaller screens.