vanderwal.net

Wiggles Rocks Zen Garden

I am a huge fan of CSS Zen Garden and have been impressed for many months by the contributions, but Wiggles the Wonder Worm just floored me. I was and still am in awe. Joseph Pearson did a fantastic job and explains Wiggles and CSS on his site.

CSS in RSS

Something to come back to, CSS in RSS. It works in NetNewsWire.

Headers for everybody

I am trying out visual enhancements on the Off the Top weblog display. I have added the header titles for each of the entries, which I have wanted to do for a long time. This should make the page easier to scan for information.

I have used the dark blue color for the type and given it shading in the CSS to offset the header from the date. Once the headers were added the dates were lost on the page, so I have given the pale orange background color to break up the page a little more. The pale orange background also seems to help the reader scan the page more easily.

Depending on feedback I may keep this and add it to the other multiple entry pages in Off the Top.

Taking Site Headers to the Next level

Dunstan (a fellow WaSP) has done a great job with his new site header at 1976design, his personal site. Dunstan explains that the header is made up of 90 image and uses scripts to drive the weather and time relative header image. The sheep in the header move depending on the weather conditions at Dunstan's farm as well as change based on the time of day (they have to sleep sometime).

CSS Cribsheet

I nearly forgot, Dave Shea has come up with a CSS cribsheet that flat out rocks. Dabbling or living in CSS? Use it.

Harpers redesigned

Harpers Magazine has been redesigned by Paul Ford. Paul discusses the Harpers redesign on his own site Ftrain.

The site is filled with all the good stuff we love, valid XHTML, CSS, accessible content (meaning well structured content). The site is clean and highlights the content, which is what Harpers is all about - great content. The site is not overfilled with images and items striking out for your attention, it is simply straightforward.

We bow down before Paul and congratulate him on a job very well done.

Interdependance of structure, information, and presentation

Peter J. Bogaards explains The Document Triangle: The interdependence of the structure, information and presentation dimensions. This troika is very important clear information consumption, but also information reuse. Structure is extremely important to transmitting information, but also important to information reuse. Information lacking structure nearly as reusable as a newspaper article printed on paper.

One great location to explore the ease of information reuse and the affect the presentation layer has should look no farther than, CSS Zen Garden, where nearly all the content is identical in the various layouts and designs. The structure of the content provides a solid framework to rework the presentation layer. The presentation layer can add to or detract from the clarity of the message as well as the attraction a user may have to the message.

QuirksMode launched

I nearly forgot, Peter-Paul Koch has delivered QuirksMode filled with the good stuff for JavaScript, CSS, etc.

CSS Tabs part 2

Doug Bowman provides Sliding Doors 2 for ALA. The sliding doors rounded tabs done with CSS, meaning the text is not in a graphic and the tabs have rollover effects with out having to build rollover images and deal with JavaScript. Doug's version 2 of sliding doors provides those with pages in CMS or other non-hand built pages. This beats the JavaScript sniffing the URL to set the local tab setting.

Rounding Tab Corners

Eric Meyer presents, rounding tab corners.

Adaptive Path redesign exposed

Doug Bowman discusses the Adaptive Path redesign. Doug provides good insight into the CSS based redesign, which can be seen at the Adaptive Path site.

CSS to hover links in paragraph

I know this has been posted everywhere else in the world of those who care about CSS, but I need this at hand for me... CSS to links in paragraphs until a mouse moves over the paragraph. Stuart does a very good job of showing how this works.

Testing HTML validation of output of tools

Knopf offers a componarison of how well Help Authoring Tools create HTML. The testing includes compactness of code, but even better is validating the output against the W3C. Dreamweaver MX does quite well in the testing. It would be good to expand the testing to some of the other tools, like FrontPage and GoLive.

CSS2 Browser support matrix

Mac Edition offers a Abridged Guide to CSS2 Support that documents in a matrix which browsers support what. Keep in mind that Gecko is Mozilla, which is Netscape 6 and up as well as Firebird (an insanely fast and standards compliant browser). It is also good to note that Gecko-based browsers render the same regardless of operating system, unlike Internet Explorer, which is different depending on operating systems. The matrix also includes how the browsers hold up to various hack tests, most of the test are for box model layout (Tantek and Owen Briggs tests included).

Inside the design process with Doug Bowman

Doug Bowman provides an insanely excellent essay on the design process behind his Zen Garden offering. This is an insanely wonderful description of the thought process that goes into wonderful design. Doug has all the proper steps, which is wonderful to see. If you want to become a graphic Web designer, it takes more than knowing PhotoShop, (X)HTML, CSS, Flash, etc. it takes understanding the process and how to approach each need to solve a problem or fill a need. This really illustrates the information design profession on for the Web.