Important Links

While working on these global layout updates, we will be taking the opportunity to improve the responsive layout and mobile experience in the browser.

Touch device experience vs. non-touch device (desktop) experience

In order to accommodate for less-fine pointers (e.g. fat fingers ), below a certain screen width threshold, we will need to have UI changes to type sizes, button sizes and other touch target sizes. This means we will have two slightly different experiences when the product is accessed through mobile/tablet devices or on desktop devices below 1200px.

<600px (mobile)

Non-touch devices

Touch devices

The layout is largely the same for touch vs. non-touch devices, but text sizes are increased, icon sizes are increased, button sizes are increased and menu items are increased.

600-

899 (tablet portrait)

Non-touch devices

Touch devices

900-

1199 (tablet landscape + desktop)

With this width, the sidebar is always visible and the RHS (when open) overlaps the main content area of a channel.

Non-touch devices

Touch devices

1201

1200-

1679 (desktop)

For viewports larger than this width, it is assumed that users are not on touch devices and we default to non-touch UI and will not support the two UI experiences above this width.

With this width, when the RHS is open, it will split the main content view rather than overlapping/obscuring it.

1680+ (desktop large)

The only real difference with viewports this wide is the fact that the RHS now becomes 500px wide rather than the standard 400px.