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,

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.

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

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.

Now, I’ll be the first to admit, when we developed these pages last year there was some heavy 37signals influence that carried through (bright colors, larger type, etc). However, we had a good justification for those decisions. CAS was launch simultaneously with the new Portal so we wanted to grab the attention of everyone clicking through the login. Now, after a year with the new Portal, it was time to make things a little more subtle and increase the connection with the campus.

To strengthen the bond with the universities online brand we adapted a similar background gradient which also helped contrast the white background of the login form. In addition, we included the Chico signature header and grey seal combination from the universities web template system. With the previous version, the only references to CSU, Chico were the Wildcat logo and text Wildcat Login.

Other changes include a crude pop-up div that explains what the username actually is. In addition, we added support phone numbers for Students and Faculty/Staff incase users have problems.

Hopefully the new design will roll out next week after graduation. For the time being, I’ll be tweaking the design and continuously running browser tests.

Without further-ado, CAS Version 2.

…where the rain gets in \ and stops my mind from wandering…

While working on a new design for the CAS login page I ran across a bug where a background imagine would not properly attach itself to the bottom of a screen. The odd thing was that the rendering error only appeared in Firefox.

This bug also affects the CSU Chico home page.

After some research, I discovered that I had omitted the background-attachment property for the body tag. By default the attachment is set to scroll and by simply defining the attachment as fixed, I was able to cure the Firefox bug (which may have actually be an all other browsers are broke bug).

Original Code

Fixed Code

So to the unsung maintainer of the CSS code base for the CSU Chico homepage, if you’re curious why this is happening, here’s the solution.

Looking for some inspiration, I pulled out our copy of O’Reilly’s Designing Interfaces. I was able to capture some quick notes and high-level concepts from a few chapters on interface design and information design.

Here’s what I have to start with:

Interface Design

The organization of an interface and be generalized in four terms

1. Objects
2. Actions/Tasks
3. Tools
4. Categories/Subjects

Page Layout

Three high-level elements of a page layout are

1. Visual Hierarchy
2. Visual Flow
3. Grouping/Alignment

Visual Hierarchy

Visual Hierarchy is the idea of using visual cues to signal an order of importance for a layout. This can be accomplished through such aspects as:

• Whitespace
• Font Size
• Contrast between colors
• Shapes
• Lines and shapes

Using these visual hierarchy tools we can take two routes to establishing a hierarchy: through a framework or the center stage approach.

With a visual framework you are trying to create a consistent look and feel across a large number of pages or screens. The other option, one that 37signals advocates is, center stage or epicenter design where the largest part of the application is dedicated to the most important part of the site/application. For the Room Reservation application it makes sense to take the center stage approach.

Visual Flow

In our western culture it is safe to assume that most users are trained to read from left to right and from top to bottom. Visual flow is about creating focal points that draws the users attention and leads them through a screen in a logical manner. The screenshot of the Room Reservation app above does not have a very strong visual flow, which is something that needs to be addressed.

Grouping/Alignment

The grouping and alignment of elements on a page can assist in creating relationships between two items. With RoomRes’ current design there considerable amount of space between the navigation and the table which indicates that there’s not a strong relationship between the two objects. In fact, this is incorrect, as the navigation directly effects the data displayed in the table. On the screen were users make a reservation the form field labels and widgets are both left justified creating visual separation between the two when a more effect way to display that information would be by right aligning the labels and left aligning the widgets.

Before:

Information Design

A layout/design that has solid information design will answer the following questions for an information consumer:

1. How is the data organized?
2. What’s related to what?
3. How can I explore this data?
4. Can data be rearranged?
5. Can it show me only what I need to know?
6. What are the specific values?

Visual Monotony

Visual monotony can be created by having large tables of similar data. This can lead to increased time spend trying to zero in on specific information. The RoomRes table presently just has some sample data, but it wouldn’t be hard to imagine this quickly getting out of control.

It’s suggested that you break up the monotony through contrasting data you want readers to see first; think of it as a micro-level visual hierarchy.

The question is: how do you visually differentiate reservations? Would it make sense to have the title of the event in bold or the date in italic? Thinking back to 37signals I remember how they like to display events that are imminent in a larger size font than those that are far in the future. So with the help of Ruby, I marked reservations in the table as either:

• Next week
• The week after next
• More than two weeks away

Before:

After:

Final Touch-ups

It’s not quite there yet. In times like this, it’s best to simplify.

Much better. There is still room to grow, but this is a marked improvement from what I started with.

In the CSS, just add:

or whatever color you’d like. Ruby on Rails just flat out rocks sometimes.

Technorati Tags: rubyonrails, css

Strip down your sites of CSS and show us your HTML with pride. For more info on Naked Day, check out the man who started it all, Dustin Diaz.