About

This is a collection of web-building resources, focusing on accessibility and CSS-based design.

Design Archives

CSS-based design is Experimental

posted by jose on April 21, 2004

Excellent slideshow/presentation by Douglas Bowman titled CSS: The Good, the Bad, & the Ugly. It details current and recently past techniques, why they were good attempts, how they fail, and what the future holds. As an introduction to the current state of CSS-based design, it is quick and rigorous, but an excellent overview of an ever-changing technology.

Tables for Data

posted by jose on January 25, 2004

For nearly a decade, tables and layout were synonymous when concerned with web design. Only recently has the drive towards CSS positioning finally allowed tables to be relegated to the unfashionable pile. Don't forget, however, that tables had a clear purpose from the beginning: to present tabular data.

In case you forgot all the tags not used for layouts, such as thead and colgroup, this Advanced Tables Tutorial has all the info you need to properly structure your data.

Bring Print to the Web?

posted by jose on January 03, 2004

A common tip, sometimes handed down as admonishment, to web designers was to never think of translating print to the web. The web, the advice went, is platformless, and a design is not guaranteed to be the same across them. Ignoring the advice, designers targetted specific browsers with pixel-perfect placement.

Now the age of separating content from design is here, where semantic structure is on equal footing with aesthetics. The International Herald Tribune's article layout system is a great inspiration towards creating a web that satisfies everyone. While it does use tables for layout, the article's semantic structure is nearly there. It requires client-side scripting for the familiar newspaper columnar article layout, but it would be possible to have a similar system degrade gracefully to the standard vertically-scrolling web layout.

The possibilities have been presented, and it's up to us to deliver them.

Billowing Text with CSS and Javascript

posted by jose on December 02, 2003

CSS Fisheye implements Ted Nelson's billowing text using CSS and Javascript. Nelson describes how it can be used to dynamically highlight text, much like OS X's icon zooming highlights an icon. The fisheye page doesn't say much in the way of utility, but points to a Flash implementation of the fisheye for use as menus in constrained spaces.

I'm ambivalent on its usage in this manner. It presents all the choices in the space available, but most of the choices are unreadable, so all the choices are not truly simultaneously presented. The true main strength is avoiding scrolling, which would make it seem the usability has increased, but its nonlinear dynamic motion could be confusing to many users. For now, it seems it is limited to esoteric glitz.

Create Favicons

posted by jose on November 18, 2003

favicon.ico (short for "Favorites Icon") is the graphical icon that is displayed on the URL bar and bookmarks list on some browsers, originating with Internet Explorer. It's a nice, unobtrusive way to impress branding outside the page area. This site uses a site-wide yellow letter b.

This article describes how to create one on a Mac. For Windows, Linux, and others, the free png2ico utility can convert PNG files to the required format.

Older Entries