Layout

Page layouts offer a range of options for structuring screens in applications. They help organise content and make the user interface understandable.

When and how to use this pattern

Applications need at least one layout scheme, and may use more than one throughout, depending on the context. This guide aims to outline when the various layouts are most appropriate.

Layouts are divided into two areas:

  • Page layouts
  • Content layouts

Page layouts

Applications should only use one page alignment overall, to avoid an inconsistent and jarring experience.

Fluid (default layout)

The fluid page layout is the default page layout for Atlassian applications. It provides maximum space for content in all sizes, and leaves control over the size of the UI to the user by automatically adjusting to fit the size of their browser. An issue to be aware of is that some types of content (like large bodies of text) can become hard to read due to excessively long line lengths if nothing is done to mitigate this.

Fixed width

The fixed width page layout deliberately constrains the overall width of the content and horizontally centers it on the page. This gives the designer more control and can be useful for when a more predictable layout with easy to read line lengths are needed. Conversely, it constrains the amount of space available to content and takes away control over presentation from the user.

Hybrid

The hybrid page layout combines the fluid design for the application header with a fixed width design for the rest of the content area. It should only be used in cases where a fixed width page layout is desirable but where the Application header might contain a large number of items.

Different structures can be applied to the main content area of a page to suit different purposes.

Content layouts

Content only

The content only layout maximises the space available for content. It provides more horizontal space than the other layouts, and is therefore ideal for displaying wide tables and other large user interface elements. Conversely, it doesn't provide any structure for grouping and separating elements.

Sidebar and content

The sidebar and content layout has a column for vertical navigation to the left of the content area, which is useful for when a long list of navigation links is necessary. See Vertical navigation and Horizontal navigation for more detail.

Content and aside

The content and aside layout has a column to the right of the content area. The sidebar is used for supplementary content, which would otherwise interrupt the flow of content in the main content area.

Sidebar, content and aside

The sidebar, content and aside layout is a combination of the three layouts mentioned above. This layout can be used when a Vertical navigation is required as well as a two column structure in the content area.

Focused task

The focused task layout has a smaller, fixed width content area that is horizontally centered on the page regardless of which page alignment is applied. See Focused task page for more details.

What happens if …

  • my application needs more than one layout? There are good reasons to have different content layouts within an application, and this is quite commonly seen in applications. However, the overall page layout of the application should remain consistent.
  • my application has a screen that would benefit from no structured layout at all, for example a wall projection screen? Certain uses require content to have the maximum available screen space. This, however, should be treated as an exception to the rule, with the understanding that the user flow from one screen to the next is disrupted by such a design.