The Accord LMS now comes with a state of the art responsive skin and Learner catalog templates.  These allow the Accord to properly present on any size of device - from 300 pixels wide to over 1000.  The responsive technology can dynamically alter the information architecture to provide a custom layout for both PC and mobile devices.  Mobile bandwidth can be reduced by using images and elements designed for smaller screens, or by entirely hiding specific elements like banner rotators.

Cogent Skin

The new responsive skin is named Cogent. Features include support for three different layouts depending on their width. Depending on the width the menu is either horizontal or entirely drop down and the images resize.  In addition, the horizontal panes automatically wrap (stack) from 3 to 2 to 1 column.

PC Mode (greater than 800 pixels)

• Standard horizontal menu
• Standard Profile Bar
• Supports 1, 2 or 3 columns

 

iPad Profile Mode (600 to 800 pixels)

• Drop Down menu
• Standard Profile Bar
• Supports 1 or 2 columns (third column will wrap automatically)

Mobile Mode (less than 600 pixels)

• Drop down menu
• Condensed Profile Bar
• Supports 1 column (second and third column will wrap automatically)

 


Other Features

• Numerous Container options
• Background, link, heading and container colors can all be customized
• Dynamic resizing of images and the Rotator module

Response Template

The Response template for the Learner Catalog UI has 3 different layouts as well.

PC Mode (greater than 800 pixels)

• Section Heading
• Quick Links
• Vertical Breadcrumbs

iPad Profile Mode (600 to 800 pixels)

• Section Heading
• Quick Links
• Horizontal Breadcrumbs

 



Mobile Mode (less than 600 pixels)

• Quick Links
• Horizontal Breadcrumbs

 



ResponseHorz Template
ResponseHorz is the same as the standard Response template except that the PC Mode is the same as the iPad Portrait Mode.  This template is designed for applications where the PC layout for the Learner Catalog is not 100% of the PC browser window.

Width Sensitive Classes

Another trick we use are 6 classes that can either hide or show content depending on the browser width.  The 6 classes have different display values depending on the width of the browser.  These classes are utilized in the Default.Response.xxx templates started shipping with version 2.14 of the Accord LMS and in the new Cogent skin CSS. Clients are welcome to use these same classes or help organize their content for mixed mode presentation.

• .DisplayPC, .DisplayPCNot
• .DisplayiPad, .DisplayiPadNot
• .DisplayiPhone, .DisplayiPhoneNot

Responsive skin design makes your LMS portal instantly accessible to all devices.

For information on how to create your own Learning Catalog templates, or update existing ones please see our Learning Element Catalog Templates blog article.