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.
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.
Libraries and Frameworks you can use to create art include:
- Joshua Davis’ Flash based HYPE Framework.
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.