New Media Initiatives Blog

For this year’s Museums and the Web Conference, my colleague Witt Siasoco and I wrote a paper about our experiences designing the new Teen Programs and WACTAC website. Our paper is now online: From Boring and Non-Offensive to Dancing Unicorns and Glitter Text: How to Create a Teen Web Site with Teenagers. Here’s an excerpt:

Our first goal was to provide WACTAC with a sense of ownership of the site. Teen Programs' staff believe that in order for programs to be successful, WACTAC must be involved with the process. All of the WACTAC programs and events are conceived and implemented by WACTAC members themselves. In order to make WACTAC ownership a priority, the staff had to treat teens.walkerart.org as an educational program in itself. The staff realized that if WACTAC actively engaged in the site, other teenagers would be interested. While a new site might bring increased traffic, we decided our measure of success would be the site's relevance to WACTAC teens and their social circle.

Witt and I will be part of a panel, Designing with Teens, on the last day of the conference, discussing the paper and process of making the site and our favorite. We may also have some super-slick give-aways. We hope to see you there.

As for the title of our paper, From Boring and Non-Offensive to Dancing Unicorns and Glitter Text: How to Create a Teen Web Site with Teenagers, it started off as a joke. Then we decided it accurately described the design process and reflected the tone of the site, so it stuck. And whenever we mention the name to people, they get a kick out of it.

This video speaks for itself, but this guy obviously knows how to find a niche:

If you have animation
Use with moderation
Cause search engines can’t index the information
…
Dont use bold
Please use strong
Cuz if you use bold that’s old and wrong

Full lyrics here.

Be sure to check out m0serious’s other videos. Paid Search 101 and Link Building 101 are both funny and informative. m0serious would appear to fall into the web development branch of the nerdcore hip hop genre.

The good news: about 8 million music lovers are simultaneously clicking on our email blast for information on Rock the Garden!

The bad news: about 8 million music lovers are subsequently melting our server. I feel like I should drive out there and blow on it to help keep it from overheating, but I’m on my bike today and not up for the extra miles. So…

Dear music lovers,

I’m glad there’s so much interest in the show! I think it’s going to be great. But please, please, click slower!

Love,
Your frantic webmaster

While preparing a presentation on multi-user digital tables, I was directed to the Great War tables at the National World War One Museum, Kansas City, MO. Produced by Second Story, these tables are just one part of the museum’s use of interactive technology to tell the story of WWI. The two tables, each 26-feet long, feature “individual interactives where visitors can: learn about military technologies through 3D reconstructions; compare the arsenals, artillery and airplanes used by the combatant armies; watch archival video footage and browse photographic collections; and create their own propaganda posters and war memorials that they can email to themselves and others. At any time, museum staff can launch the tables into a group based interactive experience where up to 24 visitors engage in a series of interactive challenges that parallel the military, political and civilian aspects of the war.” For more on the tables, see the Second Story page. And don’t miss the Quicktime demo.

For some time, most Walker websites have been without an important branding element: a favicon. Most often, favicons appear in the location bar, next to the URL of the site. They can also appear when a site is saved as a bookmark and in a browser tab. For sites with RSS feeds, favicons also often appear in the RSS reader as an icon next to the feed name.

I find I don’t often notice when a site is missing a favicon, but do notice when it has one. Coming up with a 16×16 pixel icon that somehow encapsulates the identity or brand of an institution is difficult, especially when said institution doesn’t have an official logo. In discussion, we thought about using a W, but thought it looked bland. The Walker typeface has a nifty alternate W, which is what we ended up using:

Side note: I recall Matthew Carter, designer of the Walker Typeface, discussing the typeface and W at an Typecon 2003. I remember him telling a story about the W, so I contacted him to clarify:

I did the disjointed alternative W in the Walker type convinced that I had invented the form. But later when I was at the AIGA conference in New Orleans I saw the same W on manhole covers. Some of my type designs have been inspired by lettering I’ve seen in the everyday environment — Mantinia is partly based on lettering on the Boston Public Library, for example—I use the Walker W as a facetious example of the environment ripping me off.

We’ve made use of Walker’s alternate W for most neighborhoods. However, a few sites that have their own identities or are a bit more unique get their own favicons:

• Most Walker sites
• Walker Blogs
• New Media Initiatives
• Design
• Visual Arts
• Performing Arts
• Film and Video
• Families
• Teen Programs and WACTAC
• Art On Call
• Gallery 9

The simplest way to put a favicon in a page is to simply drop the favicon.ico file in the root folder of your site. Most browsers will automatically see the file and display it. An .ico file has some limitations, most notably it does not support transparency. Most modern browsers (e.g. not Internet Explorer) support using a gif or png file that supports transparency, and will display cleanly when in a bookmark menu or a tab. To satisfy both groups of browsers, we actually use two icon files, a favicon.ico for Internet Explorer and a png for everyone else. Here’s what the code that goes into the head of every page looks like:

<link rel="icon" type="image/png" href="/favicon.png" />
<!--[if IE]>
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />
<![endif]-->

Curiously, my browser of choice, Camino, ignores the favicon.png file and instead uses the .ico with it’s white background. However, I’m part of a very small minority and the .png with transparency works fine for Safari and Firefox users.

One of the myriad of things New Media Initiatives is responsible for around the Center is motion graphics. There are already great posts on here about some of the more interesting technical projects involving multiple projectors and fancy software. In addition to these more complicated solutions, we also do some old-fashioned linear motion graphics work in After Effects. I’ll dig into the recesses of my hard drive in the future and post some of that work.

In the meantime, here’s the latest piece for the Insights Lecture Series, which began yesterday. This video is entirely based on the poster designed by Vance Wellenstein and Ryan Nelson, I just added some slightly sophisticated transitions and timing.

2008 Insights Lecture Series Teaser from Justin Heideman on Vimeo.

This video runs for the period before each lecture start, while visitors are finding seats. It’s used as branding for the series and to remind those who haven’t bought tickets to the next lecture they might just want to. I’ve put the video on Vimeo rather than YouTube because Vimeo’s video quality is much better.