Welcome To Modern Campus!

Take a look at the Modern Campus interface and learn all of the vocabulary and best practices needed to easily edit your Modern Campus site.

Vocabulary

File Types

If you create a site section on your website, all three of these files will automatically be created.

.pcf
The most common file type in Modern Campus, used to generate published .html files. The published .html file will have the same file name.

This is usually a page where you can edit your website content.
_nav.ounav
Automatically generated when a new section is made. This file is used to generate links in the left sidebar navigation.

You do not have to use the left sidebar. However, if you choose to, publish this file and add it to your pages.
_props.pcf
The props.pcf file is used to generate breadcrumb links. Breadcrumbs are a navigational aid that allow users to keep track of their current location on a website or interface.

If it is deleted or if “$skip” is entered into the source of the props file, the current folder will not show in breadcrumbs.

NOTE: Editing the _nav.ounav and the _props.pcf files requires source code access. Not all users will be able to edit them since it relies on permission level.

Two Server System
Staging
Staging is a development (or dev) environment that can only be seen by someone who has logged in and has permission to that site or folder. This is where all content is created and edited. When files, pages or other content is ready to be seen it can be published into the production environment.
Production
Production is the live server and can be viewed by anyone who navigates to the website. Files in production are not editable and files are created when the .pcf file in staging is published.
Snippets, Components, and Assets in Modern Campus CMS
Snippets

Snippets are a type of content that you insert onto a page and can then edit without changing the original file. Often, they are used to make items such as accordions, tables or image frames, where the snippet provides the styling, and the editor fills in unique content as they place it on the page. Snippets are formatted as a table, so while editing snippets the editor will place content into the fields as labeled by the table’s header.

There are several design elements that can be added as a Snippet or a Component. Keep in mind, that if a snippet breaks or needs to be updated (in terms of style or functionality) the snippet content on the page will need to be deleted and rebuilt manually.

Because of this, it is better to use a component over a snippet (when applicable). 

Components

Components are content blocks that the editor populates by putting content into the component form. Modern Campus then populates the component into a preset style and layout. Components are like snippets, but are not tables and can have more complex layouts and interactions.

Generally, it is better to use a component instead of a snippet. This is because components can be updated centrally to fix issues without editors having to rebuild the component on the page.

Additionally, components seamlessly embed external content into Modern Campus pages, such as media, forms and more.

Assets

Assets are files created and managed separately from pages. When users place an asset on a page, you cannot edit the content. However, when an asset file is edited, every page containing that asset is updated to reflect that change.

Assets are useful for placing the same information across multiple pages, such as a university address or phone number. This way, if the information changes, the original asset only needs to be modified once to reflect changes, as opposed to editing the information on each individual page.

Dependency Tags

Modern Campus can link files internally using Dependency Manager Tags, or DM Tags. 

DM Tags follow the format of /sandbox-pages/documentation/editors-guide-source/1-3-accessing-omni.jpg. For assets and select other files, the "f" may be replaced with another letter, like "a". 

They are dynamically tracked. This means if a user moves, deletes or renames a file, they will be notified of pages (on any site in our Modern Campus account) that will be impacted. If the file is moved or renamed, impacted pages only need to be republished for the links to be updated. This means that if the site structure is changed later, all impacted files can be republished in a batch to update all links. 

We recommend using DM Tags whenever possible to link to files in your site or any other UNT site in Modern Campus. 

By using the Gadgets Tool, you will be able to find the DM tags for all of your pages and where exactly those links are used. It is best practice to use DM tags where you can so, if a link or page breaks, it can be fixed with a quick publish of the site.

Checking Pages In or Out

Checking out a page in Modern Campus locks access to one user so that no one else can make changes while that page is being edited. 

To check out a page, simply click the lightbulb icon for the page, turning it yellow. When other users view the page, there will be a red lock icon in the place of the lightbulb. This means the page is locked for editing.

When you're done with your page, make sure you check in the page by re-clicking the yellow lightbulb so others can edit that page. You can make sure all pages are checked in by you by going to your dashboard and looking for pages in the "My Checked-Out Content" section.

Breadcrumbs

Breadcrumbs are a navigational aid that allows users to keep track of their current location on a website. The breadcrumbs usually match your folder strucure and can take users back to the index or home pages on their site.

WYSIWYG

The WYSIWYG stands for "What You See is What You Get" and is a system in which content can be edited in a form that resembles its appearance. Every interior and landing page can be edited in the main WYSIWYG by adding text, snippets, assets and components.

Best Practices

Accessibility
Alt Text on Images

Alt Text on all images is important for accessibility. Alt Text gives screen readers the ability to tell someone what image is there. Make sure your Alt Text description is accurate with plain language. Don't put acronyms or shortened words.

Descriptions on Pages

Descriptions on pages help populate the small description when searching for certain content. This description helps people know what that page is about and know what content they need to click on.

Site Structure

It is important to organize site files in Modern Campus because the file structure generates the URL for each page. In addition, Modern Campus uses a system called Dependency Manager to link different pages internally.

Keeping this in mind, editors should carefully plan their site structure to group files and create desired URLs before making a site. It is important to pay attention to this so that URLs are generated with user navigation and experience in mind.

For example, a page in the [folder] will have the URL of department.unt.edu/[folder]/page-title.html.

Components Vs. Snippets

There are several design elements that can be added as a Snippet or a Component. Keep in mind, that if a snippet breaks or needs to be updated (in terms of style or functionality) the snippet content on the page will need to be deleted and rebuilt manually. Components can be updated centrally to fix issues without editors having to rebuild the component on the page. 

Because of this, it is better to use a component over a snippet (when applicable). 

Site Clean Up
Things won't be one-to-one with the Drupal site so please take your time to reorganize your site structure in Modern Campus during your migration map process.
Hero Standards - Video

We try to limit our use of hero videos because of potential load time issues, but we can put videos in our hero that are downloaded into the Modern Campus system (similar to an image).

Some basic requirements are:

  • Keep the video file as small as possible for faster webpage loading
  • Remove audio to save space
  • Heros play on a seamless loop - Cut the begining and end of the video to make it seamless.
  • 16:9 Aspect Ratio
  • 1800 px wide
  • Fast or Very Fast 720p
  • Try to keep videos 20 seconds and under
  • If possible, download Handbrake
Mobile Optimization

Make sure your site is optimized for mobile by publishing all of your pages and moving the window of your browser in slowly to see how your content fits different screen sizes. This is an important part of your site as most students use mobile when viewing our sites.

Image File Size

Your images will have to be below 1000KB when uploading into Modern Campus. This is so we don't have massic MB files as images on the site. Depending on where someone lives and how great their internet connection is, the photos may take way too long to load otherwise. For faster load times, smaller .jpg files are best for images. 

For more information

see the Modern Campus Editors Guide