OCL CMS Office Hours, April 29, 2020

Name: OCL CMS Office Hours, April 29, 2020
Uploaded: 2020-04-29T15:32:05.000Z
Duration: 1 h 52 min 57 s

Introduction

The speaker introduces the live stream and greets the audience.

Speaker's Introduction

The speaker welcomes everyone to the live stream.

A cat is mentioned in passing.

The speaker acknowledges that this may be a recording.

Review of Pages on Example Sub-Site

The speaker reviews the pages on an example sub-site, including home page, content pages, and advanced elements.

Pages on Example Sub-Site

The home page has a banner image at the top and a breadcrumb for navigation.

Content pages have a breadcrumb at the top for navigation.

A grid layout container is used for main content sections.

Text blocks are used in left-hand sections of grid layout containers.

Flex boxes are used for promo elements in right-hand sections of grid layout containers.

Flex grids contain promos for three pages created by users.

Navigation bar can only be changed by webmasters.

Meet the Staff Page

The speaker discusses how staff listings work on a meet-the-staff page.

Staff Listings

Staff listings use profile elements that pull data from databases.

Select data is used to search staff listings by name or other criteria.

Logical operators must be used correctly when searching staff listings.

FAQ Page

The speaker discusses an element called "FAQ" that is useful for frequently asked questions.

FAQ Element

An element called "FAQ" can be used to create frequently asked questions pages.

Designing Long Pages and Quality of Life Elements

The speaker discusses the benefits of using long pages and quality of life elements for users. They also introduce anchor links and back-to-top links to improve user experience.

Benefits of Long Pages

Users are accustomed to infinite scrolling on mobile devices and social media.

Long pages can be less intimidating than in the past.

Quality of life elements should still be provided for users.

Anchor Links

Anchor links allow users to jump to specific sections on a page.

Useful for long pages with multiple sections.

Can improve user experience by making it easier to navigate content.

Back-to-Top Links

Back-to-top links allow users to quickly return to the top of a page.

Useful for long pages where scrolling back up can be time-consuming.

Improves user experience by providing an easy way to navigate content.

Best Practices for FAQ Pages

The speaker provides best practices for creating FAQ pages, including dividing text blocks into questions and answers, avoiding large text blocks, and being mindful when updating large text block elements.

Dividing Text Blocks

Consider dividing FAQ text blocks into separate question and answer sections.

Helps make content more readable and organized.

Avoid Large Text Blocks

Large text blocks can be difficult to update if changes need to be made later on.

Consider breaking up large text blocks into smaller ones as needed.

Updating Large Text Block Elements

Be mindful when updating large text block elements as they can cause errors or crashes if not updated properly.

Consider breaking up large text blocks into smaller ones as needed.

Designing Content Pages with Grid Layouts

The speaker discusses designing content pages with grid layouts, using right sidebars, and optimizing for different screen sizes.

Grid Layouts with Right Sidebars

Use grid layouts with right sidebars to improve readability.

Human eyes can track about 80 characters in a single line before getting fatigued.

Avoid having text go across the whole screen.

Optimizing for Different Screen Sizes

Not every page is created equal, so what works on one page may not work on another.

Test pages on different screen sizes to ensure they look good and are readable.

Use breakpoints to adjust content for different screen sizes.

Optimizing Navigation Bars

The speaker discusses optimizing navigation bars, including testing mobile views and working within tolerances.

Testing Mobile Views

Use developer panels like Chrome's f12 to test mobile views of navigation bars.

Check that elements are properly ordered and optimized for mobile devices.

Working Within Tolerances

Work within tolerances when designing navigation bars.

Don't expect everything to be perfect, but aim for an acceptable level of functionality.

Navigation Bar

The left navigation bar is an important tool for filtering through information and directing users to where they need to go. It's important not to clutter the bar with too many options or get too specific with the wording.

Elements of the Navigation Bar

The navigation elements have a little link bar underneath if it's one of those dropdowns.

Sub-navigation is just a simple boolean yes.

If you want to have sub-navigation, please don't add comments about URL because if they click on that to expand it, it will then take them to a new page and defeat the purpose of your drop-down.

Most of our traffic comes through Google so how you format the content on your page plays a big role in your Google search results and SEO.

CP Tools Page

The CP Tools page is accessible only through Common Spot. It contains tools for content publishers, including guides on accessibility, analytics, and search engine optimization.

Useful Examples on CP Tools Page

There are examples that are useful at the very start.

Textblock tab container hero image with text remember a big banner image it's there hey look at that and this gives some examples it specifies some stuff.

The page examples spotlights are something that I've encountered more recently folks want to really be able to highlight testimonials stories especially with us all being virtual now we need to be able to tell better stories online that can be a useful way to do it right here.

Testimonials and Upcoming Events

The speaker advises against putting time-specific information, such as upcoming events, on the website due to difficulties in maintaining it. They suggest using testimonials instead.

Considerations for Website Content

Time-specific information can be difficult to maintain on the website.

It is not recommended to promote upcoming events on the webpage.

Testimonials are a good alternative to time-specific information.

User Interface Kit

The speaker introduces the user interface kit as a resource for styling different elements of a webpage.

Styling Elements with UI Kit

The user interface kit provides examples of how to style different elements on a webpage.

Examples include lists with fancy buttons, tabular lists, and alert boxes.

Tables can also be customized using the UI kit.

Accessing Code with F12 Cursor

The speaker explains how to access code using the F12 cursor and provides an example of customizing an alert box.

Customizing Alert Boxes

To access code, use the F12 cursor and click on an element.

Use div tags instead of p tags for customization.

Alert boxes can be customized by adding classes such as "alert-danger" or "alert-success".

CP Tools and Organization Chart

The speaker demonstrates how to access CP tools and shows where left-hand navigation information comes from. They also mention an organization chart that is not accurate.

Accessing CP Tools and Organization Chart

CP tools can be accessed by going to simas.american.edu/cptools.

Left-hand navigation information comes from the Office of Campus Life section.

The organization chart is not accurate and is linked up to the actual CMS for OCL.

Updating Office Administrator

In this section, the speaker explains how to update the office administrator and why it is important to do so.

Updating Office Administrator

To update the office administrator, email the speaker as it cannot be done by fiddling with the text.

The organization chart in the office administrator may not match the actual organization chart.

It can be frustrating to update but it is necessary.

CP Tools, UI Kit, Utilities and CMS Redirects

This section covers CP tools, UI kit, utilities and CMS redirects.

CP Tools, UI Kit and Utilities

These are tools that can be used for web design.

For any questions or issues with these tools, email the speaker.

CMS Redirects

Do not use CMS redirects on a page.

To redirect a link from one page to another, expire that link under properties and set an expiration date.

Creating New Pages with New Information

In this section, the speaker explains how to create new pages with new information while still holding onto old pages.

Creating New Pages

During times when operations are not normal (such as during fall), new pages with new information need to be created.

Old pages should still be held onto in case they need to be revisited later.

Expiring Links and Redirecting Pages

This section covers expiring links and redirecting pages.

Expiring Links

To expire a link under properties, set an expiration date using the calendar function.

Once expired, actions such as denying access or redirecting can be taken.

Redirecting Pages

To redirect a page from one location to another, use the CMS redirects function.

Do not use CMS redirects on a page.

Adding Anchor Links and Table of Contents

In this section, the speaker explains how to add anchor links and table of contents.

Adding Anchor Links

To add an anchor link, turn text into a link using triple equals hash tag pound sign.

Use H ref to indicate the destination.

Use hash tag name to indicate that it should look for an ID on the same document.

Adding Table of Contents

A table of contents can be added by creating sub-sections with anchor links.

Moving Elements and Code Functionality

This section covers moving elements and adding code functionality.

Moving Elements

Elements can be moved easily using quick move to top or bottom functions.

Code Functionality

To add code functionality, use source in content area to see all code.

Add ID equals web (or other desired name) to first paragraph.

Website Troubleshooting

In this section, the speaker discusses how to troubleshoot common website issues and provides tips for staying productive while waiting for pages to load.

Troubleshooting Tips

Sometimes the website takes a while to load. If you see a "please wait" screen, be patient and wait for it to finish loading.

If everything disappears from the screen, try clicking "return to last common spot."

Use F12 view to check if an ID is present in the HTML code. You can test it by adding "#ID" at the end of the URL.

Don't let perfect be the enemy of good. Be functional with your website even if it's not exactly how you want it.

While waiting for pages to load, do something low-key like checking email or using a tool like Magica Voxel.

Redirecting Pages

If you get an error page that says "page expired," click on "return to last comments pop page." Then click on the link again and choose whether you want to go to the new destination page or view the expired page.

Redirects might not work well if there are changes being made on the CMS. To fix this, go back to properties standard and hit clear and save.

Conclusion

The speaker provides useful tips for troubleshooting common website issues such as slow loading times and disappearing content. They also suggest ways of staying productive while waiting for pages to load. Additionally, they explain how redirects work and provide steps for fixing them when they don't work properly.

Using Alert Messages and Tabbed Containers

In this section, the speaker discusses how to use alert messages and tabbed containers in web design.

Using Alert Messages

Use "au 2016" first when designing a website.

Use the "alert error message" element for most cases.

The "info box" element is represented by an "i" icon.

Keep alert messages short and succinct to avoid overwhelming users.

Using Tabbed Containers

Tabbed containers can be useful for organizing information on a webpage.

They can be used to sort people based on the population you're trying to reach.

Each tab can have different required or optional fields.

Avoid adding too many tabs as it may overwhelm users.

Adding Grid Layout Containers and Flex Elements

In this section, the speaker discusses how to add grid layout containers and flex elements in web design.

Adding Grid Layout Containers

Use grid layout containers with right sidebars for better organization of content.

Add text blocks within grid layout containers for additional information.

Adding Flex Elements

When adding a flex element, make sure to give it a special container using the "flex module."

A flex container must be defined before adding a flex element.

Avoid adding too many flex elements as it may complicate the design.

Flex Grid Container for Right Sidebar

In this section, the speaker discusses the layout of the flex grid container and how it is specifically designed for the right sidebar.

Layout of Flex Grid Container

The flex grid container has a specific layout for the right sidebar.

Designing with Flex Module Text Promo

In this section, the speaker talks about designing with Flex Module Text Promo and advises against trying to replicate designs from other platforms like Word.

Designing with Flex Module Text Promo

Use Flex Module Text Promo to avoid having to deal with images.

Avoid replicating designs from other platforms like Word as they may not match what can be done in Flex Module Text Promo.

Previewing and Adjusting Elements on a Page

In this section, the speaker demonstrates how to preview and adjust elements on a page using padding.

Previewing Elements on a Page

Preview elements on a page before submitting them.

Adjust padding to improve the appearance of elements on a page.

Uploading Pages and Checking Accessibility

In this section, the speaker discusses uploading pages and checking accessibility using Siteimprove's Chrome plugin.

Uploading Pages

Submit pages for approval by hitting "submit".

Contact the speaker if there is an immediate need for a page to go live.

Checking Accessibility

Use Siteimprove's Chrome plugin to check accessibility.

Check for flagged errors and address them as needed.

Sharing Live Links

In this section, the speaker discusses how to share live links and navigate to a page using mobile view.

Sharing Live Links

Share live links by cutting out the middle part of the link.

Navigating to a Page Using Mobile View

Navigate to a page using mobile view by hitting F12 and selecting "mobile".

Adding Flex Elements to a Tab Container

In this section, the speaker explains that it is possible to add flex elements to a tab container. They also mention that there may be some limitations to this approach.

Adding Flex Elements to a Tab Container

It is possible to add flex elements to a tab container.

There may be limitations or reasons why this approach may not work in certain situations.

Deactivating Pages and Managing Links

In this section, the speaker discusses how to deactivate pages and manage links on a website. They explain why deactivating pages can be useful and how to manage links so that they do not lead to dead pages.

Deactivating Pages

Deactivating a page prevents Google's bots from crawling through it and adding it to search results.

To deactivate a page, go under "Actions" and select "Deactivate Page."

If you need to reactivate the page later, click on "Activate."

Managing Links

When deleting or deactivating a page, make sure all links leading to that page are updated or removed.

Under "Links," check the "Referring Pages" section for all pages referring to the deleted/deactivated page.

Edit links directly if necessary but note that you can only change links on sub-sites you manage.

Reviewing Pages via Email

In this section, the speaker explains how reviewers can view an HTML file of a webpage via email. They also mention some requirements for viewing the file properly.

Reviewing Pages via Email

Use "Send Review Via Email" under "Actions" if you want someone else's opinion before pushing live.

The HTML file can be viewed in a preferred browser but the viewer must be on the campus network.

If not on the campus network, the styling may not appear correctly.

Managing Links Continued

In this section, the speaker continues discussing how to manage links on a website. They explain how to track down links and change them if necessary.

Tracking Down Links

Under "Links," check the "Referring Pages" section for all pages referring to a specific page.

If there is a link just on the page, it will say that the page is referencing it.

To change an element or text of a link, go back to the original page and edit it directly.

Changing Owners

Sometimes ownership of a page gets stuck and changing owners is necessary.

This is done under "Actions" by selecting "Change Owner."

Changing owners is more for troubleshooting purposes.

Overall, this transcript covers managing pages and links on a website. It explains how to deactivate pages, manage links, review pages via email, track down links, and change owners.

Setting up Redirects

In this section, the speaker recommends using X-pyr for page redirects and explains how it can save time. They also caution against relying too heavily on redirects as they can become complicated over time.

Using X-pyr for Page Redirects

The speaker recommends using X-pyr for page redirects.

X-pyr is a good immediate option that can save time when putting a new page live.

Properties standard expiration date is helpful when redirecting from an old page to a new one.

CP Tools and Best Practices

This section covers some useful tools and best practices for working with CP.

Useful Tools

CP tools provide documentation and best practices.

UIKit is useful for creating visually appealing pages.

Best Practices

Use properties standard expiration date to redirect from old pages to new ones.

Track down where a page is referenced to update links.

Conclusion

The speaker concludes by encouraging viewers to reach out if they have any questions or need help. They provide their email address for contact.