CSU San Marcos Web Site (.mov)

• Internet Explorer users declined by 14%
• Firefox users grew by 1.8%
• Safari users grew by 6%
• Windows users declined 12%~
• Mac users increased 10%~
• Users with monitors set to 1680×1050 grew 30%~
• Users with monitors set to 800×600 fell 25%
• Users with monitors set to 1024×768 fell 26%

Accessibility has been a driving force behind the urgency to find a solution for web management. The need to ensure that all of our pages are accessible along with the desire to streamline the process of creating websites has been combined under a new Web Governance plan. In the coming months, committees will be formed and discussions will take place about where the future direction of the Chico State web presence and how we will get there. Below, is a diagram of the problem as I see it and how I would go about implementing a solution.

Click for full size

Chico State Web Presence

This is the Vision. What’s the purpose of the Chico State web site? What message are we trying to communicate? Who is the audience? These are all questions that will have to be asked and will probably be answered in committees at a very high level.

Data and Presentation

This is the Message. At the heart of every web page lies the dichotomy of data and presentation. The Web Content Committee in conjunction with the Web Management Committee and members of campus will determine what is the message. Help from the Web Design Committee will shape how the message should be presented to the public.

The Implementation

This is the Medium. I should note that in this context I’m using the word design to refer to the technical design of the solution; visual design would be the product of the Presentation layer. You might notice a lot of jargon and buzzword in these two lower levels. To be honest, there are a lot of buzzwords that you could plug-in to these layers, but I’ve chosen to recommend the following because, as of this writing, they are what I consider to be the best means toward achieving the high goals of accessibility and consistency. Let’s explore some of these buzzwords to better understand how they can contribute to the solution.

REST

REST is a web service protocol that is almost an extension of the HTTP protocol. Data and be retrieved and stored through different HTTP states. This means that data can be transmitted through a REST protocol in a number of formats. It would be my recommendation that the university try to JSON and XML (ATOM would be ideal). Web Content Management extends beyond document management and includes data management. If possible, we should look to consolidate data where possible and make it available through a web API.

HTTP

This is pretty much a no brainer for non-web services. The catch here, is that we encourage and educate web developers how to craft their pages using POSH and Microformat. POSH is really just a fancy way of saying, “use semantically meaningful mark-up.” This is something everyone should be doing and will help pages become more accessible and the information on that page more findable. Microformats are a real simple way of adding semantic meaning to existing mark-up for objects like people, places, and events through a few extra tags and CSS classes. The tenant behind Microformats is that you make it human readable first, and machine readable second. Pages that include Microformats are parsable by some web browsers and plugins that allow users to easily get data out of a page an into another system, be it an address book or calendar.

XHTML

The WCMS will be crucial in delivering the content. ATI and the accessibility laws we need to be in compliance with expect XHTML documents. How will we ensure the output from the WCMS is XHTML? Template my friend… templates.

CSS

CSS are the preferred means for styling web pages. True story: it’s also the law. Well, actually, web pages simply need to be accessible without stylesheets enabled, but I digress. CSS is a great way to ensure consistency across browsers and platforms in addition. CSS can be leveraged to give each web site a customized look and feel that separates them from other sites on campus. In terms of delivery and organization, there is an opportunity to establish an Asset Library comprised of common styles that could be considered global to the Chico State web presence. In consolidating these styles in an asset library we could create a framework for others to use as is or extend locally. There are a few other benefits that can be derived from this approach: less code and centralized access.

DOM Scripting

Javascript has been around for years. Once considered a necessary evil by web developers it has made a remarkable comeback. Javascript will not be leaving anytime soon so it is important to educate and encourage best practices for Javascript. Most of the newer sites on campus are taking advantage of Javascript libraries such as jQuery or Prototype to make DOM manipulation easier. It is reasonable to expect that an asset library would a few different Javascript libraries available.

The Upshot

ATI and WCMS are giving the university a chance to start fresh with the web presence and build a web site properly. The separation and technologies that I have briefly outlined above are all modern standards that can help us achieve the goals of ATI and WCMS while also providing the campus with a platform to build upon as we move forward.

Cries for Consistency and Branding

I’ll just try to beat Tony to the punch on this one. I’m sure he’ll point out how I haven’t mentioned branding, consistency, relevancy, etc. Yes, those are all very crucial to a successful web site redesign. This post was intended to try and describe how we can piece various pieces of technology, like REST, Microformats, or jQuery, together to achieve those higher goals.

• Accessible
• Manageable
• Usable
• Findable
• Flexible

If implemented properly, Web Content Management would be a great tool for making inroads toward achieving the first three: accessibility, web document management, and usability.

By placing the onus for accessible templates in the hands of developers who understand accessibility and how to create standards based solutions, the campus can ensure that all new sites created in the WCMS are accessible.

A WCMS solution will also play a significant role in how manageable documents will be on the web. Centralizing and standardizing the workflow should make it easier for departments across campus to publish content to the web.

How usable the web site is will depend on many factors. One way to ensure good usability is through centralizing the creation of template sets with those who practice design with usability in mind.

Stay tuned for Part 2 of “Able-ity: Chico State’s Web Presence”

The most exciting element of the upgrade is the move away from table based layouts thanks to the Yahoo! Grids framework. Thanks to some clever XSLT hackery we are now able to support 1-3 column layouts. Plus, we reimplemented our tabs using the YUI Tabs mark-up and styles to take advantage of the browser testing Yahoo! has already done and standardize on something.

We also made a slight change to the location of the navigation bar by moving it above the banner graphic to a location more inline with where major websites (Yahoo, Google, etc.) place the ” YOURNAME Login/Logout” links.

Not content with our footer, we jazzed up the mark-up with some Microformat goodness and tossed in a Campus Search box; just in-case someone has a need to search for something not in the portal.

The finishing touch of the upgrade was the migration away from Verdana as the main sans-serif font, to Helvetica Neue for Mac users and Arial for Windows users. The migration to Helvetica was a small homage to the Swiss school of design who brought us such tools as grid frameworks, which we have employed in the portal layout.

Technorati Tags: yui, yahoo, igoogle,

At the request of Public Affairs, we updated the Public Facilities page. With the ATI we’ve been cleaning up some of the pages on the campus web server as we go just to make sure we’re covering our basis. I noticed that the Public Facilities page was using a University template that appeared to be from the late 1990’s.

So, I cleaned-up the page and made it accessible and valid HTML, etc. In addition, I tossed the content into one of our “beta” templates that’s built upon the YUI Reset/Fonts/Grids foundation.

We hope that this foundation will eventually be made available to other web contributors on campus. Right now, we’re still finding corner cases and looking for ways to abstract CSS into components for more of an ala carte option.