Painting the Web

Jeff Schiller has been working on an application to use SVG to visually demonstrate his site's browser user statistics. It's really beautiful work, and makes use of the FakeSmile JavaScript library to provide SMIL support for browsers that don't support SMIL.

If you're not familiar with SMIL, it's a specification to provide declarative animations, rather than procedural animations such as those implemented with JavaScript. You would create an animation object and associate it with a page element rather than animate the element with JS. The advantage is that the animation works even if JavaScript is turned off.

Plus, they're a lot of fun to use.

While visiting Jeff's, do check out his use of SVG with his comments, too.

Why use SVG (Scalable Vector Graphics) when there's Flash? Because you can't right click on a Flash file and view source to see how to create the animation or effect.

SVG is a living classroom; every instance of SVG, a lesson.

I accidentally discovered a photo stream at Flickr, and then an associated web site titled Lunch in a Box: Building a Better Bento, both of which are absolutely marvelous. The author/photographer associated with both, who goes by the name of "Biggie", has this to say about herself:

I’m Biggie, a work-at-home mom of a three-year-old preschooler (called “Bug” online) in San Francisco, obsessed with cooking and building a faster, better packed lunch. I lived in Japan for nine years and am fluent in Japanese, but am into all cuisines. I’ve noticed loads of time-saving packed lunch tips in my Japanese-language cooking magazines and bento cookbooks, so in February 2007 I started trying them out, tweaking them for a non-Japanese kitchen and world food. My goal is tasty, attractive lunches with a minimum of morning prep. Comments in Japanese are welcome too. BTW, my “Biggie” moniker is short for Bigfoot, a childhood nickname because I have big feet.

Biggie shares a connection with the Japanese: that ability to make the every day and mundane into an exquisite work of art. The web site has a charming header image that highlights the focus of the site. The author also makes wonderful use of her photos to illustrate her different articles. An important component of how well her photos work together and with the overall design is that she uses the same lighting and background for each of her food shots. Combined they form a cohesive whole for the entire site.

The site also has some very useful tips about how to freeze any number of foodstuffs so that "fresh" materials for cooking, or for bento boxes, are always available.

This is a fun and colorful web site and photo stream regardless of whether you're a foodie, interested in Japanese culture and cuisine, topic-specific web design, a photographer, or just wanting to see something bright, lively, and different.

(By the way, I discovered the site when I was looking for instructions in how to freeze and reheat pancakes.)

Put away those Web 2.0 shiny buttons, and scrape the header from your page. Forget that color wheel, and trash those photos. Why on earth have three stylesheets when one will do? And stop fussing with those navigation bars, and no one cares about the search form.

The new thing in web design is minimalism. If you're prepared for a new zen-like web experience, clear your mind, still your thoughts, take a sip of green tea and follow the minimalistic link to true web enlightenment.

A couple of people have kindly pointed out Robert O'Callahan's wonderful exploration Applying SVG Effects to HTML.

I've held off on posting about it, as I wanted to create a longer writing trying out Robert's work. However, I didn't want to put off sharing this effort any longer. I'll have more on this mix of HTML and SVG at a later time. In the meantime, if you're a fan of SVG, you'll want to check out Robert's work.