Web Style Guide

Kingsborough Community College Web Style Guide

The principal purpose of the guide is to assist those who create any written content for the College website.

 The goals of the website are:

• • To communicate the KCC’s positive impact on the lives of its students, faculty, staff and friends;
  • To make the case why the KCC is the best choice for prospective students, faculty, potential donors, business partners, community agencies and others

The website is the KCC’s primary customer service interface and, therefore, should be easy to navigate, and include relevant, timely content presented in an easily accessible manner.

This Web Style Guide aims to achieve that goal by:

1. 1. Helping developers of and contributors to official KCC web pages create and maintain easy-to-use and aesthetically pleasing websites consistent with KCC’s digital branding standards.
   2. Ensuring all official KCC websites are presented professionally and convey a positive and coherent image of the KCC.

This document describes the following standards for official digital elements:

1. Platform and Template
    The Kingsborough Community College website is built on a Modern Campus (Omni) CMS platform and utilizes master page templates to ensure a consistent structure and styles throughout. The website template includes a sliding top navigation (Maga Navigation and “IN THIS SECTION”, header and footer. Additionally, the site templates are responsive and ADA compliant (WCAG 2.0).
   
   
2. Design and Style
   

   Users expect consistent navigation, information flow and presentation when visiting a website. Adhering to these standards provides them with a familiar experience:

   • They know what to expect.
   • They have an idea of where to go.
   • They know how to get there consistently.

   For this reason, the kbcc.cuny.edu website must be predictable and consistent in its design and navigation. Visitors will find it easier to locate the information they need and enjoy a positive experience which will inspire repeat visits. Repetition and simplicity gives the site a consistent graphic identity that creates and reinforces a distinct sense of "place" and makes the KCC site memorable.
   
   

3. Content
   
   
4. ADA Compliance

Well-designed web pages portray a strong, consistent image of the KCC. Use of templates, fonts, colors, links and imagery is required for all pages on the KCC website, including the following design and style elements:

• Title Tag
• Navigation and Site Organization
• Body/Layout
• Photos/Graphics
• Other Design Elements

 

Title Tag

Each Web page needs a unique title that accurately describes the page. If a proper title is not included, search engines cannot find the page. Each title must include the most detailed information about the content and the KCC name (to identify it as an official KCC resource).

Proper Examples:

Flex Program | KCC Program of Study |KCC

Improper Examples:

 Home

Navigation and Site Organization

Clear and easy-to-understand navigation cues ensure visitors can find what they need quickly without the need to bounce back and forth between pages.

• On-page navigation
• Breadcrumb navigation- a breadcrumb navigation enables visitors to navigate to the top level of a site or section.
• Header

Those links are located on the top of every page. They represent key areas of interest for some of our core audiences, including Students, Donors, Media, faculty and staff.

• Footer

A standard footer is included at the bottom of each page of the website. The footer includes links found on the header and links to additional information, such as Social Media, Disclaimer, Text Only, IT Accessibility, Make the Website Talk, Gainful Employment, Campus Map/Virtual tour

Body and Layout

To make copy easier to read online:

• Use a white or light gray background with black text.
• Align text to the left.

There are instances where a text is needed for emphasis.

1. Fonts
   KCC’s digital pieces use a few approved fonts:

Headlines: Oswald, Helvetica Open Sans, Verdana

Body: Open Sans, Helvetica or Verdana

2. Color

A family of colors has been developed specifically for use across the full range of KCC communications materials, including websites. The color palette offers primary, secondary and neutral colors chosen to express the brand of the KCC. Using these colors, and the color combinations or “families,” on all website pages, helps to create a consistent, distinctive look and feel for all KCC materials.

Note: Lighter or darker shades of each color will have different RGB, HEX & CMYK value

3. Headings

Headings and subheads are used for emphasis on pages and help break up text and divide it into sections. All web pages must include an H1 heading, which is typically the title of the page. If additional headings or subheads are needed, they should appear in descending order: Heading (H1) Subhead (H2) Subhead (H3) Etc.

Typography: Lato

Heading 2 styled as H1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

 

4. Emphasis
   To emphasize information, only use bold or italic text styles. Don’t use underlined text online as it confuses users with links, and color should not be the only indicator of information, as it is not compliant with the Americans with Disabilities Act (ADA).
   
   
5. Links
   To help our users quickly identify links and get the information they are looking for, use consistent colors and styles for linking. The KCC style to indicate a link is blue text with underline on rollover.
   
   
6. File Types
   Users expect navigation links on a website to point to a Web page, and not link to another format (Word document, .pdf, etc.). However, there are many times linking to a document is necessary. In those cases, the acceptable file formats for KCC are as follows:
   PDF (.pdf)
   • Powerpoint (.ppt, .pptx)
   Unless there is a business need, documents should be made available online in an accessible, PDF format rather than their native file format (i.e., Word, Excel, etc.).

The Make Accessible Action walks you through the steps required to make a PDF accessible (https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html)

7. Bullets
   If a hierarchy of bullets is needed, use the following structure:
   First-level bullet (standard bullet)
   o Second-level bullet (open circle)

• Third-level bullet (square)
  
  

Unordered List List Item Link List Item, Not a Link List Item Link PDF List Item Link Word Doc List Item Link Excel List Item Link External

Arrow List Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Ordered List 1.        Lorem ipsum dolor sit amet 2.        Lorem ipsum dolor sit amet 3.        Lorem ipsum dolor sit amet

 

 

8. Required Elements
   Each Web page must contain the following elements:
9. “Alt” (alternative text for an image or a visual) tag: Insert text in place of graphics for non-graphical Web browsers and ADA compliance. Spacer gifs should still use “alt” tags – they should just read alt="".
10. Navigation: All pages must have navigation (links to other areas of the site) “above fold,” or what is visible on the screen without scrolling. Pages should not be a dead end for the user. Be sure to have navigation to other areas within a section on the left or embedded within the copy. For best results, have links in both the navigation (on left) and embedded in the text. Avoid horizontal and bottom-of-the-page navigation, as users don’t see them as easily.
    c. Page width: Pages should be a minimum 1024 x 768 pixels and a maximum of 1920 x 1080 pixels (desktop website size), to ensure that all CSU pages display consistently in browser windows.

1. Photos and Graphics

KCC uses bold imagery throughout the site to help communicate the mission of the KCC. Great care is taken to ensure photos used on the site represent the mission of the KCC and reflect the messages we seek to convey.

Use the following guidelines for images on all KCC web pages:

1. Photo Usage
   Format: .jpg or .png format and condensed for the Web.
   • Use stock photography as a last resort. Photos should include a campus, student, faculty, staff, etc. when possible.
   • “Alt” tag description: Mandatory for all photos and graphics. It should describe what is happening in the image. Example: <alt= “photo students in class”>
   
   
2. Copyright Information
   Copyrighted photos owned by anyone other than the KCC may not be used on an official KCC web page unless proper copyright agreements are obtained. Stock photography may require multiple licenses (one for print, one for online use) or only allow for limited licenses (usage for a specified time period).
   
   

A photo release form is required for photos that feature identifiable faces. The person in the image must sign the release form, granting permission to use the photo. (This includes teachers, students, etc.)

It is the responsibility of the website content owner to secure the necessary rights and licenses. Obtain signatures on a photo release form when shooting your own photos for use on the Web. Photo releases are provided through the Communications and Marketing Office

Photo release form: https://www.kbcc.cuny.edu/CommunicationsandMarketing/PhotoandVideoReleaseform.html or by emailing CommunicationsandMarketing@kbcc.cuny.edu

The Communications and Marketing Office has a subscription to deposit photos (royalty-free stock imagery), as well as a number of campus shots. Photo shoots may also be scheduled to assist with any photo needs. For more information, contact the Communications and Marketing Office CommunicationsandMarketing@kbcc.cuny.edu

Logo Usage
KCC logos that appear on a website must be officially approved by KCC Communications’ team. This will help prevent incorrect use of the logo or improper branding of a non-KCC website. Contact Communications and Marketing Office CommunicationsandMarketing@kbcc.cuny.edu to request a KCC logo.

• Graphics and logos should be 72 dpi and in .gif,.jpg or .png format. The .gif format works best when using a few colors, such as logos or graphics. The .jpg format is the preferred method when saving files with lots of colors, such as photos and .png files work well when a transparent background is needed.
  
  • Use “alt” tag description to identify images to visually-impaired users or those using text-only browsers.

 Other Design Elements

1. Adhering to visual and developmental standards reinforces the KCC’s image of professionalism, quality and academic integrity. The kbcc.cuny.edu website is an extension of the KCC and reflects other official communications that come from the office. To that end, avoid "gimmicky" web features such as scrolling marquees, blinking text and visible hit counters. In each of these cases there are better, more professional ways to achieve the desired goal:
   
   

• Animated images or blinking text distract a user and are sometimes not ADA compliant. If the use of animated images is necessary, this design element must be created by the Communication and Marketing Office. The Communication and Marketing Office has final approval on use and implementation of all graphic and design elements.
  Use Instead: Proper placement, bold or italics to emphasize information.
• Scrolling news cuts user productivity and is not ADA compliant.
  Use Instead: Proper placement, bold or italics to emphasize information.
• “Coming soon,” “Under construction,” should be avoided. If the web pages are not ready or being built, they should not be linked.
  Use Instead: Offer more explanation of the information coming. For example, “Registration information will be available January 30,” can be placed on an existing Web page.
• Introductory sentences such as “Welcome to the KCC website” are unnecessary. (You never see “Welcome to my press release,” or “Welcome to my brochure.”) The user knows what the website is, the extra words clutter the page, and it takes the user longer to get your message.
• “Click here” should be avoided. The words and phrase don’t mean anything for persons with disabilities since the user may not ‘click’ to navigate.
  Use: Keywords of information in the text link such as: “More information on Tutoring Services” as the link.
• Forms/Database requirements need to be coordinated through the web team at webservices@kbcc.cuny.edu and CommunicationsandMarketing@kbcc.cuny.edu
• Extraneous audio such as sound effects and background music can distract and are unnecessary. Use: Audio for functional purposes such as “Listen to the KCC Presidents’ Convocation.” Preferred audio file format is .mp4. or submit posted YouTube video URL. Include alternative text on the page when embedding audio-video files. Provide captions for video content. Provide transcripts of audiovisual content.
• Electronic or PDF forms must be designed to allow assistive technology to access information within the forms.

1. Content
2. All content on KCC websites should be timely, accurate and of interest to the end user. A user judges the value of a Web page based upon the appropriateness and usefulness of the content it provides. Content should drive the design of the Web page. The two primary questions to ask when planning a website are:
3. What do the users want (or need) to know?
4. What do we have (or need) to say?

The organization of information should be well thought out before construction on pages begins, and the Communications and Marketing is available to help with the planning.

1. Web Content Owners
   A designated person (web liaison) in each department will maintain web content.
   • Each Web section or Web page must have someone assigned to it. (Others can contribute and help update, but one person needs to be the sole owner.)
   • When a new Web page or website is created, a production plan including updates should be developed.

 Formatting Content

• Users tend to scan text online rather than reading word for word.
  Place important information first: Place the most important information or content at or near the top of the page, preferably in the first two paragraphs. This is the information the user will see first when the page downloads.
•  Start subheads, paragraphs and bullet points with most important information: Use key words that your audience will recognize when scanning down the left side of your content.
  Provide descriptive text: When providing information on other services or programs, include brief descriptive text so a user doesn’t have to click on a link to find out what it is.
• Develop an information hierarchy: Arrange content so it follows a logical order of general information to specific. Categorize or group similar pages of information together. Initial Web pages should begin with index pages that are broad and cover all lower-level documents; subsequent pages should have more precise information in greater detail. Information about the layout of the site (i.e., site map) should be readily available on the site.

Chunking Content

“Chunking” is the process of dividing up large portions of text into smaller portions, making text easier to read. Large portions of text overwhelm readers.

• Keep text short, since Web users prefer to scan.
• Use bulleted lists to make copy "scannable."
• Use simple, easy-to-understand language.
• Keep to one idea per paragraph.
• Break paragraphs into sub headed sections and utilize anchor links for long pages of information that are broken into subsections.
• When using icons, graphics or bullets, make sure the text links, not just the icon.
• Avoid using acronyms and other terms that are internal to the KCC. Acronyms should be spelled out on first reference.

Don't separate users from the information they need and want. Present information in a logical format and recognize that not many people will take the time to read lengthy copy or "filler" material.

In a in a logical format there is an increase in usability—task time and errors decreased, while user memory, recall and satisfaction increase


About Copyrights

What is Copyright?
Copyright (https://www.copyright.gov/) is a federal law (17 U.S.C. 101 et. seq.). It allows authors to control the use of their works for a limited time period. Copyright law gives the owner the right to protect copies of his or her work. It also protects the author by preventing others from making derivative works, distributing the work to the public in writing or through digital means, and performing the work in public. Once that time period has expired, the public is allowed to use the work without paying royalties or obtaining permission from the copyright holder. KCC employees must ensure all content used on any KCC website does not violate any copyright laws.

Copyright, Public Domain and Fair Use
KCC employees who wish to copy or post copyrighted material (including, but not limited to text, photos, graphics and documents) to the Internet are responsible for adhering to state and federal laws respecting copyright. Copyright laws protect materials recorded in any form, including written and digital records. For more information on copyright laws, visit www.copyright.gov. To see the entire Copyright Act, go to www.copyright.gov/title17/. If you have specific questions regarding using materials on your website, please contact the Communication and Marketing Department.

Web Content Owner Responsibilities Content Quality

• Content should be presented with the target audience in mind. Place the most pertinent information prominently. (As a general rule, the most important information should be placed high enough on the page so that the user does not have to scroll to see it.)
• Content must be accurate. Any errors (grammatical, factual, typos, etc.) or outdated information should be corrected within 24 hours of notification.
• Failure to keep sites current and compliant with KCC Web guidelines (after notification) will result in the removal of pages and/or sections from the site.
• Content must be accessible. If you cannot create an accessible page, provide a link to an alternative page with equivalent information that is accessible.
• Refer to traffic reports, feedback, surveys and other data from your users to help guide content decisions. The goal is to make information easy to find.

Events and Timing

• Change wording that promotes an upcoming event (“Conference coming in June”) to past tense no later than 24 hours after the conclusion of the event (“Conference a success”).
  Think of event websites as having three versions:
  Pre-event: Promoting event with details, keynote speakers, registration information
  During event: Continue to provide pertinent information
  Post-event: Recap event with key highlights, photos
• Be as specific as possible with time indicators. Avoid using nonspecific words such as today, tomorrow, soon, Wednesday, etc. (“Updated registration information will be available August 30.”)
  
  

Updates

When a new section is created for the Web, the department website content owner should create a production schedule that will help track timeliness of content, update requirements, technical needs and more.

• Keep track of posting information that changes regularly, including student fees, financial aid information, academic majors, enrollment numbers, statistics, etc. When posting dated material, specify the date or time period.
• Web content owners (Department liaisons) are responsible for keeping site content current
  Linking Policy
  The kbcc.cuny.edu website contains links to other Internet sites and resources, and welcomes links to the KCC website from third-party sites.
  
  Notes on Linking
   Linking provides users with additional related information.
  • Links include those pointing to related areas within the KCC website and those to an unrelated third-party site.
  • Links are most valuable when they enhance the information on a site and should not be used to replace it.
    
    Third-party Link Criteria

• • The link should go to a site that provides additional, related, relevant information that is useful and of value.
  • The link should not express or imply an endorsement to any third-party business or service.
  • The KCC cannot link to any politically related sites.
  • Links should go to specific information on a website, rather than just the home page. The idea is to directly take users to the relevant information.
  • Avoid using an entire URL in a link, as they can be long and unwieldy, and aren’t helpful to search engines. If a URL needs to be used, avoid http:// and link to www.nameoflink.com or just nameoflink.com.
  • Avoid “click here” and “more.” Use keywords and names in the link text so the user and search engines know what they are:

Internal: When linking to an area on the KCC site, use keywords and names in the link text so the user and search engines have an idea of where the links are going. In the HTML source code, use relative links, which do not include https://www.kbcc.cuny.edu, but start with the directory name. For example:
Relative link in HTML: More information:  <a href=”/kcc/index.html> Service Learning </a>
Appears on website as: More information: Service Learning

External: Provide details on the information a user will be getting on another website, as well as the name of that site. Use absolute links, which include the entire URL (including http://). For example:
Absolute link in HTML: More information:  <a href=https://www.nytimes.com/ tarhet=”_blank”> NY Times </a>

 Appears on website as: More information: NY Times or explain the relevance of the linked material.

Maintaining Links

• Adding links to a Web page requires maintenance by the Web page liaison. Since links often become outdated and files move, each link should be checked at least once a month to ensure it still works.
• Broken links must be fixed within 24 hours of notification, or the links will be removed from the site

Multimedia Files Audio

• Audio files should be in .wav or .mp4 format
• When posting audio clips, provide a transcript as well for disabled users. Transcripts need to be updated when audio clips are updated.
• Use of audio files on the site should be approved by the Communications and Marketing Office.
• The Web content owner must obtain permission to use any music (even if background music) to avoid copyright violations.

1. Video

• When posting video clips, provide captioning for disabled users. Captioning needs to be updated when video clips are updated.
• Video files should be in .mpg format
• Use of video files on the site should be approved by the Communications and Marketing Office.

Media Specifications

TYPE	RESOLUTION	COLOR	SIZE	SUBMIT
Web	72	RGB		JPG, PNG, PDF, MP4
Hero/Banner images	72	RGB	Responsive slider works best with 1920x600px; additional adjustments may be required depending on content	JPG, PNG
News/Highlights Card Images	72	RGB	800x533px	JPG, PNG
Events (Calendar) images	72	RGB	500x500px	JPG, PNG
Spotlight images	72	RGB	360x548px	JPG, PNG

 

7. Placement
   Before a website or Web page is created, consider where it should be linked up on the main kbcc.cuny.edu website. Based on the purpose of the site and the audience, there are many factors to consider:
   1. Each program and subdepartment should be linked from a main department page. For example, New Student Support should be linked from the Student Affairs site, since it is a department of that division.
   2. Consider how a user would find your site from the home page. Try to link up your site in a place that makes sense. For example, Financial Aid should be linked under “Student Resources,” since that is information a student would search for.
   3. In order for items to be listed under the drop-down menus on the homepage, the following criteria must be met:

• Must be a major department or larger category of departments, rather than a singular program.
• Drop-down menu items are not changed frequently and should not reflect events. (There are more effective ways of promoting events – such as KCC events calendar)
• If a larger department is featured in a drop-down menu, the smaller department and/or program can be featured on that larger department’s main page.

1. In order for items to be posted on the home page of kbcc.cuny.edu, the following criteria must be met:

• Information must be of interest to the public and/or of significant system wide interest.
• Link must be timely and have a predetermined date when it will be removed.
• The wording should explain the content of the page and avoid use of KCC insider terms and acronyms.
• An item under “News and Events” should either be news (recent press release) or an event.
• All events listed shall have a predetermined removal date agreed upon prior to posting.

III. ADA Compliance

The Web was created to be accessible to everyone regardless of disability. These Web guidelines has been created with accessible design in mind, so, to the best of our abilities, KCC websites are available to all users. The basic rule in designing websites for accessibility is if information is provided in any medium other than plain text, an alternate version should also be provided.
Examples include:

• Alternate text describing images
• Transcripts of multimedia clips
• Text-only versions of graphics-laden pages or .pdfs

 People with disabilities use a variety of assistive technology to help them navigate the Web.
These include:
Screen readers: Visually impaired users have specially designed software that allows Web pages to be read to them (via synthesized speech). This is why it is important to use “alt” text: Since the user can’t see the image, the screen reader lets them know there is an image and what it consists of.

Text-only browsers: These browsers display no graphics, images or photos and will see the alternate text in place of the visual content. If you use graphic menu systems for navigation, these text-based alternate menus are an especially important aid to users who cannot see your graphics.

Navigating without a mouse: Users with mobility disabilities may not be able to navigate by pointing and clicking a mouse. Therefore, the tab key can be used to navigate to links.

Overriding CSS: Cascading Style Sheets (CSS) allow users to easily apply personalized formatting to Web documents. The contrast between text and background colors may be difficult for color-blind users to see, so if pages are designed with a CSS, color-blind users can manually set their browser preferences to override the settings and apply their own style sheet to the page instead.

1. Why ADA Compliance is Important
2. Serving all constituents: One of the missions of the KCC is to provide access to all. Making small adjustments in Web pages helps create an environment that supports all members of the KCC community.
   
   
3. Saves money: Inaccessible websites are a liability that can permanently damage the KCC brand. Not complying with these guidelines can lead to complaints, lawsuits, intervention by regulatory agencies, negative publicity and expensive site redesigns.
   
   
4. New technology:
   As Web access expands beyond the desktop computer, accessible design makes it easier to deliver resources and services through various forms of new technology such as:
   
   Mobile devices (i.e., smartphones, PDAs, handheld computers, etc.)
    • Voice access services
    • Assistive and adaptive technologies
   
   
5. Easier search: Search engines will be able to index the site more easily because of well-structured design and text alternatives to multimedia content.
   
   
6. Standards: Since KCC website is structured with accepted and established standards, Web applications are able to access the site.
   
   
7. It’s the law: The Americans With Disabilities Act (ADA) and Section 504 of the Rehabilitation Act require that public institutions have accessible resources and services, including websites. Section 508 of Title II of the Americans with Disabilities Act of 1990 sets "standards for accessibility and establishes requirements for electronic and information technology ... to be accessible to people with disabilities, including employees and members of the public."

• Prohibits denial of equal access to programs or activities conducted by the state on the basis of race, national origin, ethnic group identification, religion, age, sex, color or disability.
• Requires accessible websites.
• Requires accessibility in other technology areas (online instruction, student services, etc.).
• Requires consideration of accessibility in all IT purchases. (It does not demand retrofit of existing technology or sites.)
  
  

1. Using .pdfs on a KCC Website
   Portable Document Format files (.pdfs) need to be available to users with disabilities. First, determine if a .pdf is the only format that will work for posting the document. Usually, converting the .pdf to HTML will work better for all users (quicker to get information, searchable), especially those with disabilities.
2. Suggestions for Accessibility
3. Is it absolutely necessary? Decide whether posting a .pdf is necessary. If it’s being posted as a shortcut, it may be easier and more user friendly to post it as HTML, or post both options so users can choose the format that best suits their needs.
   
   
4. Structure: Converting documents for accessibility compliance requires well-marked-up documents. Use real headings rather than larger, bolder fonts. Consider structure, not just visual output.
   
   
5. Text only: For top-hit pages on the site, or a respective section site, consider creating a text-only version of the home page for easier navigation. When using text-only documents, ensure that they are updated when the dynamic content changes.
   
   
6. Quick load: Effort should be made to ensure fast downloading Web pages. Break up large documents into smaller sections.
7. Checking Compliance

Departments are responsible for ensuring their pages are ADA compliant. The KCC is legally required to ensure all of our online materials are accessible to everyone. If your site is found to not be compliant, it will be flagged for changes. Changes will need to be made within 24 hours or pages will be removed from the site