Standards and Procedures

Web Site Purpose

Columbia College's web site serves as an extension of the college and is intended to provide visitors, students and employees of the college with an accurate central information resource. The site also serves to support Columbia College's branding and marketing efforts and to act as a representative of the college.

Web sites at Columbia College

Who can create and work on Columbia College web sites?

There is no specific restriction on who can work on Columbia College web sites, except that site developers must be directly associated with Columbia College. (Server access is specifically restricted to certain individuals within each department). It is strongly recommended that official web site development be conducted by experienced web professionals, either on or off campus. Users of the Content Management System (CMS) must attend training classes provided by the IT department. Sign up using the Software Training Request form on iris.colum.edu

Obtaining permission

Individuals that need to create web pages or web sites for the college must first be authorized by their supervisor. Please use the Software Access Request form within the IRIS system to request access (CMS training is a pre-requisite).

Web Implementation Group

The Web Implementation Group (WIG) is responsible for the implementation and administration of the Columbia College Chicago World Wide Web Policy.

The WIG shall resolve issues of interpretation and enforcement of this policy jointly with an appropriate administrative official, a dean in the case of an academic unit or a vice president in the case of an administrative unit.

The WIG is responsible for developing style, standards, and review procedures for official college web pages.

Questions about the college website should be directed to the Director of Web Services, as designated representative of the WIG.

Members:

• Director of Web Services
• CIO
• Director of Creative and Print Services
• A. V. P. of Marketing
• An associate dean from each school
• A faculty representative
  

Communication with the Web Implementation Group is through the Director of Web Services.

Website names and addresses

As stated in Columbia's "World Wide Web Policy" - URL Policy:

The issue of web site names (URLs, or the title that appears in the "address" bar of a web browser) are increasingly important as Columbia College works to establish a coherent and professional web presence for its official web sites. The URL of the Columbia College web site and its constituent web sites is www.colum.edu. Columbia College and its official sites exist in the ".edu" domain, which is established exclusively for educational institutions.

Columbia College provides web space for Columbia College sites. Official web sites are usually named with the convention "www.colum.edu/[entity]", where "entity" is the name of the school, department, program or other Columbia College unit represented by the site. A directory on the Columbia College servers is for the exclusive use of the official site hosted within that directory and its subdirectories.

In some cases, sites are named with subdomains, such as "aaa.colum.edu." To create coherence and professionalism in its web presence, Columbia College strongly discourages the creation of additional subdomains, in favor of subdirectories on the main server. Subdomains or sites within the .com domain may not be hosted on Columbia College servers and may not represent official Columbia College entities. Subdomains in the .org, .net or alternative domains are strongly discouraged, as they detract from a cohesive and professional Columbia College web presence. Requests for subdomains or alternative domains must be approved by the Web Implementation Group (WIG).

The name (URL) of your web site should directly and succinctly reflect the name of your College, department, program or Columbia College unit, and it should be in the format www.colum.edu/[entity].

Web Publishing and Design Standards

Please refer to the Web Design section of the Brand Identity Manual for design standards and official policy. Please note: sites developed and maintained within the CMS (Serena Collage) will not need to refer to these standards.

Recommended tools

For development within the Content Management System (aka Serena Collage, or "CMS"), all that is required is a computer with an internet connection and the ability to run Internet Explorer 6 or Firefox 1.5. The CMS is the preferred method of web authoring at Columbia College Chicago.

Minimum Hardware:

• PC (Pentium 4) or Macintosh G4/5 with 512MB RAM, 17" monitor, 20GB hard drive, and a CD/DVD RW drive
• CDs or other storage media (with a drive) so you can create backup copies of your work

Software:

• Web design/site management software: Macromedia Dreamweaver MX
• Image editing software: Adobe Photoshop
• Current target browsers: Internet Explorer 6; Firefox 1.5, Safari 2.0. Due to high-volume use, Explorer and Firefox are our "supported" browsers, and Columbia College sites must be coded to work in these browsers.
• Common browser plug-ins, including the Flash plug-in, Quicktime / Windows Media, RealAudio and Acrobat Reader

Connectivity:

• Access to a high-speed, dedicated internet connection via the college network, or
• At a minimum, a modem capable of 56k and a dedicated phone line

Additional tools that may expand your capabilities in web development

Careful consideration should be given to your ongoing web development needs before you decide to invest in any of the items below (these items should be considered individually based on your needs and not as a package). These items all have specific uses. Many people will be able to conduct all or most of their web development within the CMS or by using the tools in the Recommended Tools set above.

Hardware:

• A desktop scanner
• Access to a second computer (either a Mac or PC, opposite of your primary workstation) to conduct cross-platform and cross-browser testing

Software:

• An SFTP program, if you want to upload/download files independently of the Dreamweaver client.
• Adobe Illustrator (vector image editing software).
• Macromedia Flash (for certain types of dynamic content / multimedia)
• Adobe After Effects (multimedia content) and Premiere (digital film editing), or Macromedia Director (multimedia content).
• BBEdit (Mac) or Macromedia Homesite (PC), code-writing programs that provide additional tools for coders.
• Adobe Acrobat full version (in addition to the free Acrobat Reader).

Tools not to use

There are some tools available that should not be used for web development at Columbia College. Those tools follow, along with brief explanation for each.

Microsoft FrontPage - This program was one of the early entrants into the "WYSIWYG" web editor marketplace. While it has improved since its early versions, FrontPage does not have completely integrated site management tools. It does not write "clean code." It uses a protocol called FrontPage Extensions, which are proprietary, do not integrate with industry-standard protocols and technologies, and are not supported by Columbia College. Therefore, if you have created web pages using FrontPage, you should not use extensions; they will not function properly on Columbia College servers. Use Macromedia Dreamweaver for your continued developement.

Microsoft Word - This is not a web development or design program. It is a word processing program, and works best when used only for word processing. The code it creates under the "save as web page" or "save as HTML" option is uniformly poor. Do not use Word to create web pages, though you may copy-and-paste text from Word into the better WYSIWYG web editor programs, such as Dreamweaver, with acceptable results.

Netscape Composer - Do not use the built-in Netscape page creator, because it is a very poor tool.

Technologies that require additional plug-ins - Usability is the primary criterion when creating web sites that require plug-ins. Shockwave is (arguably) such a technology. If your site requires a non-standard plug-in, the college webmaster may deny a link within with the college's server.

PERL scripts - These are not the preferred method for scripting on the web servers and have been replaced by PHP, a flexible, general-purpose scripting language. For complete documentation on PHP and a comprehensive tutorial, visit php.net. MySQL database access is provided on a case-by-case basis for college-wide web sites, and access will be provided to developers that have a pre-existing proficiency in database development and resources allocated to the sustained administration of any project. Curricular projects are not supported by the webmaster team, but may be developed on departmental servers.

General site standards for Columbia College web sites

Organization

Begin with a sustainable, platform-independent organizational structure for your site:

• Plan your site's information architecture (IA) before building the site. Establish directories, subdirectories, and navigational paths. If you require assistance with developing a logical site architecture, contact the college webmaster.
• Make sure that the default file in each directory and subdirectory is titled "index.html" or "index.php", all lowercase.
• Use lowercase titles for all your file names.
• Make sure that file names have proper extensions, such as .html or .htm, .jpg, .gif, .swf, etc.
• Do not use spaces or punctuation in file names, other than the underscore "_" convention.
• Use intuitive naming for your files and directories--keep file names short and descriptive (less than 15 characters where possible).
• Place all your images and graphics in a subdirectory called "images." This subdirectory should be located within your site's top-level directory.
• Use relative pathnames for links and images, where possible.
• Use the College's name in the top (title) bar of the browser window for every page on your site--even those in the lower tiers.

Design

Please refer to the Web Design section of the Brand Identity Manual for additional information and official policy.

About Flash

Many web designers are using Flash to add interest and interactivity to their web site designs. Flash may be used on Columbia College sites, but only as an auxiliary element. The following regulations apply to the use of Flash on all Columbia College web sites:

• Flash may not be used as the site's primary / exclusive navigation component or as a requirement to view the primary content of the site (i.e. no "all-Flash" sites).
• Flash site "introductions" or "splash pages" cannot be used
• Audio components must be optional (provide an "off" option).
• A direct link to the current download of the free Flash player must be provided on the site's main page. (i.e. "To view all the content on this site, you will need the Flash player, available as a free download here.")
• The Flash components of the site must be reviewed by the college webmaster prior to launch. We recommend that you request an initial review EARLY in the development of your site, so any potential problems or issues can be resolved before you do extensive site development.

Frames

The Columbia College templates, design and standards are structured not to use frames. Frames cause problems with accessibility, bookmarking, and inter-site navigation. The Columbia College web standards do not support the use of frames.

Text

The following is general information for site developers. Specific information about text and style is located in the Web Design section of the Brand Identity Manual. 

• Use cascading stylesheets to set your text and layout specifications. We strongly recommend that you link to the Columbia College stylesheet for all your Columbia College web pages. If you wish to use your own stylesheet, please be aware that you will be responsible for ensuring that your site continues to comply with Columbia College's evolving site standards in the future. Please integrate the following guidelines:
  • For text, use dark colors on a light (preferably white) background for maximum contrast and readability. Use black text (hex color #000000) for any text longer than a couple of lines.
  • Do not underline text for emphasis; use bold (<strong>) or italic (<em>) text instead. For web users, underlined text signifies a link.
  • For links in text, use the browser default colors OR an intuitive color structure (the Columbia College style sheet specifies link colors). For example, unvisited links should be darker in color than visited links. Make sure text links are underlined so the user knows they are links. For graphic links, construct the navigation so links are obvious. Be consistent with text throughout your site.

Navigation

• Navigation is the anchor of your site's usability. Navigation can make the difference between a user-centered site and a poorly designed site. The Columbia College web site templates are designed with the recommended navigation structure for Columbia College web pages. Developers of Columbia College sites should use this navigation structure or a similar one.
• The most important dual principle of navigation is clarity and consistency. If a site visitor needs more than a moment or two to understand your site's primary navigation structure, the structure is probably not sufficiently intuitive. Navigation is not the place on your site to experiment with unusual conventions. Your site's navigation should meet the expectations of people who use the web--and even inexperienced users should be able to find their way around.
• Wherever links are present on your site, make it visually clear that they are links. It is also helpful to users to distinguish between which links have been visited and which have not.
• The hierarchy of the site should be evident through your navigation--how to find information, and how the information is organized. Users should also find an easy way to search the site.

Courtesy

It is important to design your site from a user-centered perspective, not an institutionally-centered or departmentally-centered perspective. Some rules of web design courtesy:

• Assume that your users do not know who you are, how your department or area functions, and what your organizational structure is. Do not assume any institutional knowledge. Constantly consider what the users of your site will want and expect. Conduct basic usability testing on your site by working with people from your expected audience (people who do not know what you know about your area or department).
• Make sure your users know what to expect. If your site has links, clearly indicate that they are links (the best way to do this in text is to retain the underlining convention). If a link on your site will cause the user to download a PDF file, Word document or other file, tell the user that the link leads to a download. If the user will need certain technologies to view or navigation particular components of your site (make careful decisions about this), indicate this information clearly.
• While navigation is critical, you should not force users to accommodate your navigational structure. A good navigational structure will be the basis by which many users obtain what they want from your site. Still, some users will encounter your site through entrances other than your home page (such as by using a search engine), and some users have navigational habits (such as the back button) that are part of common expectations. Give your users navigational choices. Do not require them to use a specific browser or any non-standard technology. Let them know where they are. Make information and resources easy to find.
• Do not force your visitors to accommodate both horizontal and vertical scrolling. In general, horizontal scrolling is denigrated. Try to design your pages to fit the general screen width that monitors and browsers accommodate the most standard size, currently 760x600 pixels.
• Follow established guidelines for professional presentation--no flashing .gifs, no blinking text, no super-saturated colors, no huge or tiny text sizes, no looped sound files, etc. Do not use automated popup windows (link-based popup windows are fine).

Required elements for Columbia College web sites

It is important for all sites to contain specific elements of similarity, to present a unified look and feel to this core component of the College's web presence

• All official sites must be hosted on Columbia College servers, with URLs in the colum domain. Contact the college webmaster if you have questions about site hosting.
• Site templates should be used as provided, or modified minimally to accommodate specific needs. All modifications to the official site design must conform to the template concepts, so there is a "family look" to all Columbia College sites. The "family look" includes the header and templates elements, as well as concepts such as the general navigation, the color palette, the stylesheet components, and the graphical presentation. Site developers wishing to modify the templates should contact the web master before doing so.
• On all pages of your site, the title bar (the very top of the browser window, above the web page itself) must include the College's name. It must be spelled out as Columbia College Chicago
• On your site's home page, the College "footer" or "masthead" must be present, containing the College's name, city / state, and main contact number.
• On your site's home page only, there must be a link to an e-mail address for your current site administrator. We recommend that you not use the person's name, but rather include a link such as this: Contact the site administrator, or something similar ("webmaster" is acceptable). This information must be kept current and accurate.
• On your site's home page, there must be a clearly-labeled link to the Columbia College home page.
• All pages of your site should reflect basic accessibility standards.
• Understand that as a site developer, you are personally responsible for the following:
• Ensuring that your site complies with the college's applicable standards, policies and guidelines
• Ensuring that the content (including text, graphics, all elements) of your site does not violate any copyright.
• Keeping written permission on file for any photos of people.
• Keeping written parental permission on file for any photos of children under age 16.
• Protecting your server access from unauthorized use.
• Ensuring that your site remains current, accurate and a positive reflection of the Columbia College mission and strategic objectives. When you complete your responsibilities for site development, you are required to turn the maintenance duties over to the next person charged with this responsibility. If no such person has been designated to succeed you, you must immediately inform both your department head and the college webmaster.
• Ensuring that your site, and all directories and subdirectories that comprise your site, remain free of any files or data of any kind that are not directly and currently a part of your official Columbia College web site.

Elements NOT to include

There are certain elements that detract from the user experience, and from the professionalism of your site's presentation. Please do not include the following on your web site:

• Do not include: Individual dates or other specifically time-sensitive information on web pages, unless you are thoroughly prepared to update them every day, or unless you have an automated method for daily updates. It is important to maintain up to date information.
• Do not include: The site administrator's name on every page of your site. A reference to the site administrator (not recommended by name) is recommended on the front page only.
• Do not include: Distracting design elements, such as flashing .gifs, blinking text, background images, super-saturated (very bright) colors, huge or tiny text sizes, looped sound files, etc.
• Do not include: any non-Columbia College advertising, promotions or commercial activity. These activities are prohibited in the colum.edu domain.
• Do not include: any files or data of any kind that are not directly and currently a part of your official Columbia College web site (even if they are not linked on the site).
• Do not include: Frames, Flash-only navigation, etc.

Text and Style Guide

Please refer to the Editorial Standards section of the Brand Identity Manual for additional information and official policy. 

Use the Columbia College stylesheet, templates and content management system which will help you integrate the information on this page into your web development.

If there is a compelling reason that you can not use the Columbia College stylesheet, templates and content management system for your web site, you will still need to integrate certain components of the Columbia College standard look and feel, subject to approval of the Web Implementation Group. Please contact the webmaster if you would like to request an alternative design for your site.

A note about content: Ultimately, you are responsible for the content (text and graphics) that appears on your web pages. This standards guide will provide some assistance in developing your site, but you must be attentive to the accuracy, currency and professionalism of all your Columbia College web pages.

Maintain consistent Look and Feel

see Web Design Standards[link]

One of the best ways to ensure consistency and professionalism in your text is to use cascading stylesheets, which ensure that the presentation of your text is consistent throughout your site. The Columbia College stylesheet makes it very easy to make changes that apply to your entire site--a change to the stylesheet automatically changes every page that refers to it.

The stylesheet

• We strongly recommend that you use the Columbia College stylesheet. Whether or not you use specifications in the Columbia College stylesheet, please follow these guidelines:

Colors in text

• For text, use dark colors on a light background for maximum contrast and readability. Black text is recommended for greatest readability. Always use black text (hex color #000000) for any text longer than a couple of lines.
• If you are using color in text for emphasis, provide an additional means of emphasis as well, for those who are colorblind. Any colors you use should also be clear, contrasting and readable.
• If you wish to use color in text, stick to the web color palette (256 colors) and use colors that will work within the website color palette. Avoid using multiple text colors. Text colors should be used sparingly for selective highlights, not as a way to add decoration or color to a page.

Emphasis

• Do not underline text for emphasis; use bold (<strong>) or italic (<em>) text instead. For web users, underlined text--and particularly colored underlined text--signifies a link.
• When using bold or italic for emphasis, do not overemphasize. As the saying goes, "all bold is no bold." And, since italicized text is harder to read than regular text, use italics sparingly, and for no more than a few lines of text at a time.

Text size

• Text size should be within a readable range. A general size of "2" or 12px is standard for text. A little larger is appropriate for headlines; a little smaller is appropriate for footers. Text sizes and styles for all default tags (<h1>, <h2>, <h3> <p> <a>) are built in to the Columbia College stylesheet. Be aware that font sizes are rendered differently on Mac and PC browsers (PCs render text larger than Macs).

Text font

• Specified fonts on your web pages should be part of the common set that is the default on current desktop/laptop PCs and Macs. This is a very limited set. A good convention is to use the default font set "arial, helvetica, verdana, sans-serif" convention for sans-serif type. (Text specifications are built in to the Columbia College stylesheet. The Columbia College templates and stylesheet are designed to use "arial, helvetica, verdana, sans-serif" as the sans-serif default for text.)
• If you specify a font that does not exist on a user's computer, the browser will use its own default font. You should not specify font's other then the default font set.
• If you wish to use a non-standard font in a limited way (such as in a page header, etc.), you can create an image file using the font. Avoid using multiple fonts on a page--this is unprofessional and distracting.

Links in text

• For links in text, use the browser default colors OR an intuitive color structure. For example, unvisited links should be darker in color than visited links. Make sure text links are underlined* so the user knows they are links. For graphic links, construct the navigation so links are obvious. Be consistent with text throughout your site.
• (While it is true that mouseovers can provide the visual cues necessary to signify links in text, they require user navigation. Underlined text--the universal "link" cue--does not.)

Editing and proofreading

Please refer to the Editorial Standards section of the Brand Identity Manual for additional information and official policy. [link]

• You are responsible for editing and proofreading your site's content. You may wish to create text in a word processing program (such as Word) that has full-featured grammar and spell-checking capabilities. Dreamweaver also provides a very functional spell-check feature. Even so, there is no substitute for a human proofreader. Please be aware not to use special characters in word processing programs--such as em-dashes and smart-quotes--that may not translate to the web.

Understand how people read on the web

Studies have shown that people generally do not read large blocks of text on the web. Most readers approach large blocks of text on web sites in the following three ways:

• They scan the content for highlights.
• They print out pages.
• They leave the site without reading the text.

Therefore, if you want people to read the text on your web pages, make the content scannable. Break it up into small portions. Use bulleted lists. Highlight important terms or phrases (but not excessively). Don't expect your readers to read every word. And try to be concise.

Also, design your pages to lead to the most important sections (primary navigation or elements) with clear visual cues.

You can also serve your readers by making your pages printable. Even if you don't intend for people to print your pages, some will, and you should accommodate this option. You may provide a separate printable version, if you wish to take the time to do so. For general page design, printable pages require certain design protocols: for example, reversing text out of a dark background is inappropriate. You should also avoid extreme landscape-oriented designs. Avoid using frames.

Please refer to the Web Design section of the Brand Identity Manual for additional information and official policy. [link]

Site organization and structure

There are a number of principles for good site organization. In general, organize your site (both your content structure [on your site] and your directory structure [on the server]) with user expectations in mind. Your site's structure should require no institutional knowledge on the part of the user. A complete stranger should be able to figure out how to navigate your site.

It is very helpful to map out your site's proposed organizational structure graphically, to establish links and hierarchy. This will also help you to determine how to use the Columbia College templates and Content Management System for your individual site. If you would like assistance in setting up your site's architecture, contact the college webmaster.

Follow these additional principles as well

Begin with a sustainable, platform-independent organizational structure for your site:

• Make sure that the default file in each directory and subdirectory is titled "index.html", all lowercase.
• Use lowercase titles for all your file names.
• Make sure that file names have proper extensions, such as .html or .htm, .jpg, .gif, .swf, etc.
• Do not use spaces or punctuation in file names, other than the underscore "_" convention.
• Place all your images and graphics in a subdirectory called "images." This subdirectory should be located within your site's top-level directory.
• Use relative pathnames for links and images, where possible.
• Use intuitive naming for your files and directories--keep file names as short and descriptive as possible.
• Use the College's name in the top (title) bar of the browser window for every page on your site--even those in the lower tiers.

Usability and Accessibility

Most important: Keep your audience at the top of your mind during the entire site development process. Other principles:

• Make it obvious. Design your site and your navigation so it's immediately clear where things are and how to use the site.
• Make it accurate. Information should be correct and fresh. The site should be free of typographical and other errors.
• Make it fast. Your pages--especially your home page--should load very quickly in all browsers.
• Make it valuable. Give your users what they came for--and then some.
• Make it searchable. Provide a search function, and optimize your site for presentation on search engines.
• Design it professionally. Presentation matters.
• Keep it up to date. Refresh your content; give the visitor a reason to return.
• Keep your promises. Respond quickly to e-mail and comments. Keep links updated (NO "under construction" pages!).
• Make yourself (or someone else) accessible by e-mail and/or phone.

Some basic accessibility principles

It is important to make your site as accessible as possible for visitors who have some form of disability--such conditions as blindness, colorblindness, or conditions affecting motor coordination. The World Wide Web Consortium (W3C) has developed guidelines for developing web sites that accommodate these disabilities. Review the Web Accessibility Initiative.

Section 508 of the U.S. Rehabilitation Act is also based on these general standards. Section 508 was "enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals." Section 508 web-based standards are summarized here.

• If you are using images or graphics of any kind on your site, use alt tags to describe these elements.
• If your site has audio or video components, provide captions and transcripts of audio, and written descriptions of video.
• For links in text, describe the link rather than using "click here."
• Use a consistent structure in organizing your pages.
• If you are using graphs or charts, provide a text summary.
• If you are using scripts, applets or plug-ins, provide alternative content for all features that may not be accessible in every browser.
• Do not use frames.
• If you wish to use flash, do not use flash as the primary/exclusive navigation tool on your site. Use it only as an auxiliary component of your site. Also, create a mirror site that does NOT require flash.
• Use the accessibility verification tools available online at such sites as http://www.w3.org/TR/WCAG or http://bobby.watchfire.com.

Templates

Please refer to the Web Design section of the Brand Identity Manual for design standards and official policy.

Logos and Wordmarks

Columbia College has specific regulations governing the use of its logos and wordmarks. These images are copyrighted, registered, trademarked and wholly owned by Columbia College, and may not be used on documents, the web, presentations, or any other application, without express permission from Columbia College.

All Columbia College logos and wordmarks are intended for use "as is," which means they must not be altered in any way, including re-creation; changes in size, proportions, colors or characteristics; or special effects such as animations, shadows, etc. If you are developing an official Columbia College site and you need a logo in a specific size or with specific characteristics, please contact the department of Creative and Printing Services or go online to colum.edu/identity.

Logo Specific Details

For specific information about use of the Columbia College identity elements, please refer to the Brand Identity manual, which can be found online at colum.edu/identity. Alternatively, you should contact the department of Creative and Printing Services.

Images and Graphics

The principles and guidelines here deal primarily with static images, but the same principles generally apply to images in flash animations, video clips and other multimedia presentations.

General graphics principles

Professionalism and presentation are important. The way your graphics are designed and presented is a reflection not only on your web site and its information and resources, but also on the entity your site represents (your program or college at Columbia College). If you do not have experience with professional design, we recommend that you obtain assistance from Creative and Printing Services.

• Relevance is important. The graphics on your site should be directly and obviously related to your site's content.
• Legality is critical. Site developers must know, understand and comply with the rules of copyright for images on the web, as well as in print. The easy availability of images on the web, along with the anonymity of the web, can create complacency about image ownership and copyright. As a general rule, if you don't know who owns an image, or if you have not been granted express permission to use an image, DO NOT USE that image. Understand that at Columbia College, web site developers, as well as the directors who authorize site development, bear express and personal responsibility for all content of their sites. Site developers/directors also bear liability for any breach of copyright in all site content, including text, images and auxiliary site features.
• Ensure you have obtained signed authorization to use graphics or images prior to using them on your web site.
• Photographs must be accompanied by signed approval from the photographer and model.
• Images of art in other media must be accompanied by signed approval from the artist.
• You can download the appropriate forms from the Creative and Print Services website:
• An important corollary to legality is ethics in the use of images and site content. Columbia College is committed to ethical web development. If you have any questions about the origin, alteration, use or development of the content on your site, please consult with the college webmaster.
• Understand the regulations for using Columbia College logos and wordmarks on your web site.

Graphics standards

• Keep all graphics for each site together in the images folder. The link paths in your site should be relative (i.e. "images/graphic.jpg" or "../images/graphic.gif," etc.).
• Use good syntax for naming images: lowercase letters, no spaces or extraneous characters except the "_" character, short and descriptive file names.
• Avoid using background images (sometimes called background gifs or tiling backgrounds). They are often distracting, and rarely add to the professionalism of a site's appearance.
• Avoid flashing or "animated" gifs. With rare exceptions, these icons do not add to the professionalism of a web page/site.
• Avoid using cute or whimsical "clip art." Graphics should be professionally produced and presented.
• Pay attention to colors. Your colors should work well together, and should complement the site's images and content. You site should use colors included in the college's official color palette, included in the Brand Identity manual [link] available online at colum.edu/identity
• Use .gif and .jpg images appropriately for the types of images on your site. While some browsers can read .png and .wbmp images, it is not a good idea to use these formats on your site. We recommend that you save your high-resolution original images in an image editing program, and create 72 dpi JPGs or GIFs for web use. (A note on image formats: For the most effective use of the relative compression algorithms, JPG is usually used for photographic images, and GIF is usually used for graphics with larger areas of common color. It is important to note that JPG does not support transparency, so if you want a transparent image, it will need to be a GIF. You can simulate transparency on a JPG by setting it on a background identical to the background color on a web page.)
• Optimize your graphics for small file sizes. Your entire web page should load in about 8 seconds at 56k. Full-featured image editing programs (such as Photoshop) provide tools for image optimization. These include reducing the color palette, creating slices, and increasing image compression. Be careful that your selections for image optimization do not degrade image viewing quality.
• Always use "alt tags" for images, as a component of accessibility.
• All Columbia College logos, wordmarks and symbols are trademarked and copyrighted by Columbia College.

Image dimensions and proportions (size)

Do not resize images in browsers; this degrades image viewing quality. Resize your images in an image editing program such as Photoshop, then specify each image size at its actual pixel dimensions (width and height) for the browser.

Each image should be presented at 100% of its original proportions. Do not stretch or squish images to fit a particular area of your web pages. If you need an image at different proportions than your original image, either crop the image to fit the space at 100% proportions, or select an alternative image that better fits your web page.

In addition to using 100% dimensions and proportions for your images, please make sure that your images are prepared at 72 dpi in your image editing program. Browsers have to "interpret" images at other sizes, and the results are undesirable.

Finally, larger images are not necessarily better--in fact, they often distract from the professionalism and usability of your site. Remember that people use browsers of different sizes, so a 4x6 image on your browser may take up most of someone else's screen.

Getting help with images

If you need assistance in identifying images for use on your site, please contact the department of Creative and Printing Services. An image archive is also available at [link].

 

Acceptable technology platforms and standards

The colum.edu domain is hosted using the Apache Web Server and utilizes PHP as the primary scripting language. Sites developed under the colum.edu domain name are required to use this technology.

Sites developed and hosted on individual department servers may use the technology platform of their choice but will receive limited support from the college's IT department.

File types

Columbia College supports several files types based on purpose. Below are lists of the approved file formats to be used on the site.

Site Files

• .HTML
• .PHP

Documents

The preferred posting method for all documents meant for print or download is as Adobe Acrobat PDF (Portable Document Format). This format ensures compatibility and formatting across platforms. Users will be required to download Acrobat Reader from Adobe to view the documents and pages should provide a link to www.adobe.com on all pages that link to PDF documents.

• PDF (Portable Document Format)
• DOC (MS Word)
• .XLS (MS Excel)
• .PPT (MS Powerpoint)
• .TXT (Text Files)