department menu

New Campus Template Rollout

Table of Contents

Preview Links

The new template is applied to pages on our testing server (www-test.csusm.edu), but it has content copied from about a year ago. We also have not converted all full-width pages (special homepages) for some departments so they may look “broken” right now. That being said, most pages can be found by simply browsing to your normal department page and then changing the web address from “www” to “www-test” to see a new version.

  • To get a representation of a converted site that demonstrates the new full-width, top navigation, standard width sub-pages with updated navigation (as explained in next sections), we recommend CEHHS.
  • For a typical site conversion where no extra work is needed to translate the current site to the new site, you can view many smaller department websites like CCC or Kinesiology.

Full-width vs. Standard Views

We consolidated our templates for “www” (not faculty) into a single template that has multiple view options set via the folder and page properties. This allowed us to keep continuity of design between the full-width views and the standard (interior) views and share the navigation across pages. There are also multiple navigation menu options (explained in next section) between these full-width and standard views.

Standard View (replaces current “interior” template):

The standard view matches closely to the 3-column “interior” page you are familiar with for our current template. However, that standard view no longer uses the “sidebar” (right-hand) space as a property to turn on/off – we automatically converted those sidebar spaces/content into a column format in the body of your pages with this new template. This standard view assumes the use of a left-hand navigation menu space and existing navigation menus will be converted as-is into this new template. Below the navigation menu is a new section for the “Contact Us” information (this used to be a simple email in the footer – now it allows for more details).

Full-width View (replaces current special-use admin templates for some department/college homepages):

The current full-width pages were created by the Web Team after consultation with the department to provide high-interest media with minimal text and act as a high-level portal for areas of interest within the department. One of the drawbacks to these pages was a separate horizontal navigation menu that was not in synch with the interior pages and it required Web Team support to update. There was also a shift in header/footer design between these homepages and the interior pages. The new template fixes these issues by sharing consistent looks for header/footer, and a new menu system that can be used throughout the entire department website in conjunction with a reduced side-navigation menu. This navigation menu is also coming from the same/single navigation file that department authors can edit and publish directly.

Since there are some initial navigation adjustments necessary for departments to synch their horizontal menu items to their current interior navigation, those departments with a full-width homepage right now will be contacted individually about their navigation. For those departments that want to take advantage of this full-width view, it will still require an initial consultation with the Web Team to check the admin-only properties for enabling the view after setup/review of a navigation file that will work with the horizontal menu.

The new template look will not be applied to the full-width pages at rollout, but will be a handled soon after by the Web Team to convert them all before the Fall term. The pages will look similar to the current www headers/footers and horizontal navigation, but they may get some body content style updates to keep link colors and headings consistent with the rest of the site.

Navigation Menu

Standard (left-hand)

Most departments that have the standard "interior" template right now rely upon a left-hand navigation menu that is present on all pages in their site. This menu will be automatically converted to a restyled left-hand menu on the new site/template but otherwise function the same way it did previously. It will still be maintained with the _includes/_nav.inc file that is currently used. The CCC and Kinesiology sites demonstrate this standard menu.

Horizontal (top and left-hand)

The horizontal (top) navigation is now available for all websites and not just for the homepages. With some adjustments to the common navigation file (_includes/_nav.inc) and a properties setting (turned on by the Web Team), your site can utilize the enhanced navigation that is based on sections. This does two things:

  1. A navigation menu spans the top of all pages in your site, overlayed on the banner image, with dropdowns
  2. Sub-pages of your site will still use the left-hand navigation menu as well, but they will be condensed to only show the related pages for the section it resides in (because the other sections are always available from the top menu). The CEHHS site demonstrates this horizontal menu enhancement.

New Features and Future Development

The initial rollout of the template will come with just a few new features, but it positions us for future development that relies on a much more modular and robust framework. Training and self-help guides will be developed and communicated as new features are released, but here are a few things to expect with the rollout or soon after:

Available at rollout/release:

  • Enhanced navigation menu available for all departments and editable with the single navigation file (see "Navigation Menu" section above).
  • Expanded "Contact Us" block -- a dedicated space on the left-hand side of all standard pages (under the navigation menu) to replace the single "Contact Us" footer email address. This new block is editable with the folder level _props.pcf files with additional fields that now let you customize the contact name, add phone numbers, locations, email address that are not just @csusm.edu, and additional notes.
  • Personalized/Secure Content -- a new "log in" option is available from all pages using the new template. This top-right header icon lets our campus community log in with their campus credentials to then have a persistent identity across our pages. At the page level, you (OU Campus authors) can now set restrictions to content based on either their role (Faculty, Staff, and/or Student) or a list of usernames (for workgroups, internal staff, etc.). This log in will also work with snippet-level secure content if you only want to restrict small portions of the page while allowing general access to the rest of the page content.
  • Top banner themes -- There will be a default image used for the banner across all pages (we will likely replace the flowers image prior to release). In some cases, we *may* use a different image for the banner for special events or to go across sets of sites (perhaps each college will have their own shared banner). This is still under review.

Coming soon after rollout/release:

  • Updated 1st slab options for full-width pages -- replacing the current grey-box "hero" images (the text in those blocks are now part of the standard banner) with more options to display images or videos with meaningful stories, links, etc. We expect to have these replacements before the Fall term as we convert the existing full-width homepages to the new template.
  • Personalized Content Enhancements -- With the "log in" ability across all of our pages, we will be able to build in options to enhance user-experience if they are logged in. We do not have these on a definite build or timeline, but examples might look like:
    • Search results catered to roles (Faculty, Staff, and/or Student)
    • Forms auto-filled with fields that we know about (First and Last Name, Email, Department, Phone, etc.).
    • Links to common features (email, mycsusm, etc.) specific to roles
    • News and Events feeds pushed based on roles or via individual subscription
    • Bookmarked campus pages with notes managed via dashboards
    • Styling based on personal preferences
  • ADDED 7/26 - Image upload auto resizing -- Folders will have image set options that automatically resize images uploaded to more managable file sizes and make smaller thumbnail copies for index pages. This will reduce load times on pages. 
  • ADDED 7/26 - New OU Campus version -- There is a restylized version of OU Campus available and we are in the process of testing all current features while making new guides and training outlines. This version is not directly tied to the new template so release of this version will be planned on a separate timeline that makes sense for support and workload after we are done with the majority of the template conversions.

Expectations, Training, and Workload

No Immediate Workload Increase

You will not be expected to perform any additional work in order to make this conversion happen. You may choose to make adjustments, on your own timeline, if you want to take advantage of some new features offered with the template (namely navigation updates to switch from full left-side navigation to the combination of horizontal and reduced left-hand navigation). The Web Team will automatically convert and publish most pages, but this also means some pages may get published out to the live site when they should just be in OU Campus. It will be helpful if you make a list of such files so they can either be removed from OU Campus before the rollout or they can be unpublished soon after the rollout.

Training

The new template will be just as easy to use for daily editing of content as our current template, so there will not be an immediate need for retraining. However, there are additional page properties and functionality that you may want to take advantage of with the new template. We will be providing self-help guides to point out those properties and features and our new OU Campus training sessions (not yet scheduled) will cover those features as part of the "Introduction to OU Campus" training. Look for future communication about available trainings as we have not yet determined if special sessions are needed for current authors or if we can rely on self-guided videos to retrain.

Timeline and Rollout Process

We are still finishing up some style and functional adjustments, along with testing, so these rollout points may get adjusted. At this time, we anticipate the rollout looking like this:

  • Week of 7/19: Finish ajustments and testing -- then republish www-test. Publish guides on new properties and over the next few weeks develop short videos for self-help instruction on the new template and features.
  • Week of 7/26: Updated image(s) for top banner. Contacting departments that have full-width pages and inconsistent navigation between homepage and interior pages.
  • Week of 8/2: Since this is likely going to be a crazy time of returning to campus for all staff, we are not scheduling any specific deliverables for this time period, but we will be preparing lists/plans for the rollout and cleanup.
  • Week of 8/9: RELEASE/ROLLOUT WEEK -- A scheduled OU Campus lockout day will be communicated prior to this week so we can have a day of no content changes. During this rollout day, the templates will be swapped along with all related snippets and components in OU Campus. The final step will be a full publishing of content on www.csusm.edu (this will likely publish out some unintended content that will need to be pulled back off www).
  • Weeks of 8/16 and 8/23: The Web Team will work directly with departments that have a full-width homepage to convert those pages/navigation over to the new system. We will also be answering questions and supporting/fixing issues that might arise.

Follow-up/Questions

If you have any follow-up questions or concerns about this rollout process, please contact the Web Team (web@csusm.edu) and we will try to provide a timely response either individually or as part of a list of known issues, FAQ, etc. which will be posted in the next section.

Known issues and Common Questions

  • ISSUE: Full-width pages on www-test either look like there is now layout formatting or they appear like the old design.
    • Full-width pages will be individually converted by the Web Team along with a conversion of the navigation file so that it synchs the interior navigation with the appropriate sections/categories for the top horizontal menu. We will contact departments that use the full-width homepages about these changes, but we expect to have them all completed before the start of the Fall term.
  • ISSUE: Log in header icon not updating to personal initials without a refresh
    • On some browsers/settings, the log in feature (top-right header) will work, but not give an immediate indication with the changing of the icon from "log in" to your initials (like "JR") unless the icon is clicked a second time or the page is refreshed. We are looking into solutions to force a refeshing of the page upon return from the login.
  • ADDED 7/21 - ISSUE: Directory snippet cards view
    • The profile cards need styling and are currently displaying a bulleted list item. This should be resolved soon (before rollout).