Author: Jon Harp

We recently made some changes for better SEO by removing “index.html” from the ends of many of the links in navigation sections of the web templates. The reason behind this update is to unify the URL patterns across our HTML pages, sitemap, and Google indexes. Why does this matter?

Search engines prefer clean URLs that are easy for users to read and remember. Removing unnecessary parts like “index.html” can help improve our site’s search engine ranking and overall user experience.

In support of this, we’ve updated approximately 200 destination URLs in our main redirects file to remove “index.html.” If you’re adding redirects to your sites or subdirectories in the future, make sure to exclude “index.html” from the destination URL.

Here’s an example of the right and wrong way to set it up:

Incorrect:

RedirectMatch (?i)^/acrec https://www.clemson.edu/public/acrec/index.html

Correct:

RedirectMatch (?i)^/acrec https://www.clemson.edu/public/acrec

Important Note: It’s still acceptable to include “index.html” in the source URL (the first URL column), if you need to target it specifically. For example:

RedirectMatch (?i)^/acrec/index.html https://www.clemson.edu/public/acrec

By following this practice, you’ll help ensure our URLs are SEO-friendly and look a little nicer too!

We’d like to share a couple recent updates the the video player in your Cascade templates. These updates provide a little more flexibility and accessibility for the video elements.

1. You can drop the controls below the player if you have the space and need that section of the video for captions, etc.
2. You can hide volume controls if the video has no volume.

Below you can see some example code that will output your video in these sweet new ways. 

<div class="cu-video drop_controls">
  <video class="video" autoplay="" aria-label="Clemson Works Video" preload="auto" poster="../_images/campus-life/finding-your-community/video.jpg" crossorigin="anonymous" data-transcript="transcript" data-hidevolumecontrols="">
    <source type="video/mp4" src="https://media.clemson.edu/ows/web/community.mp4">								 
    <source class="descriptions" type="video/mp4" src="https://media.clemson.edu/ows/web/community_AD.mp4">
  </video>
  <div class="controls">
    <button class="pause-play playBtn ended">
      <span class="las la-play"></span>
      <span class="las la-pause"></span>
      <span class="las la-redo-alt"></span>
      <span class="sr-only">Video ended. Click to replay.</span>
    </button>
  </div>
</div>

• In the containing div element (with the cu-video class), the additional “drop_controls” class will drop the controls area below the video.
• Notice in the video element above the “data-hideVolumeControls” attribute. That will hide the mute, volume down, and volume up buttons. 

See below for an example of these video settings.

We hope these updates allow you a bit more flexibility and contribute to delivering the Clemson message on your sites.

For more information on video elements and accessibility see the audio and video digital accessibility concepts on the Accessibility Portal.

As the new templates age and we approach the end of the content migration process, our team has been listening to feedback and keeping an eye on how the templates are being implemented and performing. With this redesign, our goal has been to take a proactive approach to making incremental changes that address feedback from users and contributors as well as performance. Through this we hope to constantly improve and update the website rather than go through a full-scale redesign every 10-15 years as we have in the past.

As part of our most recent update some of the default sizing for typographic elements such as paragraphs, headings, and lists have been adjusted to reflect a more proportionally consistent sense of scale and spacing between elements. Scale and proportion were also considered in the initial design, but with this update, a mathematical approach to the values was used to bring them into more precise and cohesive proportion.

These changes mainly targeted the basic instances of these type elements and may not reflect in some of the modules, widgets, and menus. We will be taking a look at the performance and functionality of each of the modules and widgets in the near future and more changes to typography would coincide with that update. 

Detailed below are the main changes from the March 8^th update.

Updates to Default Heading and Paragraph Values

The mathematical basis of these changes start with an update to the default paragraph size from 16px to 18px. This change increases the legibility of our more detailed and lengthy copy and takes advantage of the generous amount of space the larger content area these templates allow. From there this 18px value was used with the minor third typescale(x1.2) to generate incrementally larger and smaller values for the rest of the basic web typographic elements. From here resizing to mobile was as simple as taking each level down one size in the scale.

Addition of max-width value to paragraphs

With this update, a max-width value of 800px was added globally to paragraph tags and lists to help curb unintentional instances of copy that run across the entire width of a page. The ideal line length for legibility is within 45-85 characters, and this update will bring copy closer to those values if they were not originally put into appropriately sized columns. This value was also adjusted to accommodate for some edge cases such as when an image element is contained within a paragraph. While these changes will help, please continue to be mindful of column layout choices to maximize use of space and legibility when building pages.

Moving towards a consistent 8px grid for layouts

Moving towards a consistent 8px grid for layouts

As we continue to revisit the UI elements of the new template, we are seeking to adjust specific sizes of elements to adhere to a standardized 8 pixel grid format.  Along with the font size adjustments, the line-heights for the different type elements may have been tweaked to begin moving towards a standard grid layout for Clemson.edu. These changes will add more consistency to sizing and spacing across the site and ease of design and development in the future.

If you’re interested in learning more, here a few good articles that explain further about using grids for UI design.

• https://uxplanet.org/everything-you-should-know-about-8-point-grid-system-in-ux-design-b69cb945b18d
• https://blog.prototypr.io/the-8pt-grid-consistent-spacing-in-ui-design-with-sketch-577e4f0fd520

Updates to Twitter Icon and the Custom Clemson Fonts

This update also adds a few updates and additions to the Clemson custom icon font. The biggest being the change to the twitter icon to reflect their updated brand. For widgets that add icons automatically through the cascade backend such as the contact widgets and modules, you may have to republish the include files themselves for changes to take effect. For instances where the icon was added manually to HTML or in the content modules of the cascade templates like image and icon buttons, the new classes to use are “clemson-icon clemson-twitter-x” instead of “lab la-twitter”.

Font size information

Attention Cascade users! It seems that Cascade recently made a change to the default setting for displaying asset names. If you prefer to see file names instead of titles or display names (which you should!), you’ll need to make a quick adjustment.

Here’s how you can revert to displaying file names:

1. Click on the user menu dropdown located at the top right corner of your screen. 
2. In the dropdown menu, select “Settings” from the list.
3. In the Settings menu, look for the checkbox labeled “Show asset’s Title or Display Name if available.” Make sure it is unchecked.
4. Once you’ve unchecked the box, click “Submit”.

That’s it! You’ve successfully reverted to displaying file names instead of titles or display names for your assets in Cascade.

If you ever wish to switch back to displaying titles or display names, you can revisit your settings and re-enable the option at any time. We don’t recommend that!

Attention web editors working in Cascade templates: here’s a quick tip to improve user experience.

If you’ve encountered issues with anchor tags scrolling under fixed headers, worry no more. With the .anchor-space class, you can easily add some top space to your anchor tags, ensuring they can still be in the viewport even with fixed header in place.

Simply apply the .anchor-space class to your anchor tags. No more content hidden under fixed header. This should clear up some user confusion.

Check out the example below:

<h2>
  <a id="reading-order" class="anchor-space"></a>
  Reading Order
</h2>

This is still dev-only but will soon be pushed to production.

With the rebrand and launch of the new Clemson News we are making a few changes to the news feeds workflow in order to serve up the best user experience across sites. Below are the details on the philosophy behind the new workflow and how you can incorporate Clemson News into your redesign project.

Organization

There are some organizational changes on the Clemson News site that will affect how feeds are pulled into Cascade. Clemson News uses three primary taxonomies to achieve the new organization: Categories, Tags, and External Site Feeds. (Need to find out more about taxonomies? See the explanation on wordpress.org.)

1. New Taxonomy: Clemson News administrators created a new taxonomy called “External Site Feeds” that can be applied to stories that should be pulled onto the main pages for college/divisions. This new taxonomy is primarily used for main pages, for example college/division homepages, and the main landing pages in the .edu site.
2. Categories and tags will continue to be used for departmental feeds. Be aware that some categories and tags have been recently changed so you will want to utilize the new parameter builder tool I show you below. 

This new taxonomy allows communicators in Clemson News to control what stories funnel to the main .edu website and which should remain only available on the Clemson News site.

Each category on the Clemson News site has a customizable landing page that houses any post in that category. The communications team also heard multiple requests for a way to keep certain stories from being pushed to the main website and the External Site Feeds taxonomy does just that. 

For example, if someone in the College of Education has a story they’d like to push to both the Clemson website and the College landing page in Clemson News she would need to apply both the Category and External Site Feeds selection of “College of Education”. 

Generating the feed

We have an updated parameter builder tool for web editors to pull Clemson News feeds into their sites in Cascade. To get the feed into Cascade just make the taxonomy selections to filter Clemson News content to your specific needs, copy the param string result, and paste that into the News widget in the Cascade editor. Once the page is published it will pull the appropriate stories into the feed on your page.

For a college homepage it may be best to utilize just the external site feed taxonomy, but the builder tool allows you to customize the filter to give them just the feed you need. In the example below the feed has been filtered to show just stories tagged Department of Teaching and Learning in the College of Education category.

You can see the new builder here: ows.sites.clemson.edu/cascade/tools/clemsonnews/builder

OWS recently completed upgrading the Cascade Server content management system service to version 8.1. This long-awaited upgrade allows us more functionality, a new UI with a faster feel, as well as the ability to easily locate documentation.

If you experience any issues with your content please reach out to ows@g.clemson.edu and we’ll help you sort it out.

Cascade CMS Knowledge Base can be found here at hannonhill.com/cascadecms/latest