CEDPA Logo DataBus Header

DataBus Index
More Info

Issue Index

   DataBus - Vol 41 No. 5: August-September, 2001
The Rebirth of the CSU Website

"As you log on to your computers today, I encourage you to visit www.calstate.edu, the California State University's newly redesigned website.
"For just about any kind of organization, a website has become one of the most important vehicles of communication. It is often the first point of contact for the public. To that end, we have aimed to make our website more informative and easier to navigate. We also have placed a special focus on the need to explain more about the CSU system to a larger audience. The website illustrates the depth and breadth of our programs and services, the quality of our students, faculty and staff, and the outstanding work that is being done at our 23 institutions. This site is one of the best ways for us to demonstrate to the public how the CSU is making a difference and the significant impact we have in the state."
Charles B. Reed
Chancellor, California State University

With these words, the newly-designed, standardized, and corporate-focused website of the California State University was launched. In his message to all employees of the Office of the Chancellor, headquarters for the CSU system, as well as to campus presidents and the Trustees of the California State University, Chancellor Reed described the purpose of the new website: to explain more about the CSU and to make information more readily available and easier to find by the groups that the CSU serves.
It all began several years ago, with the birth of the Internet for educational use. Departments within the CSU headquarters were encouraged to develop and publish content on the World Wide Web. Without standards or guidelines, each department developed its own content with its own presentation formats. This resulted in the creation of lots of content in a less-than-cohesive look for a corporate website.
As years passed, that content was gradually refocused and redirected to a more standardized, corporate appearance. A previous article in the DataBus (see "Redeveloping a Website, Vol. 38, No. 5, August-September, 1998) described the first major effort to redirect California State University's main website towards a more corporate-centric presentation and appearance.
Why Refresh?
A website should be refreshed every few years in order to remain "interesting" and focused on its target audiences. Refreshing also provides an opportunity for newer technology to be incorporated into the design and deployment of a website.
Often, however, refreshing is necessary because of a shift in organizational philosophy, to satisfy a new or revised target audience, to support a change in marketing strategy, or to better organize information on a website and make that information easier to access and use. This is especially true with corporate mergers or in cases where a corporate image or theme (such as Hewlett-Packard's new "invent" campaign) is changed.
Refreshing should not be confused with ongoing content review, where existing web page content is periodically reviewed and certified as current and appropriate for publication. Nothing is worse than to pull up a web page that contains stale content or describes an event that has already passed.
The Role of Public Affairs
The CSU website is considered to be a publication of the California State University and falls within the responsibility of the Office of Public Affairs. This office must ensure that all publications of the CSU, including its website, are appropriate, consistent, professionally presented, and meet the publication standards of the CSU.
Web content is developed by several departmental web developers and by the Chancellor's Office IT Services (CITS) web support team. All developed web content is placed on a staging web server and must be reviewed and approved before it is deployed to the live site. The Public Affairs office reviews all proposed content and approves deployment only if it meets their standards. The CITS team deploys approved content and provides the technical support for the CSU website.
The CSU is now emphasizing a standardized "CSU Look" with new colors and symbols to reflect this look. It is important (and appropriate) that CSU's website, one of CSU's most important marketing tools, be updated to reflect this look.
An educational marketing consulting firm, whose specialty was refocusing websites of multi-campus university systems, was engaged to study the CSU website and make recommendations for its redesign. This engagement began about a year ago, with the consulting firm holding focus group meetings to gain a better understanding of the targeted audiences and their needs. The Public Affairs office and the CITS web team also provided input to the project.
A preliminary conceptual design of the new website was presented late last year and refined during the following months. A final design was agreed on in March of this year. It was the responsibility of the CITS web team to incorporate existing website content into the new design using templates and images created by the consulting company.
Larger Than A Breadbasket
The CSU website comprises about 12,000 web pages and another 10,000 supporting files—Microsoft Word, Excel, and Power Point documents, Adobe Acrobat PDF files, text files, and ZIP archive files. The 12,000 web pages were developed by many different developers including department staff and administrative personnel, consultants, and the CITS web team, all using a variety of Macintosh and PC-based web development tools including Microsoft Word, Claris Home Page, BBEdit, HTML Web Weaver, Microsoft Front Page, Adobe Page Mill, Macromedia/Allaire HomeSite, and Macromedia Dreamweaver.
Since existing web team members would continue to support the existing web site, additional staff members were hired to support the conversion project. These new web team members were experienced web developers familiar with the tools that the CITS web team would be using during the conversion.
"When Can the New Site Be Rolled Out?"
This was a difficult question to answer for the following reasons:
  • Materials had not yet been received from the consulting company so the web team could not know what they had to work with;
  • The web team, not being familiar with the development styles or the type of content they would have to work with, could not know how easy or difficult it would be to convert the content to the new design;
  • The existing web site could not be frozen so conversion would be performed on a "moving" target; and
  • The uncertainty of ADA compliance requirements. Recent Federal guidelines set standards for website accessibility for the hearing and vision impaired. While the new website should be developed to address this compliance, there were various interpretations of what compliance meant. It was also unknown if the CSU site was required to meet these standards.
By April 1, the CSU was still attempting to get materials from the consulting firm. While some templates and graphic images had been furnished, the original Photoshop design documents had not. Also, the templates furnished were "example" templates for use in the demonstration site and were not production-ready.
Recognizing that further delays could not be tolerated, the CITS web team began redeveloping the templates and graphic images and developing style sheets to address the ADA compliance issue. The team decided to use a "best-practices" approach by setting font and layout standards to support ADA compliance.
The month of April was spent on laying the foundation for the conversion: preparing templates and graphics and assembling rollout demonstrations for preview by Chancellor's Office personnel. While the preliminary groundwork was complete for the conversion project, it was still difficult to predict a launch date because it was still unknown how the existing content would integrate with the new templates.
Increasing pressure to provide a launch date resulted in the selection of July 16. The plan then was to "freeze" the existing site on June 30, and use the following two weeks to bring the converted pages current and to provide sufficient time for quality assurance and functionality testing.
While an "official" conversion start date was scheduled for May 7, conversion of existing pages actually started prior to May 1. A two-week sampling of web page conversion to the new design templates provided the missing piece of information: Conversion could be accomplished at the rate of about 100 pages per day.
Conversion Strategy
A snapshot of the existing website was taken on May 7, the official "start" date of the conversion. From that point on, each department would be asked to keep a record of that department's web page changes. This would provide a document that could be used for final quality assurance checking. The web team would also keep a change log of every page that was changed on the existing site. This change log would be used to bring that department's pages current after that department's pages had been converted.
The responsibility for completing the home page, the top-level pages, CGI scripting, and the search engine would given to the web team leader. Conversion team members would be responsible for templating existing department web content. File inventories would be taken of each department's content. A team member assigned to convert a department would be given a copy of that department's inventory to use as a completion checklist. That same team member would also be responsible at the completion of the project to bring that department's content current, using the web team change log as a reference base.
Conversion would be targeted for completion by June 30, with the following weeks dedicated to quality assurance and functionality testing. The site would go live on July 16.
A Dose of Reality
With the two new web team members converting a total of about 200 pages a day, the project would require 60 days to convert and template all pages and an additional number of days to perform quality assurance and functionality testing. Clearly, the committed July 16 launch date was in jeopardy!
A technical consulting firm was immediately engaged to provide two advanced-level web support personnel for the duration of the project. These resources were on board within a couple of days. Conversion was now up to a completion rate of 400-500 pages per day, making the launch date reachable.
Conversion progress would continue to be monitored for the rest of the month. If required, existing web team members would be added to the project on June 1 to ensure the July 16 launch date.
Some Good News Follows
The CSU sometimes employs student assistants for temporary assignments or special projects. It was discovered that a returning college graduate who worked in CITS last summer was the webmaster at his college. This person was immediately added to the conversion team. With this added resource, the conversion rate was increased to 600-700 pages per day and launching the new website on schedule was assured.
However, this is not to say that the conversion challenges weren't encountered. Since the baseline standards and procedures for conversion were constantly changing through the early phases of the project, some of the first pages to be converted had to be revisited to bring them up to current baseline standards. Conversion team members had to contend with web pages developed by different developers with varying web development expertise. Although the extent of the project was limited to templating existing content, some pages required extensive rework in order to integrate them with the template and make them function properly. Interdepartmental navigation graphics had to be replaced with new navigation bars; web page URL references all changed, resulting in many broken links that had to be repaired. Changes in department names had to be addressed since the department name made up a part of that department's URL.
The new design provided added opportunities for content entry points. Departments were asked to provide recommendations for entry points to their content and these had to be included in the top-level navigation. Departments were also asked to provide a list of commonly accessed or bookmarked documents so that referring pages could be created to direct visitors to the new content location.
Information was collected from campus websites for various information category entry points. New campus link pages were created for commonly requested information such as campus admissions, alumni, athletic programs, employment, purchasing departments, and personnel locators. A personnel locator for the Office of the Chancellor and an online personnel directory were also created for the new site.
The Home Page Dilema
The new home page design was attractive and functional, using a snappy color scheme and attractive graphics. The main focus was a picture of one of the 23 campuses. Clicking on the title bar would result in the display of another campus picture. The main message was presented directly beneath the campus picture. To the left of that were major information groups; to the right were additional information groups of a more general nature. The background featured a watermark of the CSU seal.
However, the page was inefficiently designed and slow to load. Comprising over fifty graphic images (every bit of information conveyed on the home page was an image), the page required over 90 seconds to load and display using a browser connected via a 56k dialup line.
The design produced a "flyout" box that displayed additional information about a group when the mouse was moved over the group name. Since information displayed in the flyout box was presented in a tabular or indexed form, the expectation was that these flyouts were "clickable"—clicking on an information item in the flyout box would navigate to a page with additional information. Although the consultant firm was asked to make the flyouts functional, the final product did not contain functional flyouts.
Home Work
The home page is probably the most important page of the site. It must be visually appealing, it must be functional, and it must be intuitive. Above all, it must load quickly.
Before the site was launched, several issues had to be dealt with:
  • The load and display time had to be reduced to around 30 seconds;
  • The number of graphic images on the page had to be reduced;
  • The campus picture display mechanism had to be redesigned so that preloading of all campus images wasn't required;
  • The campus picture display mechanism also had to be redesigned to avoid reloading the entire page when a new campus image was requested; and
  • The flyout menus had to become functional.
As launch time neared, additional items were identified:
  • Add a search capability to the home page;
  • Add launch points for the Chancellor and the Board of Trustees to the home page; and
  • Add an employment launch point to the home page.
In order to accomplish this, the execution of the page was completely redesigned without changing the page's appearance. Many individual graphic images, including the watermark, the color bands, the bottom blue band, and the background color, were incorporated into a single background image. The main message was converted from an image to stylized text. The campus picture display was replaced with a more efficient Javascript program that didn't require preloading all campus pictures into a table. This new script also doesn't reload the entire page when a new campus image is requested.
Making the Flyouts Functional
Flyouts are a fairly recent development in website functionality. Flyouts are designed to temporarily "fly out" and overlay existing content with a display image of different content. The presentation of information within the flyout determines what kind of flyout it is. If the content is in textual form, the flyout is informational. If the flyout contains information displayed in a tabular or indexed form, the flyout is expected to be a functionally clickable menu. Dragging the mouse over and clicking on a flyout item should result in navigatation to an appropriate page with more information.
Many websites already incorporate flyout menus with different appearances and functionalities. In order to capitalize on already-developed technology, various college websites were analyzed to see if their flyout implementations could be incorporated into the new CSU website. The implementation developed by the University of Washington (UW) was ideal for the CSU site. The UW flyout script was very well documented and completely parameterized, allowing for easy customization.
While the CSU home page uses left-to-right and right-to left flyouts, the UW flyout script could only support left-to-right flyouts. Additional programming had to be completed to accomplish this. More programming was required to compensate for idiosyncracies between Microsoft IE and Netscape browsers, especially on Macintosh platforms.
The Home Stretch
Templating of the web pages was completed during the third week of June. This allowed the team to concentrate on bringing the templated pages current, perform quality assurance and functionality testing, reconcile and repair the numerous broken links, and make overall adjustments to the website "look and feel" to ensure uniformity and consistency throughout. Website "tuning" was a process that continued right up to launch time.
With most major outstanding issues resolved, the site went live on Friday, July 13 at 7 PM. Functionality testing continued throughout the weekend in preparation for Monday's "official" launch.
It's Launch Time
Employees of the CSU Office of the Chancellor were greeted Monday morning with large placards in the building lobby advertising the new website. Early that day, Chancellor Reed issued a communication to all office employees describing the purpose of the new site.
The first week of the new website's appearance brought many compliments from CSU campuses, from the CSU Trustees, and from others across the nation including the University of Texas. Also included were a few "I can't locate this anymore" messages and some recommendations. Some suggestions were implemented to further refine the website:
  • A "campuses" link has been implemented with a flyout listing links to all 23 campuses;
  • The Office of the Chancellor's street address is now clickable and will produce a PDF containing a map and directions to the office;
  • The flyout listing the Systemwide Initiatives now lists the initiatives as clickable links;
  • The Board of Trustees flyout now includes clickable links to the Trustees' meeting schedule and meeting agenda; and
  • The Locate & Find flyout now features entries describing the Chancellor's Office index, Map & Directions to the Chancellor's Office, a Navigating this Site reference, a link to the site search and a link to the site map.
Looking Back
Refreshing a website is a major undertaking that requires careful planning and sufficient resources, especially when working with a website that contains many thousands of pages and support files. It is important to have the proper equipment and licensed software tools. For this project, a separate development environment had to be created to support the "new" website while the existing site continued to operate and additional software licenses had to be obtained for the consultants.
It is vital to know the capabilities of your support team and provide them with the tools they know best how to use.
Know what your outcomes will be and what will be required to get there. Develop a conceptualization of what the site will look like and how it will operate. Identify related processes and programs such as search engines, CGI scripts, database connectors, and site mapping programs that are affected by the refresh and ensure that they will be compatible with the refreshed site.
Conduct regular review meetings with the project team to discuss the plan, issues, problems, and overall project progress. Identify functionality standards (such as page centering) that must be adhered to. Most importantly, document everything each step of the way—problems encountered (whether resolved or not), broken links, and any code adjustments that were required to make the page functional.
If the site that's being refreshed is constantly changing, have a plan to ensure that updates made to the existing site are also applied to the refreshed site. For a period of time immediately preceding the new site launching, this may require dual site maintenance—making changes to both sites.
Allow for ample quality assurance testing. Even with three weeks of testing, adjustments were being made right up to the site's launch, and adjustments continued after the launch. Be aware that some of your "fine tuning" will occur after the site is launched, for this is when people see how their department content interacts with the site.
A project such as this requires careful planning and lots of hard work by a dedicated team of professionals, but the end result is well worth the efforts. The web team and the CSU invite you to visit our newly redesigned site at http://www.calstate.edu.