Institutional Knowledge

As the summer winds down, WEBD has successfully completed the uPortal upgrade that we’ve been diligently working on for the past month. In addition to moving to the uPortal 2.6 framework, and DLM based layouts, we’ve improved the presentation layer quite a bit.

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.

Yesterday, we updated the CAS interface. It’s now based on the Yahoo YUI CSS library. Working with the YUI library has been a blessing. We’ve converted most of our web applications, as well as any websites we create, and even a few we update, to use the YUI library. Next up to get converted to YUI, the portal… stay tuned.

It is just me or did anyone else notice that iGoogle (aka Google Personalized Homepage) is now using YUI Grids ? Talk about validating the direction you’ve choosen for adapting a framework: both Yahoo and Google are now using the YUI Grids framework. Mega Cool.

Technorati Tags: yui, yahoo, igoogle,

Since the release earlier this spring we in Web Application Development have been slow transitioning our web designs to incorporate the Yahoo User Interface Library, or YUI for short. The library provides a fantastic array of widgets, styles, and design patterns for keeping development time to a minimum (think: reuse) and consistency high (think: familiarity).

So far we’ve managed to grab tons of milage from the YUI Grids/Fonts/Reset style-sheets (which as of 0.12 have all been conveniently packaged in 1 file). These basic styles serve as a foundation for all of our Rails projects now and as well the web sites we build like the new ADA Committee and the Enterprise Systems Group.

As you can see from the ADA Committee and Enterprise Systems site, I’ve managed to shoehorn in the CSU, Chico templates into a YUI Grids based template. It still has a few kinks to work out, but for the most part it looks pretty darn good. In addition, as Pat mentioned, it was a snap to get the site to pass accessibility checks without having a 1995 inspired nested table mess.

Just as an exercise, I decided to re-implement our Central Authentication Login Page using YUI Grids. The results can be seen here. As you can see, the pages looks almost identical. During the re-implementation I cleaned up some code and made some format modifications and made the text browser-scalable. As Pat points out, YUI Grids lets you worry about the layout and how things look rather than “will this work in IE?” (which it does).

Possibly the nicest part about the YUI Grids is that it only adds 3k in page weight and yet you get grid-based layouts, scalable font sizes, and Grade-A Browser Compatibility (Table of Grade-A browsers)

Having the ability to quickly create grid layouts has been a blessing and will be even more fun in the future having discovered this little gem, the CSS Grid Builder.

The “Corporate Bit” Since we’re not suppose to endorse any company or product, I’d like to point out that there are a lot of other “interface libraries” that could suite your design/development needs. We’ve chosen Yahoo because it was simple, easy to use, flexible, and open source.

Technorati Tags: csuchico, css, webdesign, yui, yahoo

I just saw that Yahoo has released it’s 2006 Q4 browser grades. IE 5.5 is off the list as is Firefox 1.0.x. IE 7 has been “reiterated” — probably because it’s made a final release.

The more I look at the Yahoo Developer Network, the more I see us using their stuff. At first we just did the Grids CSS for layouts. But now I’m looking at the Menu widget for replacing the “home grown” code on the campus home page.

Why should we keep our own list of supported browsers and do all that testing ourselves? At the very least for public pages we should take all the help we can get. I know that vendor apps will always do their own thing, but that’s their problem. Until we get to 508 compliance, and then it’s our problem again.