Brand Guide: Web
The CSB/SJU website style guide reflects identity and image standards at CSB/SJU to offer consistent, concise messages to all audiences.
From the words and colors we use, to the brochures and websites we create, as well as all the various communications we send to parents, employees, students, faculty and staff — our messages should be clear.
- By creating guidelines, such as those outlined in the CSB/SJU website style guide, we can offer better direction and suggestions, as you do your part in communicating about CSB/SJU.
The goal of the web style guide is to facilitate the development of a cohesive website for http://www.csbsju.edu/ and all sub webs. This will reinforce the brand of the College of Saint Benedict and Saint John's University, provide continuity in website appearance, faithfully represent the College of Saint Benedict and Saint John's University to the public and insure ease-of-use for our various audiences.
Consistency is key
Web development professionals concur and research proves that consistency across a site is critical. Consistency in navigation and layout enables readers to more easily locate and digest the information they need as well as provides a sense of organization and purpose, which reflects positively on the institution.
Web Content Management System
Ingeniux, CSB/SJU's Web content management system, provides a simplified means to create, maintain and update content. It allows individuals to focus on content, rather than on layout, fonts, colors, etc. while continuing to meet the College of Saint Benedict and Saint John's University's best practices for quality, service and professionalism.
All undergraduate departmental websites representing the college and university will be housed in Ingeniux.
Each department that has a site on the CSBSJU.edu site must assign a web coordinator to maintain the site. This person will be given access to the web content management system.
The Help Desk is available to assist with "how to" questions or to sign up for additional training. Also, special graphic or photography needs can be handled by Marketing and Communications, but each department must have a person assigned as their web coordinator.
Navigation elements should have a similar look and appearance in the same area on every page of a site, called primary or global navigation. It confirms that you are still on the same site.
The primary navigation (About, Academics, Admission & Aid, Student Life ...) is predetermined and embedded in the Ingeniux page schemas. Likewise, our global navigation (Search, Info for, News & Events, etc.) is also predetermined and embedded in the page schemas.
Our global navigation:
Local Departmental Navigation
Individual department site navigation is automatically built by the Ingeniux system as you create pages within your site. This navigation is placed on the left-hand side of both section front and detail pages on a large screen view. Navigation menus are collapsible for smaller views and found near the top right of the screen.
Department navigation location:
Ingeniux uses the site tree to build URLs, so it is recommended that you begin your page name in the site tree with a capital letter — this keeps the site tree neater and easier to read. Separating words in a URL using hyphens or underscores is universally considered a best practice by Search Engine Optimization (SEO) experts. Ingeniux is programmed to automatically fill any spaces in a URL with a hypen, so our URLs will look like this:
Cascading Style Sheets
Each template is linked to a cascading style sheet for text to appear consistent on each page. The page "Title" automatically uses the Heading 1 specification.
To format text, select the desired text, then choose "Heading 2", "Heading 3", etc. from the dropdown box. For example use "Heading 2" for the first heading in the "Body Copy" area and "Heading 3" or "4" for other subheads. Make sure to use subheads consistently for easy reading.
Use styles as specified; do not alter the text by changing the font face, size or color.
The large banner images used at the top of each department/office section front are prepped and placed on the page by the web designer from the office of Marketing and Communications.
Section front banner example:
Departments that have a specific image they want used for the banner of the section front should send it to the web designer in OMC for consideration. These banners should not include logos or overlay of text so that they don't compete with the other design elements on the page. Additionally, images with text overlays won't be readable on mobile devices. Images should be unaltered images, not Photoshop-created images.
- Optimize images to reduce the file size for faster web delivery. Smaller images should be less than 30K and large high quality images should be kept between 60KB to 100KB.
- Use the jpeg file format for photographic images.
- For more information on getting the best optimized image, Photoshop users can see the Help documentation "Optimizing Images for the Web" or IT Services Knowledge Base information on optimizing images. For information about optimizing images for posting on social media, page/profile managers can see Sprout Social's Always Up-To-Date Social Media Image Sizes Cheat Sheet.
- When managing images in Ingeniux, choose "Manage Assets" and choose the proper folder to "Upload" images into.
- Copyright laws apply for electronic content and images just as they do for printed content. Do not use someone else's intellectual property without permission.
- To support the CSB/SJU brand, use graphics discerningly. Do not use clip art. Choose photos and other graphics that represent CSB/SJU in good taste.
- Use the gif file format for logos or text graphics with solid areas of color.
- For the browser to recognize the file type, name the file with the appropriate suffix, such as .jpg and .gif.
All pages should include:
- Page Name. (This will determine what the URL path will be.)
- Title. (This will be the first Heading 1 on the page.)
- ALT tags for graphic images and links to ensure screen readers can navigate the page easily.
- Content needs to follow the guidelines included in this document.
- Primary navigation, global navigation and copyright. (These are embedded in the page schema.)
Each Section Front page should also include:
- "Contact Us" component.
- "Find out More" component on the academic department section fronts.
ADA Compliance/Website Accessibility
Websites are subject to compliance with the American Disabilities Act in regards to accessibility. CSB/SJU take this compliance very seriously. To learn more about the specifics of ADA compliance related to web accessibility, please visit the webtools page.
Social Media on CSB/SJU website
If a department would like to promote their social media content on their website, we will place the approved icon for the specific medium in their "contact us" box and link to the page (i.e. Facebook, Twitter, LinkedIn). Additionally, profiles and pages for departments can be added to CSB/SJU's Social Media Directory.