For our February meeting, Refresh Detroit was treated by David Brooks with an interesting take on the ever-changing topic of web imagery. While I’ll hit on some of the main points, I want to encourage you take a look at the slides from David’s presentation and explore the numerous resources and fun sites he links to.

David Brooks describes himself as a web designer and developer with an overactive interest in photography. He’s the co-owner of Northwood Compass, which a small mixed media studio. Before that he was a User Experience Developer at Fellowship Technologies. He also worked at Fry Incorporated where he did development work on large-scale ecommerce websites.

David’s presentation focused on two types of web imagery – Responsive Imagery and Dynamic Art. An example of Dynamic Art may be something slow, like a site background that changes according to the weather or time of day. An extreme example would be a generative art system that updates the site’s background continuously.

David describes Responsive Imagery as more practical. It allows for the interaction with the user, context or data. A good example is a graph that changes its appearance as a user interacts with it. “The biggest selling point to me for responsive imagery is minimizing upkeep,” explains David. For example to update a bar chart you simply change the data. You don’t need to create a new image.

In-browser options, for creating responsive imagery include Flash, SVG and Canvas. An advantage they have over server-side technologies is that they are cross-platform. “If you site’s platform changes from a Java platform to maybe a PHP platform… you still have your graphic solution,” said David. They are also often easier to maintain than server side options. He compared the three options.

Flash provides very nice interactions, is widely supported and great for video but isn’t compatible with the iPhone/iPad. It will also make the CPU work hard.

“SVG has been around for a while … but we’ve just started talking about it again,” said David. Some of its advantages are that it’s great for JavaScript interaction and it’s fast. Also, it’s vector based so it scales nicely. Unlike Flash, it works on the iPhone/iPad. On the downside it’s difficult to write longhand and it doesn’t incorporate video. There is no native support for Internet Explorer but it’s coming and there are libraries that can help you overcome this lack of support in earlier versions of IE.

Canvas is the newer option that became available with HTML 5. It’s lightweight and quick. The image it creates is actually PNG data. There are ways for the user to save a PNG file or for the server to generate one from it. While there is no native support in IE, Google has created Explorer Canvas to bring the same functionality to it.

Next David discussed Dynamic Art. A good example of how Dynamic art can be an alternative to static design imagery is the organic pattern in the background of the Order of Magnitude web site.

Two fun examples, where the browser actually becomes a dynamic artistic medium are Endless Mural and Weave Silk.

Libraries and Frameworks you can use to create art include:

• David’s Artisan JS Javascript library.
• Joshua Davis’ Flash based HYPE Framework.
• Okapi JS is a Javascript framework, which implements some of Joshua Davis’ principles using Canvas.

The final one that David discussed was Rapheal. “It actually lives somewhere in between… responsive imagery and these art frameworks,” he explained.

David’s presentation demonstrated how the technology for Responsive Imagery and Dynamic Art are quickly evolving. It also showed that there are some nice tools available to anyone who wants to start working with them now.

• Meetings