Post Archive

› July 10, 2003

CSS Rollovers - No image preloading needed

More brilliance from Pixy, who couldn't post this himself here, since (at the time of writing) I have the site hidden for renovations.
In a remarkably simple fashion, your rollovers can respond instantly, even on the slowest connections. Pixy achieved this by cleverly using one image for all three rollover states and adjusting the background-position to show each one as appropriate.
Check out a working sample and the code at pixy's example page.

Web design process

webgraphics screen captureWhat is the best way to get from point A to point B when designing with web standards? Perhaps we agree that a key difference in the process is that one begins with the semantic coding structure, and then uses CSS to present the design as one wishes. A fantastic example of this is CSS Zen Garden with its many beautiful design variations.
I've noticed that in re-designing webgraphics, I'm perhaps not following this methodology properly. Instead, I have a pre-concieved design that Pepe created in Adobe Illustrator (thanks Pepe!), and I am re-building section by section to emulate that design. This is much the way table based designs are done, and the assumed risk is that the semantic meaning will be lost in an effort to present the design just so. Or maybe not.
There is more than one way to skin a cat, even when it comes to semantic structure, and so, given two "proper" ways to markup a given chunk, would it not be better to choose the one that is more easily suited for the design you had in mind? This may be a missunderstanding on my part, espeically given that any element can be altered from it's default display state with CSS - which theoretically could let you do almost anything with any element. I say theoretically because unless you want to create a complex web of CSS filters, you'll still want to have your design look right in a core base of newer browsers, and so at least some complexity will find it's way in to all but the simplest designs somehow.
Right this second (written a few days before the new design is revealed), the semantic structure is acceptable although probably not ideal. I'll be calling on some help from Joshua and Dan Rubin, who hopefully will be able to improve the implementation here by taking a gander at what I've done with fresh eyes.

Resources and References

You might also be wondering what happened to that list of resources that used to live on the right-hand side of the homepage? It occured to me that this list could be better maintained by the collective authors, rather than just being a list that I cook up myself. So the new list will be on it's own page (more room to grow), and will be setup as a Movable Type weblog so that the other authors can add and edit the list. The list will be orgainzed with Movable Type's category system so that if it grows beyond what should be put in one page, we can show a category at a time.

Blogrolls, RSS, and MovableType Plugins

On the old site, we had a list of weblogs that were related to this one in some way (aka blogroll), then we got fancy and added some phpscripting that tied into the blo.gs service to retrieve the "freshness date" from each weblog. This freshness date was then used to display the blogroll in order of most recently updated, and it even highlighted which blogs were updated today, yesterday or eariler.
That was all fine and nice until something happened over at blo.gs, and the whole script stopped working, no complaints with blo.gs btw, it was a very nice service to offer for free, but another solution was needed.
Now that I'm folding together the new version of webgraphics (this post was written when the site was "under repairs"), I'm looking into new ways to achieve the same effect with the blogroll, preferably without relying heavily on one outside source.
Enter MTRSSFeedDate plugin for Movable Type. This plug-in apparently enhances another plugin called MTRSSFeed by adding a date retrieval feature. So I'm thinking this could be the solution, let's see what happens.

Interview with Eric Meyer

This interview with CSS guru Eric Meyer is a critical reference for anyone looking to explain the benifits of using web standards to collegues and clients. I often find myself short on words when I try to explain why tabless websites that use semantically meanful markup is a good thing, it's difficult to avoid slipping into tech-speak when discussing the subject.