Structure & Responsiveness

Follow these guidelines to composing pages and screens in our product. Have questions? Talk to Annie at [e-mail].

Overall Structure

1. We have three structures: default, collapsed navigation, and fullscreen.

2. Each structure is split by:

   1. App frame: global elements including navigation and top bar. More here.

   2. Page content: Within the app frame - an inner area comprised of page-specific content. See more about how the page content here.

Default

Collapsed

Fullscreen

Width and Responsiveness

1. We use page content gutters to deal with different screen sizes. The gutters expand to accommodate larger screens and the content has a fixed maximum.

2. We actively support screens from 1280px by 800px up to 1920px by 1080px, which means we easily fit into 96% of desktop screens. We haven't prioritized responding to tablets because we we don't have feedback that people are using Customer.io on tablets.

3. We design wireframes in 1366px by 768px screen size because it is the most commonly used screen size (35% of desktops).

Default

1. Side navigation: Fixed width of 226 px

2. and 6. Page gutters: Minimum of 16px but grow to respond to screen size

3. 4. and 5. Content area: Minimum of 1022px, maximum of 1108 px. If there is a gutter, as in a two-column layout, it's fixed at 16px.

Collapsed navigation

1. Collapsed side navigation: Fixed width of 82 px

2. and 6. Page gutters: Minimum of 16px but grow to respond to screen size

3. 4. and 5. Content area: Minimum of 1166px, maximum of 1252 px. If there is a gutter (#4), as in a two-column layout, it's fixed at 16px.

Fullscreen

1. and 5. Page gutters: Minimum of 16px but grow to respond to screen size

2. 3. and 4. Content area: Minimum of 1248px, maximum of 1334px. If there is a gutter (#3), as in a two-column layout, it's fixed at 16px.