Last week, after quite a bit of work, the re-designed teens site went live:
In discussing what a new site might be like with Witt, Christi and WACTAC, we came to the conclusion that the types of content we wanted to be on the site didn’t have a very clear relationship to each other, and that the audiences for each are different. There is, in effect, a “business audience”, which is visiting the site looking for information on what Teen Programs is, what they do, how to apply, etc. This audience most likely consists of parents, other museum professionals, and Teens looking to apply to WACTAC. The other audience are other teens, or others interested in what the teens are interested in. The new site literally divides the page in half for each of these audiences.
“The business side of things” is a simple information based site, loosely based on the look and feel artistic program sites. The layout was adapted somewhat to fit better into the dynamic space of the Teens site, but the style is the same. “The play side of things” is where the teens make their mark by posting blog entries, artwork, links and events. There are several different ways that WACTAC makes this page theirs:
- Blogging: the site’s back-end is WordPress, so blogging is built-in. Every teen in WACTAC now has an account, and Witt is working with the council to cultivate ideas that can be formed into posts.
- Links, for when the teens find something that isn’t quite worthy of an entirely new blog post, but maybe deserves a short note and a link, we’ve got that covered too. The links are culled from del.icio.us via RSS feed. Right now we use a shared wactac account, but in the future, and should any of the teens want to have their own del.icio.us account, a network can be set up and we can pull a combined feed.
- Events are highly important to the site as well, and these are pulled via RSS from a shared account on Upcoming.org. We wanted the teens to be able to not only highlight their events at the Walker, but non-WACTAC Walker events as well as non-Walker events. I looked into several systems to essentially create a group calendar, and using Upcoming in this way seemed the easiest. It is essentially a social bookmarking service like del.icio.us, except it deals with the temporal and location based data that an event has. The time and location is in the RSS feed, which makes it a cinch to pull and display.
- Art from the teens and other people that have influenced them will also be on the site. For the time being, this section is a category within the blog that gets special treatment. Images posted here are displayed in a larger size using a lightbox clone. Down the road, depending on how much this is used, we might consider replacing this with flickr. We’re using yahoo services for everything else, so why not make it complete?
- Customizing the interface is one of the features of the site that I think makes this page really the teen’s space. Much like myspace, the teens can customize the colors, text, and background of this side of the site. Unlike myspace, they don’t edit the CSS themselves. Instead, the theme includes an admin panel that allows the teens to pick the colors for the boxes and text, as well as change the header and background images. I’m using a handy color picker based on mootools to make it easy to use.
This is the most “dynamic” site I’ve built so far, and I re-learned a lot about using javascript, especially with the Mootools framework. The hyper-object-oriented nature of JS + moo is both confusing and extremely powerful. For a javascript framework, mootools is quite compact and does a lot. There are also quite a few classes and user-contributed scripts out there based on it. In addition to the color picker mentioned above, the business side of things uses a heavily modified version of SmoothGallery. This article on “The Hows and Whys of Degradable Ajax” was also helpful in figuring out how to do the ajax loading on the business side of things in a semi-accessible fashion.
There are other things in the works for the site, including a Facebook app and perhaps a MySpace widget. That is the subject for another day, however.
If you’re looking for the old site, it still exists in archived form: Arhived Walker teens website.