Layout

Breakpoints

Layout is highly dependent on screen size. Layout will be shown for each key breakpoint.

Target initial breakpoints are shown below:

Size	Viewport
Xsmall	< 568px
Small	≥ 568px > 768px
Medium	≥ 768px > 1024px
Large	≥ 1024px > 1280px
XLarge	≥ 1280px

General Layout

Medium Screens and Above

Medium screens and above will always show the left navigation pane. The navigation pane is always shown and provides quick access to all control panel features.

Only the 768px screen size is shown below. It is similar to this pattern library in that it provides a smooth transition (.3 sec) when resizing the viewport to smaller than 768px. When the navigation pane is hidden, the small screen layout is exposed.

There are two left navigation panel layouts. The navigation page shows the two options. The left navigation panel is always fixed to the left side of the screen. The top header is also fixed to always be displayed. The footer is not to be fixed, but is to be "sticky", meaning when screen content takes up less space than the viewport, the footer is fixed to the bottom of the window.

Small Screens

Landscape mode for larger smart phones (i.e., iPhone 5/5s/6/6Plus) fall in the Small range. For Small screens, use a fixed header with a hamburger button to expose the navigation menu. In addition, provide a fixed footer with cart, help and logout functions displayed.

The examples below show the iPhone 5 first, then the iPhone 6, both in landscape mode. The iPhone 5 dimensions are 568px by 280px in scrolling mode (non-scroll is 212px). The iPhone 6 has a browser window of 627px x 333px high in scrolling mode (non-scroll is 304px).

XSmall Screens

Portrait mode for smart phones fall in the XSmall range. For smaller smart phones, landscape mode will also fall in this range. For XSmall screens, use a fixed header and footer, and show the hamburger button to expose the menu.

The examples below show the iPhone 5 on the left and the iPhone 1-4 on the right. The iPhone 5 has a browser window of 320px by 528px in scrolling mode (non-scroll is 460px). The iPhone 4 has the same width with a height of 440px in scrolling mode (non-scroll is 372px).

Note: An addition 20px in height can be added when hiding all browser chrome for the Tower web app. This is true for all versions of the iPhone.

For both landscape and portrait modes for Small and XSmall screens — always hide the browser address bar. The user can always get it back by swiping down near the header of the application.

For Tower, the Small and XSmall screen header and footer are always fixed. When scrolling down, hide the header and footer. When scrolling up, show the header and footer.