Layout and responsive behavior

pattern layout responsive

In Dynatrace there are two basic types of views: list views and analysis views. All views are responsive, that means the content adapts to different screen sizes starting from a minimum supported screen width of 360px.

There are some patterns how elements on the screen should be arranged depending on the available space. Let's start with two rules of thumb:

  1. Avoid horizontal scrolling.
  2. The content element decides upon its width and therefore its wrappers width.

View types

Every view contains the following elements:

  • Menu bar (includes e.g. the search field) on top
  • Breadcrumbs below
  • Global navigation (collapsable) on the left

List view

List views are detail views that list content, e.g. hosts or databases. Ususally list views also contain a filter section on the left of the main content area. The main content (the list) is usually placed on a single card (one-column layout).

Analysis view

Analysis views provide various content elements, grouped thematically within separate cards.

View layouts

The layout pattern defines how the view's content behaves, depending on the available space and the actual content. We distinguish between the responsive behavior of cards itself and the responsive behavior of content elements within cards.

Cards
Cards
Content elements
Content elements

Additionally there can be content elements outside of cards. Usually these elements have a fixed position and interacting with them affects the complete view, e.g. buttons that toggle the list representation or a filter field.

If the viewport width is below 1280px, the global navigation is hidden by default. If the navigation is set to visible it appears as overlay on top of the content.

Overlay global navigation
Navigation as overlay on top of the content.

Cards

Cards define the main layout of the view that can reach from a one-column (list views) up to a three-column layout (analyis views).

Cards are ordered by importance of the content, sorted from left to right and from top to bottom. On small screens with space for only one column the card containing most important content is on top followed by one card after another below. On larger screens the available space should be used and the one-column layout should become a two-, three- or four-column layout. The default column breakpoints are the following:

Viewport width
Number of columns
< 1280 px
1 column
≥ 1280 px
2 columns
≥ 2560 px
3 column
≥ 4096 px
4 columns

Have a look at this prototype of a card layout. Resize the browser window to see how the cards rearrange on different screen sizes. (Note: the prototype uses CSS Grid Layout and may not work properly in IE11 and earlier versions of IE.)

Content elements

Cards can contain all types of content elments, usually these elements are components. Content within cards should be resized and rearranged depending on the available space (size of the card) and primarily depending on the content itself.

The minimum width a content element needs (and consequently the minimum width of the wrapping card) depends strongly on the element and the data it displays. A table for example needs more space than a progress circle with a label. The following images show how a group of progress circles can be rearranged:

Columns with content elements

Columns with content elements

Columns with content elements

Margins and paddings

Margins of cards depend on the viewport width, paddings of cards depend on the card size itself.

If the viewport width is smaller than 1280px use an 8px margin, else use 20px.

Layout 1024px
x: 8px
Layout 2560px
x: 20px

Find more about margins and paddings of cards on the card component page.