Site Layout and Aesthetics

CCLE Site Design

This short document outlines some basic concepts that should be kept in mind while creating content on a CCLE site.

CCLE course sites are designed following a three-column structure, in which the primary content is focused in the center, a smaller column of “widgets” is located on the right side of the page, and a collapsable site navigation drawer is located on the left side of the page . 

As is the case with many Learning Management Systems (LMS—i.e. Moodle, Blackboard, Canvas) and Content Management Systems (CMS—i.e. Wordpress, Joomla, Drupal), this structure prioritizes creating and arranging course materials in a modular fashion to aid with navigating through a variety of search and browse features.

Document Topics

  • Headers

  • Colors

  • Blocks

  • Moving Materials

Headers

CCLE utilizes coded formatting options to achieve different font sizes.  Other than the typical paragraph format, there are a number of header options.

Headers should always be used in a hierarchical fashion, in order: H1, H2, H3, etc.  Thus the title of a page, which will appear in the largest font, should be H1. Section headings can then be H2 with further delimitations utilizing H3 and so on.   Different levels of headers not only create differentiation but also are an essential way for screen reading software to indicate the importance of topics. Coding that is associated with a header is also used for indexing and other purposes.

The primary place users will come across the option to utilize headers is in any text editing box.  Below is a screenshot showing an editing box with the text format button circled in red. The options that this dropdown menu provides are shown in a subsequent screenshot.


Colors

CCLE uses different colors to distinguish the various purposes of the graphical user interface (GUI): 

  • Blue is used to label administrative commands (such as “Ask me later”, for setting the copyright status of items on your site), and often indicate the location of repositories (entire courses, sections within a course, breadcrumbs from navigating throughout a course hierarchy).

  • Orange is used for buttons that will allow broad structural editing to a CCLE site (“Turn Editing On,” “Modify Sections,” etc.)

  • Red is used to give warnings and errors.  For instance, if you attempt to set an assignment’s due date to be before the date the assignment is accessible, you will receive an error message in red.

Note that these system colors are different from text color options available to the user.  Text can be red, yellow, green, blue, black, or white.  These are also colors available for backgrounds. Remember to consider accessibility and various vision capabilities of users when choosing font colors (see “Color choices” in the “Documentation (Style Guide)” document).

Blocks

Materials on CCLE sites are arranged in blocks, or individual page elements that can be rearranged in a number of different ways. This is a common organizational scheme for web based content systems.  

In the case of CCLE, default blocks are found on the left and right of a screen.  The left side houses navigation elements (the various sections of a CCLE site) in the navigation drawer, under which a user can find the administration block.  The right side is generally reserved for add-on blocks, such as “Respondus Lockdown Browser,” “Calendar,” and “Kaltura Media Gallery,” among many others.

In the sceenshot below, we see a typical course site.  The left column contains navigation elements for the course in the navigation drawer, and below those elements is the Administration block. 

Note: The navigation drawer is collapsable via the“x” button (located in the top left of the screen and circled in red in the first screenshot below) should you want to hide it. The “hamburger” icon (also located in the top left of the screen, and circled in red in the second screenshot below) will expand the drawer to reveal the navigation block.

 

The “Add a Block” function can be found in the right side column of a given CCLE site when editing is turned on. Adding a block may be necessary in order to add desired functionality (such as Respondus Lockdown Browser).  The below screenshot shows the same course page as above, but with editing turned on. The Add A Block section is seen on the right.



Moving Materials

Moving and arranging materials, activities, resources, etc, is one of the most common tasks on a course site. There are a number of ways to move materials, but all methods require that editing be turned on via the orange button in the top right of a course page.

Note: ‘Materials’ refers to anything that can be added to a site - activities, text, etc.

Moving within a section

While in a particular section, materials can be arranged by dragging  the four-way arrow next to an individual item and to the desired location.  Alternatively, you may click the four-way arrow, resulting in a pop-up window that will ask you where on the page you would like to move the item.

Material titles can also be indented by clicking the red edit button to the right and selecting move right.  Indenting can be helpful for grouping and nesting materials. The screenshot below shows both the elements in a typical class site setting.


Moving items between sections

With editing turned on, a Rearrange Materials button can be found at the top left of the CCLE course page.  This takes users to a screen where materials can be arranged and moved throughout the entire site.

The Rearrange materials page is seen in the below screenshot.  Hovering the mouse over any individual item changes the point to a four-way arrow, meaning the item can be moved.  Arranging materials is done through clicking and dragging.

A user can also move around sections on this pane.

Note: Be sure to click the blue “save changes” button when you’re satisfied with the arrangement of your materials.

The rearrange panel can also be accessed via the Admin Panel.  The Admin Panel button is always found in the top right corner of a screen and provides access to a suite of basic functions.  One of these, seen in the screenshot below, is Rearrange Course Materials.  Clicking this selection will bring the user to a screen identical to the one seen above.


Add/Modify Sections

How to add sections:

  • Turn editing on via the Orange button at the top right of the course screen

  • Click Modify Sections at the top left of the screen

  • Select Add New Section at the bottom of the list.  Click this button as many times as necessary to get the needed number of sections, then click Save Changes.


Further Documentation