Content published to NIU websites should be geared primarily toward recruitment and retention of students. Content for which the audience is inter-office would be better suited offline or on an intranet system (see Document Retention and Storage, below).
5.1.2 Duplicate Content
Do not recreate content that exists elsewhere. Always link to the official online source. For example, link to the official, current catalog using GoURLs established and maintained by the web team for course descriptions and degree requirements; link to the Office of the Bursar for current tuition and fees information; link to Housing and Residential Services for current room and board rates.
5.1.3 Outdated Content
Content should be reviewed every six months to ensure information is accurate. The web team and page managers will periodically perform content assessments, working with the subject matter expert (SME) to determine a plan for updating outdated content. If the SME is unresponsive, the page manager will update or delete the content as necessary.
If web content has not been updated in 12 months, the web team may send out a notification to the user associated with the subdomain. If the user does not respond within 10 business days, the web team will delete the site from the server.
5.1.4 Archival Content
Archival content should be stored outside of Cascade CMS. For example, if past course syllabi need to be archived, they should be maintained by the professor or the department in O365 or, in some cases, University Archives. Another option for archiving work created by the NIU community is Huskie Commons. Please contact webcommunications@niu.edu to discuss options.
5.1.5 Content Readability
Website content should be written for a fifth through eighth grade reading level. This is not to “dumb down” the content. Rather, it acknowledges that the majority of website visitors are scanning pages quickly for specific information.
Make content easy to scan by keeping sentences and paragraphs short, and by using relevant and descriptive headings. Use brand voice and avoid jargon and/or difficult-to-read words when less complex words can easily substitute.
Ordered and unordered lists should be used to make content easy to scan. An ordered list should be used only when the order of the information is important. Don’t punctuate list items unless they’re complete sentences. List items should be consistent; if one is a complete sentence the others should be written as complete sentences.
Tables can be an effective way to organize and present related data. In general, tables shouldn’t be used for layout; instead, use Bootstrap’s grid system. Keep tables simple for best usability and accessibility. If the table uses a caption, the caption should be in title case. Capitalize the first word in each table cell. Use table heading tags for column headings.
Before creating a new table, please submit the data you plan to use through the web update request form. The web team will work with you to create an accessible table or layout that best matches your content.
Tables and Accessibility
Someone who can't see a table can't make the same quick connections between data in the columns and rows a sighted user can. To make your tables accessible, use the table caption tag to summarize table contents, and identify row and column headers. This allows a screen reader to read the information in the correct order.
Cascade is a web content management system, not a records management/retention tool. All offices should have an offline or intranet storage system, such as SharePoint, Blackboard, Dropbox or an O365 group and follow the university’s records management policy. The type of storage system should be determined by the colleges, divisions, departments and/or schools managing the documents. Another option for archiving work created by the NIU community is Huskie Commons. Please contact webcommunications@niu.edu to discuss options.
5.1.8 Event Listings, Pages and Sites
Information about NIU-sponsored events and events in the surrounding community must be published on the NIU events calendar instead of manually entered onto a webpage. Events may be subject to approval by Web and Internal Communications before they are added to the calendar.
The web team then installs a calendar widget on the appropriate webpage to pull in events related to the department, school or organization. When an event date has passed, the event is automatically removed from the calendar, eliminating the need to manually update webpages.
Pages in Cascade may only be created for major annual events or event types (such as an information page about a conference or colloquium series). Event pages must have substantial content and be kept up to date. Once the date of an event has passed, information about the next date must replace it. Do not use placeholder text, such as "information coming soon."
Websites for conferences, symposiums and similar one-time or annual events may be created in Cascade if the web team determines there’s enough content for multiples pages when following best content strategy practices.
5.1.9 Faculty Profile Pages
If a department directory links to individual profile pages for faculty members, the profile pages should be consistent in aesthetic and type of information presented. Department directories may link to a faculty member's professional website in lieu of a profile page as long as the faculty website is in the same NIU template as the department site and meets web standards. Learn more about web support for faculty.
Profile pages may be created for emeriti who are actively teaching at NIU or working in the scholarly community.
Do not post "In Memoriam" pages for deceased staff or faculty members.
5.1.10 Faculty, Lab and Student Organization Websites
All NIU clinic and lab websites that are not part of faculty websites must comply with NIU web standards and editorial standards, as well as with any additional standards determined by their related department or college.
Clinic and lab websites should be maintained by the web team or their division or college’s Cascade user and linked to/from their department’s primary website.
A webpage containing a general overview of a student organization can be hosted in Cascade if determined appropriate by the web team.
5.1.11 Tutorials and Modules
Tutorials and learning modules can be hosted in Blackboard, SharePoint, MOOC, Cascade CMS, Kaltura/Media Space or another third-party service. Tutorials hosted in Cascade CMS must meet all web and brand standards and should be submitted to the Clearinghouse for QA review prior to launch. Work with the assistant director of Web and Internal Communications to determine the best hosting solution for your module.
5.1.12 Forms and Fillable PDFs
Online forms are highly preferable to fillable PDFs. If you need an online form or fillable PDF for your site, contact us at webcommunications@niu.edu. We will create it for you, ensuring it is accessible to all users. Alternatively, you may use a platform such as Qualtrics, Google forms or Microsoft forms to create a survey and link to it from your site. If you would like to embed a survey on your webpage, please contact webcommunications@niu.edu for assistance.
Advertising landing pages are independent from department, college or division websites. They're connected to marketing campaigns to generate leads for specific programs. Web and Internal Communications and/or an external NIU marketing partner creates the page in coordination with Marketing and Creative Services. Any changes to a department, college or division website related to a marketing campaign must be coordinated with Marketing and Creative Services and approved by Web and Internal Communications prior to submitting a website update request.
5.2 Website Structure
Sites are divided into folders and subfolders, where every folder corresponds to a site section.
Each folder should have a landing page with the system name "index." A web browser will default to (or "land on") this page if only the site URL and folder are entered (for example, niu.edu/emmc/tools-resources/, where "tools-resources" is a folder under the "/emmc" website, will actually land on niu.edu/emmc/tools-resources/index.shtml). This is also necessary for usable breadcrumbs. Use descriptive words in system names, rather than acronyms or long names.
The only folders in a website that do not need an "index" page are folders for the purpose of organizing files (i.e., image folders, PDF folders, etc.).
The site's Base folder (aka, "[sitename]") is the location where all of your site's content is housed. The base folder's primary index page is your site homepage.
Images should be stored in a folder with the system name "_images" under the base folder, not within site section folders.
Likewise, PDFs should be stored in a folder with the system name "_files" in the base folder, not within site section folders.
Your site will also have a folder with the system name "_internal" where your navigation blocks will be housed.
Best Practices for Website Structure
When you keep all of your images and PDFs stored in a centralized location, it helps keep your site organized and avoids accidental file duplication. You may break up your "_images" and "_files" folders into subfolders that correspond with site sections, if you wish, for further organization.
5.3 Navigation and Contact Blocks
The site's navigation should reflect the site's folder structure. Changes to navigation should not be made lightly, as doing so can result in broken links and/or major architectural changes.
All navigation items should be formatted in Title Case.
Top Navigation appears horizontally at the top of your website. This is created using a custom navigation block. A website may have only one top navigation menu and it must appear consistently on every page.
Figure 2. Example of Top Navigation menu
The order of items in the top navigation menu should be as follows:
Home icon*: this should link to your site's homepage
About*
Customized labels
*The Home icon and About items are required in top navigation menus.
The top navigation of a child site should contain a link to its parent site, preferably under the About menu. For example, the About menu on the School of Music site contains a link to the College of Visual and Performing Arts site. Parent sites should include links to their child sites.
Left Navigation appears as a content block in the left column (right column navigation, similar in style, is used for faculty websites). Left navigation should be customized for the content folder. Additional menu items outside the content folder should be marked with the appropriate icon.
Figure 3. Example of icon used to indicate a link to a page outside the current site
Breadcrumbs appear directly beneath your top navigation menu. Items are generated automatically using the display names for pages and folders. Any page other than a site's homepage should have breadcrumbs.
Figure 4. Example of Breadcrumbs
Every site should have a contact block to help users easily find contact information. It must include the heading Contact Us, a name, address, email and phone number (if applicable). Social media icons can be used to link to related social accounts. The NIU building in the address line must be linked to the interactive map, and the phone number must be a tel: link. Any other information must be limited to keep the focus on contact information. No photos can be used in a contact block.
Best Practices for Website Navigation
For consistency, use the following labels in top navigation:
About (not About Us) Contact Us (not Contact)
The same left navigation menu should be used on each page of a site section.
If you wish to change your site's overall navigation, or the navigation for a specific site section, please contact the web team. Navigation changes should only occur when a site is undergoing major revision, as it will affect any internal links within the site and external links from other NIU sites and beyond. If you have any questions, contact webcommunications@niu.edu.
5.4 Naming Conventions
There are various types of "names" in Cascade.
The System Name (also known as the Page Name or File Name) corresponds to the asset's URL and should be formatted with all lowercase characters and no spaces. If the asset is the landing page for a folder, its system name must be "index." If the system name for an asset contains multiple words, words should be separated by hyphens rather than formatted as all one word (for example, "contact-us"). Avoid using abbreviations or acronyms, unless commonly recognized such as "faq," as they are not intuitive to your users nor are they helpful for search indexing, and instead use a related word or short phrase.
The Display name for a page appears in navigation elements, such as in breadcrumbs. Display names should be simple but descriptive and should be formatted in title case (for example, "Policies and Fees"). Display names are required for pages and folders in Cascade CMS, but are generally unused for other assets, such as files and blocks.
The page Title (also known as the meta title tag) appears at the top of a user's web browser or tab and is useful for Google search indexing and relaying a user's location on the site in relation to the niu.edu domain. Titles should be formatted in the following way:
[Page Name] | [Website Name] | Northern Illinois University
Example: Fairs and Events | Career Services | Northern Illinois University
Sometimes the title can be simplified if the website name would otherwise be repeated.
Do: About Career Services | Northern Illinois University Don’t do: About | Career Services | Northern Illinois University Don’t do: About Career Services | Career Services | Northern Illinois University
The exception is for the homepage of a site, which follows this format:
[Website Name] | [Northern Illinois University]
Best Practices for Naming
System names should be kept short and relevant to the page content.
Display names for pages should not contain the same phrases as the display name for their parent folders, otherwise breadcrumbs will appear repetitive (i.e., "Division of Student Affairs > Dean of Students > Policies and Procedures").
Title formatting should be consistent across the site (for example, if you use "[Page] | Academic Affairs | Northern Illinois University" on one page, don't use "[Page] | Division of Academic Affairs | Northern Illinois University" on another page). Always use the most condensed title option possible while remaining unique.
5.5 Meta Content
For search engine optimization (SEO) and accessibility value, pages must have unique meta titles and descriptions.
Title tags (also referred to as page titles) are approximately 55 characters with spaces.
Descriptions are optional but encouraged on the site's most important pages. They should be formatted as one or two sentences that briefly summarize the purpose of the page (about 115 characters with spaces).
Figure 5. Screenshot of meta content fields in Page Editor
5.6 Headings
Headings help search engines locate webpages and make it possible for users to scan pages and quickly find information. Headings are visually distinct from the other text on a page. Good headings divide content into easily identifiable chunks and include keywords relevant to your visitors.
Headings must be useful, concise and nonredundant:
Aim for a maximum length of four to eight words.
Use language that gives a clear, general idea of the content to follow.
Avoid unnecessary words or repeated words, such as "how to," adjectives and prepositions.
Headings must be formatted using appropriate HTML tags. For sites in the newer website themes (3.0 and 4.0 and onward):
h1: Main heading (when you place text in the Main Heading field in Cascade, this is automatically formatted). h1 should only be used once on a page. If you put text in the Main Heading field, do not use the h1 tag anywhere else. If you do not use the Main Heading field, you may use the h1 once in the Main Content Area as a page heading.
h2: Subheading, block heading.
h2: Lower subheading, nested under h2.
For sites in older website themes (2.0 and earlier):
h1: Do not use. This heading is used automatically by the meta title tag.
h2: Main heading (when you place text in the Main Heading field in Cascade, this is automatically formatted). h2 should only be used once on a page. If you put text in the Main Heading field, do not use the h2 tag anywhere else. If you do not use the Main Heading field, you may use the h2 once in the Main Content Area as a page heading.
h2: Subheading, block heading.
h3: Lower subheading, nested under h2.
Headings must follow semantic hierarchy:
<h1>
<h2>
<h2>
Follow these heading guidelines:
Do not skip or use out of order.
Do not select heading levels based on their appearance.
Do not bold or emphasize paragraph text in place of a heading.
Do not add additional formatting such as bold or underline to headings.
Do not apply heading formatting for aesthetic purposes to text that does not head a section.
Do not use headings in FAQ answers.
Do not make a heading a link.
Best Practices for Headings
Avoid slogan-like headings, since they're not informative enough to allow for efficient scanning. Slogan language can instead by included by using p class="lead" or alert class to visually set it apart.
Avoid redundant headings. Each heading should head a unique section of content. No more than one heading should be used for each section. Subheadings should not be treated as subtitles.
Incorrect (the <h1 and single <h2> head the same section of content, with no unique content to either):
<h1>The Perfect Grilled Cheese</h1>
<h2>Making the Perfect Grilled Cheese</h2>
Correct (the <h1> heads two unique subsections):
<h1>The Perfect Grilled Cheese</h1>
<h2>Ingredients</h2>
<ul>...</ul>
<h2>Directions</h2>
<ol>...</ol>
Correct (introductory text prefaces the subsection headed by <h2>):
<h1>The Perfect Grilled Cheese</h1>
<p>While many say that sliced bread is the greatest invention, it was greatly improved upon by whoever decided to melt some cheese in between two slices. Ever since sliced bread became readily available in the 1920s, grilled cheese has become a staple lunch in American households.</p>
<h2>Recipe for the Perfect Grilled Cheese</h2>
Headings and Accessibility
Accurate headings make it easy for all visitors to navigate a webpage. Screen reader users can listen to a list of a page's headings to help them locate relevant information. In order to be useful, headings must accurately describe the content that follows. Headings must also be formatted with heading tags (instead of bolded text, for example) in order for a screen reader to identify them.
5.7 Links
Do not bold red links.
Do not use "Read more" or "Click here" as your linked text. Rather, link a unique, appropriate snippet of the text within the paragraph or sentence.
Linked text should be relevant words or phrases, not full URLs (with the exception of email addresses and short URLs, including "go.NIU" URLs). Rarely, it may be acceptable to spell out a full URL. Do not use "http://www." or "www." when spelling out a URL. For example, our web address is simply "niu.edu."
All links should open in the same window, except for PDFs, which should open in a new window. A new window may also be used if opening a link in the same window would interrupt a process (i.e., filling out a form, viewing a video).
When linking to a document, indicate the file type in the link after the name of the document. Use all caps for the file type.
Figure 6. Screenshot of Page Editor displaying "Insert/edit link" icon selected with link dialogue box open.
Links and Accessibility
To quickly gain information, screen reader users often access a list of links on a page. If you use general labels (such as "click here") instead of unique, descriptive text, the list is not useful.
Spelling out an entire URL can look clunky and is inconvenient for screen reader users. If you spell out the entire URL, screen reader users have to listen to every letter of the URL.
By including the file type (DOC, PDF, etc.) in the link after the file name, you're ensuring that someone using a screen reader will know what type of document will open when they click a link.
5.8 Files
In general, we recommend placing the content from files onto webpages in .shtml format instead of uploading the files. This requires less effort of users and allows them to remain in the context of the NIU website.
In particular, avoid posting documents intended for print distribution online (i.e., flyers, brochures, posters). Printed materials have different purposes and use different techniques to convey information.
However, it's sometimes necessary to upload files to NIU sites. By choosing appropriate formats for files and reviewing their accessibility, we ensure the consistency and usability of NIU sites.
5.8.1 File Types
Microsoft Office documents can be added to sites after checking their accessibility and making any needed changes. For example, headings should be formatted and nested appropriately.
PDFs require further evaluation. The complexity of a PDF's design, the size of its audience and whether it's intended for print must be considered:
For a PDF with a simple design, it's more effective to place the content from the PDF into a webpage in .shtml format, instead of uploading the PDF. This makes for a smoother user experience.
For PDFs with complex designs intended for large audiences it's best to create and post an accessible version in another format, such as a Word document. Alternatively, the PDF can be posted along with a disclaimer that an accessible version is available upon request.
A PDF with a complex design that's intended for a small audience can be posted after its accessibility has been reviewed and an effort has been made to remediate it accordingly. An example of this type of file might be an area's annual report.
PDFs with complex designs that are intended for print shouldn't be uploaded. Instead, place the content into a webpage in .shtml format. If necessary, the PDF can be posted along with a disclaimer that an accessible version is available upon request.
Here are the most effective ways to share additional kinds of content with our audiences:
Events and event schedules: Add to the NIU calendar. A calendar feed can be added to your website.
Handbooks, reference guides and manuals: These can be .shtml-based if needed. These don't have to go through the Clearinghouse, but if the NIU logo is used it must be formatted appropriately.
Articles and research: Link to the original source. Add to Huskie Commons if possible.
Forms and applications: Design with accessibility in mind. We recommend web-based forms, which we can create for you.
News: Add to your college or division's news site or NIU Today. A feed can be added to your website. Contact the web team with any questions or to discuss alternate solutions.
Newsletters: These should sent to the https://huskiecommons.lib.niu.edu for review, with some exceptions.
Teaching materials: Add to Blackboard or O365/SharePoint. Please contact webcommunications@niu.edu with any questions.
Org charts should be converted to html by the web team. PDF may be placed on the page as well. These do not have to go through the Clearinghouse. If the NIU logo is used it must be formatted appropriately.
ISSUU documents: Provide a link to an accessible Word or PDF version when linking to a document on ISSUU, as ISSUU is not accessible.
5.8.2 Naming and Renaming Files
Use simple, descriptive names. Do not include dates or references in the name.
Don't use spaces in file names. Separate words with hyphens ( - ), not underscores ( _ ). Use lowercase words.
Files must be unpublished before being renamed. After the file is renamed, republish the file and all of its relationships. Find any off-site links and update them to the new file name or complete a web update request form to have them updated.
5.8.3 Storage and Management
Files uploaded to Cascade must be in use. Files that are not in use or that haven't been updated in more than two years should be deleted. Files must be unpublished before deleting.
Don't store multiple versions of a file in Cascade. Rather, replace existing files with their updated versions by uploading over them.
Files uploaded to Cascade must be accessible for persons with disabilities and must not infringe on copyright.
5.9 Images
5.9.1 Image File Formats
We recommend using the following types on NIU websites. For help determining the file type for your project, contact the Office of Web and Internal Communications at webcommunications@niu.edu.
JPG is the most common image format and recommended for photos.
PNG can be used for flat art images, but is most useful for supporting transparencies.
GIF is not a preferred file type. Do not use animated GIFs on your NIU website.
5.9.2 Image Sizes and Dimensions
To shorten download times and conserve server space, optimize images for web before uploading, keeping the file sizes below 150KB. When choosing an image, particularly for a banner, consider how it will look after cropping.
For banner images, use a 20:7 aspect ratio (minimum of 1500 x 525 px). For column images, use a 3:2 aspect ratio (ex. 300 x 200 px) or a 4:3 ratio (ex. 400 x 300 px). For staff profile images, use a 3:4 aspect ratio (ex. 300 x 400 px).
5.9.3 Responsive and Accessible Images
NIU websites are created in templates that utilize responsive web design (RWD). This is done so that content is always optimized for whichever device and screen-size it is being viewed on.
To optimize images for RWD, the "img-responsive" class must be added to the image tag in the HTML, in the Format Custom Classes dropdown or via the Insert/Edit Image dialogue box.
Figure 7. Screenshot of page editor displaying "Insert/edit image" icon and "Formats > Custom Classes" dropdown where the "img-responsive" class can be added to an image.
To ensure that images are accessible for assistive technologies, use alternative text (or alt tags). This can be done in the "alternative text" field on the "Insert image" pop-up or within the <img> tag in the HTML editor.
Follow these guidelines for writing alt text:
Don’t just describe the photo, provide information equivalent to that which the image conveys. Instead of “John Smith in classroom,” try “Professor John Smith leads [name of class] in a lively discussion.”
Don’t use “image of…” or “photo of…” phrases, as they are unnecessary.
Don’t include redundant information that is conveyed in the surrounding textual content.
Do include relevant keywords, which can help improve SEO (search engine optimization).
Best Practices for Accessible Images
Alt tags are one of the easiest things to get lackadaisical with when creating web content because they take thoughtful consideration to use correctly but can quickly and easily be used incorrectly. However, it's very important that we do whatever is in our power to make our pages accessible for persons using assistive technologies.
One reason alt tags are often used incorrectly is because we often assume that every image needs one. On the contrary, most of the images on our websites won't require alternative text because they either don't convey information and are simply decorative or the information they do convey is presented elsewhere in the context of the page (i.e., in the textual content).
No alt text required (Must be marked as "decorative" in the Insert Image window or tagged alt="" in the HTML):
Decorative images (i.e., a close-up on Bunsen burners placed on a chemistry department webpage)
Images where the message or information being conveyed is present in the surrounding text (i.e., a photo of a staff member next to their name and bio or contact info)
Alt text required:
Images conveying information that is not present anywhere else on the page (i.e., an infographic or a staff photo that is not followed by the staff member's name)
Images that serve a particular function, such as icons or buttons, for which the alt text should simply state that function (i.e., an arrow icon indicating that the user should advance to the next page would have an alt text of "next page")
View more information about alt text at WebAim.org.
5.9.4 Image Storage and Management
Images uploaded to Cascade must be in use. Images that are not in use or that haven't been updated in more than two years should be deleted.
Don't store multiple versions of an image in Cascade. Rather, replace existing images with their updated versions.
5.9.5 Approved Image Sources
The NIU image library is a catalog of photographs taken by the university's photographers. The image library is available as a public portal through Canto. College communicators, and other communications staff across the university, have accounts to access high-resolution images for download.
When you find an image you would like to use on your site, and you have a Canto account, you can download the image. Images can be manually cropped within the platform, eliminating the need for Photoshop to size the image. Be sure to add a comment listing the page/site where you expect to use the photo.
If you find an image and you do not have a Canto account, you can use the Asset Request feature in Canto (be sure to specify the page/site it's going on so it can be added to the comments). If you need help with the image library you can consult our Image Library Manual, or contact photography@niu.edu for assistance.
For access to the former image library, register on the site as a user. To limit duplication of images on different NIU websites when downloading a photo, add a comment listing the page/site where you expect to use the photo. You may also tag images and create a shared gallery to organize your photos.
If you cannot find what you need in the image library, you can use this link to search for stock images: go.niu.edu/stockimages. Or, contact photography@niu.edu for help or to schedule a photo shoot.
Photos used on NIU webpages must meet the guidelines for photos established in the NIU Communications Standards and have adequate image resolution. Always select photos that reinforce NIU’s brand personality and narrative. Imagery should convey student engagement that is authentic and creates an emotional connection with our audience. Look for photos that are warm and full of spirit and energy.
Personal photos taken by a member of the department/office should not be used, nor should images available through the public domain, Internet image searches like Google or Bing, or Flickr. For assistance in locating copyright-free photos, please contact the web team. Students or faculty members studying/researching abroad can contact Institutional Communications for guidance on taking photos for potential use on NIU websites. Schedule an appointment by emailing photography@niu.edu.
5.9.6 Rotating Banners and Slideshows
Rotating banners, or slideshows, should appear only on the homepage of a site and are limited to three banner images. Each image should relate to an event, department or program and should link to the appropriate page on the site. The web team has several default rotating banner scripts available and will help set up the banners upon request.
Slideshows/rotations should not be used solely for aesthetic appeal, rather they should serve a purpose. Only use a slideshow/rotating banner if you have specific content in mind that you'd like to highlight.
Best Practices for Banners and Slideshows
Research in user experience and best practices find that slideshows add little to the usefulness of a web page and that only a small percentage of users click through to view each slide.
Even fewer users remain on a web page long enough to view each banner rotation for banners that don't have advancing slides.
Thus, rotations and slides are limited to three elements, and websites are limited to one rotating banner/slideshow per site. Limited exceptions may apply.
We recommend having unique, diverse and engaging static banner images for each of your site's index pages rather than using a slideshow/rotation.
A slideshow is most useful for highlighting pages in the site that are not otherwise featured, such as student success stories, recent news appearances or featured faculty profiles.
5.9.7 Icons, Buttons and Graphic Text
Don't use image files as icons or buttons. Instead, use Font Awesome icons and button classes. There are many options to choose from. To see examples, check out how we've included icons in buttons.
Don't embed text inside a flattened image or use an image as word art. This is for usability and accessibility purposes. Assistive technologies, such as screen readers, will not be able to recognize text in images as text. Additionally, embedded text is neither searchable by browsers nor able to be translated for non-English speaking users.
Best Practices for Graphic Text
Image files as icons and text present numerous problems, not only with storage and maintenance difficulties in Cascade, but with usability in responsive design as well as many accessibility issues. There are more accessible options to choose from dependent upon your needs, including custom CSS, web fonts and html text overlays. Please contact the web team for assistance.
Cascade does not have a native photo gallery option. Therefore, photo galleries may be hosted on a third-party site, such as Flickr, Facebook or WordPress. Cascade users can link to the photo gallery from their NIU site. Modals may also be an option. Please contact webcommunications@niu.edu to discuss the best solution.
Don’t create a makeshift gallery by adding rows of images to a page in Cascade. Instead, use one of the options above.
5.10 Video
Videos for educational purposes should be uploaded to Kaltura. Videos for promotional purposes, or shorter than five minutes, should be posted to NIU's official YouTube channel, which is managed by the social media team in Institutional Communications, or the college or division's YouTube channel (when applicable). Learn more about posting videos.
All videos embedded on NIU websites must be closed-captioned to meet accessibility law. Contact the social media team in Institutional Communications for guidance on how to close caption videos. To assist users with visual disabilities, a transcript that includes any text that appears in the video should also be provided.
5.10.1 Embedding Videos on NIU Websites
Videos hosted on Kaltura and YouTube may be embedded onto an NIU page in Cascade. All videos added to an NIU website must be approved by the Clearinghouse. Videos posted to NIU websites that do not meet the video standards will be removed.
A single embedded playlist is preferable to multiple video embeds.
For embedded YouTube videos, "Show suggested videos when the video finishes" option should be deselected.
Best Practices for Video Embedding
Make sure the YouTube URL in your iframe src attribute has
?rel=0&wmode=transparent
added to the end of it. This does two things: disables the suggested videos that display after a video finishes playing (which don't always show NIU videos), and fixes an issue where dropdowns appear behind embedded videos.
Full-width background videos for web pages will be reserved for recruitment-focused pages on the NIU site and must be made in conjunction with Institutional Communications and Photography and Videography.
5.11 Blogs and News Sites
Cascade does not support blogs. Depending on your specific needs, we recommend using a WordPress-based news site hosted by Web and Internal Communications through a third-party vendor. This will help to ensure necessary system updates and support are available for the news site should the primary content owner/s be unavailable. Free WordPress.com blogs containing ads will not be permitted.
News sites will feature the official NIU logo in the upper-left corner and the respective site name appended with “News” in the right of the header section. Example: College of Business News.
Departmental news sites must be maintained by the department and updated with fresh content.
Additional guidelines for creating an NIU news site can be found in the Social Media Toolkit.
5.11.1 Blog and News Site Branding
Any blogs or news sites affiliated with NIU must be properly branded and contain top navigation with links for the following:
The college or division name in the statement should link back to the contact page on the division or college's primary website.
5.11.2 Access
Any college/division/departmental blog or news site must have at least two associated user accounts designated as admin, as well as access provided to webcommunications@niu.edu.
5.11.3 RSS Feeds
An RSS feed may be used to pull story headlines from a blog or news site onto your department's Cascade website.
If you use a blogging platform other than WordPress, the use of an RSS news feed may be possible but is not guaranteed.
