Responding to 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

orientation_1

  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

orientation_2
orientation_3
orientation_4

  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.

 

orientation_5

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

orientation_6

    • 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.

orientation_7

    • 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.

orientation_8

    • 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.

orientation_9

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.