Pattern Library

Pattern Library for MyPanel Development

Layout and Navigation

The general layout will include a left navigation panel. The navigation panel is always shown. The goal of the left navigation is to give the user quick access to the most common control panel features. It also shows contextual links to addon products.

In order to support a left navigation panel of 50px (3.125em), the default width of the page will be 1024px. This is to support 1024x768 screen sizes as the minimim display, enabling tablets to be used. The max width of the content will be 910px. (1024px - 50px - 14px for vertical scroll - 50px for margins = 910px)

The navigation will differ between two screen sizes -- 1024x768 as the default and screen sizes at 1200px or greater. This is due to fixed width of cPanel pages being around 900px wide. In the 50px wide left navigation for 1024 wide screens, there is just enough room for icons for the main navigation. In order for this layout to work, all My cluster pages will need to be resized to 910px max-width, which requires minor reformatting of some pages.

For larger screen sizes, the width will be expanded to 1200px. Content size can expand to 960px, the current default width. This allows for an expanded left side menu of 11ems, which is 126px wider. The breakpoint will be set at 1200px.

One key objective of MyPanel is to eliminate the need for a page full of icons that users have to use to find their way around the control panel. In addition, with cPanel, users are required to jump back to the "icon page" to go to a different section of the control panel. Instead, we want to use an easy-to-navigate menu that will help the user get to where they want with a single click. Smooth animation will also be important to give a more "realistic" feel to the navigation instead of stark movements.

A three-tiered menu will be supported, although effort was made to keep it to two-tiered as much as possible.

The larger screen sizes uses an 11em wide navigation vertical panel that shows icons and text for each navigation element. Also hovering over the smaller left nav will display the wider left navigation.

No footer will be required with the new layout.