Responding to orientation

We have just published a new chapter on our App Design Guides : how to handle orientation.

To cater for the different orientations of a range of touch devices, we need to design apps for Ubuntu in a responsive way.

Phone orientations

1. The primary orientation for an app on the phone is portrait.
2. Consider using landscape orientation when we want to have a full screen experience for a single piece of content, such as watching a video, looking at a photo or gaming.
3. A phone app automatically fits in the tablet’s side stage, with a flexible height.

Tablet orientations

1. The primary orientation for an app on the tablet is landscape.
2. Consider portrait orientation when it will help the user engage with your app; for example reading a magazine or writing a long email.
3. By supporting portrait, your app automatically supports split screen.

Responsive strategies

Use these strategies to make your app work on screens of both different sizes and orientations.

Position graphic elements relatively

For ease of use we space graphical elements relatively; to both one another and the screen edges.

Decide how your app might show more or less content

• An app on the tablet’s main stage might show more content than on the phone.

• An app on the phone with a list of content, such as a feed, would show much more content in the side stage as it is taller.

• If your app’s content is larger than what fits in view, for example a map, you might consider showing more or less content depending on shape and orientation.

• If your app’s content is fixed in shape then it can simply scale up or down. For example the same amount of content on the phone would be scaled up on the tablet.

A few last things

1. Use extra space constructively
Consider what content your app could show in extra space, be it the history of a calculator, a list of missed calls or even high scores!
2. If your phone app does not scale, it will remain a fixed height in the side stage.

Hope this helps – and as ever please let us know what you think, these guidelines are a work in progress and will grow over time. Feel free to get in touch with us on the Ubuntu Phone mailing list and the IRC channel.