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.
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.
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.
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:
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:
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.
All pages should include:
Each Section Front page should also include:
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.
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.