California Government CSS Design

Freshness Warning
This article is over 8 years old. It's possible that the information you read below isn't current.

CalGrants.org, a site that I’ve been working on for the last couple of months has finally launched after many rounds of revisions and copy edits. The site was built in conjunction with design firm THOMAS|ferrous and PR firm Runyon Saltzman & Einhorn. As far as I know, this is the first California state government site that is designed with entirely CSS layout techniques.

The site features an accessible design that allows screen readers, PDAs, and non-graphic browsers to have full access to the content while providing a rich graphic experience to others. All text is resizable and the layout flows to accommodate the size changes.

The headings use a replacement technique that swaps out text headings for graphics in browsers that support it. All non-content images are pulled in through CSS, getting design elements out of the HTML entirely. Since pages of the site are intended to be printed, a print stylesheet was crafted to ensure a quality printed page.

Here’s proof that a CSS site doesn’t need to be the boxy, minimalist designs that are often shown as examples.

Chris Vance
November 21, 2003 10:14 PM

Wow, very well done. The pages flow nicely in Lynx, with the navigation at the bottom (which surpised me until I looked at the page source).

The only minor thing I noticed was that on the Testimonials page, the comma after the “Executive Director for the California Student Aid Commission” is within the STRONG element, while the comma after Kim Chueh’s “Actress” is outside the STRONG element (this is easier to see in Lynx, when bold items (eg. strong and b) are colored differently to separate them from surrounding text. However, this is just nitpicking. :-)

In IE 6/Win, does anyone else notice a thin vertical bar (an artifact, apparently) just to the right of the menu_bottom gif image at the bottom of the page navigation? It appears after IE loads the image…

I have to congratulate you and the others involved with the project; the site is very well executed, accessible, and polished (just look at the print styles). Excellent work.

Michael Kear
November 24, 2003 4:12 AM

Excellent site. It shows what can be done by learning and implementing standards.

You might like to look at the sponsors page in Opera though. In Opera7.1 all the logos piled on top of one another instead of being laid out in a nice 3-column table as they are in IE.

Other than that, it’s fast as a flash, and easy to navigate. Nice job.

Jon Holden
December 2, 2003 4:55 PM

While not a State agency, we are a Federal agency in CA. Does that count?

Our site is also 100% CSS, and has been for some time. This is also a rare within the Federal government, as is the concept of Section508 and accessibility.

One of the big payoffs in converting our site to CSS was that most of my pages immediately met Level 3 of the WAI without any additional work.

This discussion has been closed.

Follow me on Twitter

Lijit Search

Best Of

  • Debunking predictions Read/Write Web's authors have some goofy predictions.
  • The mouse and me Not only is the mouse very destructive, but it's evaded all attempts to capture or kill it so far.
  • Embrace the medium The Web is different than print, television, or any other medium. To be successful, designers must embrace those differences.
  • California State Fair The California State Fair lets you buy tickets in advance from their Web site. That's good. But the site is a horror house of usability problems.
  • Writing Realistic Job Descriptions Publish a job listing like this one and you are virtually guaranteeing that you won't get qualified applicants for the position.
  • More of the best »

Recently Read

Get More

Subscribe | Archives

8

Recently

invisible Fence (Mar 22)
The New York Times has a paywall now. Sorta. If you don't choose to ignore it.
Black status icon for Chrometa (Mar 17)
Replacing the status icon of Chrometa
Using Google Voice as your voicemail on AT&T (Oct 26)
How I set up my iPhone to use Google Voice as it's voicemail system.
Don Mattingly forced to make coaching change (Sep 17)
New LA Dodgers coach starts to wonder if he knows the rules of baseball at all.
In which Vonage pretends their prices haven't changed (Apr 12)
Translating what Vonage marketing says about their price increase into plain English.
Twitter app competition (Apr 12)
Life as a Twitter app developer is far from over.
Twitter app competition (Apr 12)
Life as a Twitter app developer is far from over.
The rest of the world is not like you (Apr 5)
Normal people are different. Keep that in mind when creating or marketing a product.

Subscribe to this site's feed.

Elsewhere

IMified
Build instant messaging applications. (My company)
SacStarts
The Sacramento technology startup community.
Pinewood Freak
Pinewood Derby tips and tricks

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

AIM or Skype: akalsey

Resume

PGP Key

©1999-2012 Adam Kalsey.
Content management by Movable Type.