An Ephemeral Site: Denna Jones

Denna Jones is a designer, and we recently launched a site for her that is unlike any other that Jon Gibbins and I have done before. This is it:

The evolutionary bit for us is under the hood, and to understand why, let me introduce you to Denna, herself.

Introducing Denna Jones

Denna’s fascinating to talk to because she is genuinely erudite. Her influences are as diverse as her roles. She’s a former Designer-in-Residence at Central St Martin’s College of Art and Design for the B.A. Architecture course. Currently, she’s Lead Artist for DLA Architecture’s Masterplanning Team, Deputy Editor of Art and Architecture Journal, and the Resident Curator responsible for delivering the arts strategy for the massive Devonport regeneration project. Most recently, Denna’s contributed to books like 1001 Buildings You Must See Before You Die and had an invitation to be the editor of a new tome in the series, 1001 Houses You Must See Before You Die.

Luckily for us, Denna’s work with spacial narratives is often exploratory, so she was open to our newfangled experiments.

A Web 2.0 problem

Denna is also prolific around the Web. She documents her projects and travels using Flickr, and regularly reads, writes about, and observes Web culture as part of her work. So when she came to us to discuss a site it seemed to me she embodied a problem I’d been thinking about for a while: How can our domains be connected to our other personal accounts more naturally? Domains are our identity. However, much of what we publish is locked into other sites where we share it. It’s accessible by APIs at best, or clunky widgets at worst. Technical people can pull everything together but for non-technical people it’s not intuitive. Then there’s the issues of legacy content and copyright. Unsolved as yet, but looming. What will happen to all of our content in five, ten or twenty years time? Will we still have content strewn around the Web disconnected for the most part? Somehow we need to connect the dots. Maybe portable social networks are part of the answer, or Google’s OpenSocial. Whatever the answer, I wanted to include Denna’s existing content in her own site, and to make the future relationship between her Web activity and personal site as seamless as possible.

Web services, say hi to dennajones.com

The content on Denna’s site is delivered exclusively by Web services. We take advantage of the ability to share and manipulate data that those services provide to Denna, then let her choose what to publish on her site, and in what context. This is how:

• Flickr is used to manage all images and some of the site copy direct from Denna’s account. That includes the main display images on the home page, the introduction copy on her work page, and the images and copy for projects. Work projects are managed via a specific Flickr collection, with each set being a project. This enables Denna to choose the display image and write a description that appears on the site. Visitors can also drill deeper via the project link to see other images that Denna has added to each project on Flickr.
• Tumblr is used for Denna’s blog and her about page. The site archives her entries and allows access to tags and dates exactly like a conventional blog would. We also use tags to display different content around the site like the entries tagged with “projects” that are displayed on the work page.
• Ma.gnolia is used for bookmarks.
• Twitter is used for random thoughts and snapshots of her day.
• Upcoming manages events.
• Technorati is used for references to her posts in the wider blogosphere in place of allowing local comments which were considered but discarded.
• Feedburner manages all feeds.
• Google is used for site search.

Jon Gibbins did the heavy lifting around the idea, using CakePHP and SimplePie to manage the incoming data. He also added functionality like Technorati reference counts, and the ability for Denna to refresh her site as soon as she published something elsewhere if she didn’t wish to wait for the automatic updates.

Other small touches were also a pleasure to see unfold, like Denna’s footer image being her Flickr profile image, and the text describing her blog coming directly from her Tumblr byline.

Tumblr posed the most significant problems. When we started development, tags were invisible on Tumblr. Entries could be tagged, but tags were not displayed anywhere for people to use. They were absent from the API. Jon Gibbins wrote a workaround and fired an email to Tumblr suggesting it might be good to give people some way of using tags. After a couple of weeks Jon came back to me and declared that although he hadn’t had a reply, the API had just changed to allow tag access. Perfect! We got an email a couple of days later from the Tumblr crew: Did we know that the API supported tags?

Visual design, typography & layout

I wanted the design to be a container to allow Denna’s own content to flourish. Although we discussed style, and helped Denna formulate her own house style, it was very much in her hands. Strangely, I had no reservations about this. Putting the choice of stock images in the hands of a client might seem risky to some folks; to me it was exciting, especially as Denna was so enthusiastic about having such an intimate level of control over her own site.

Typography and layout have a touch of the Swiss modern using Helvetica Neue or Arial (depending on your platform) with a traditional scale. The layout is a hybrid—part fluid, part elastic — meaning it defaults to a 1024px viewport width, shrinks to fit 800px-wide viewports, but grows with browser font size until it fills the available viewport and then wraps.

Information verbitecture

The information architecture mostly uses verbs in the directory names—an idea that first surfaced with Chris Shiflett during our recent OmniTI design. It means that web addresses make up sentences wherever useful. For example, a blog entry has a URL of http://dennajones.com/writes/entry-title.

HTML, JavaScript & microformats

Plain old semantic HTML is used with CSS for styling. The interface was designed with accessibility firmly in mind; all JavaScript is introduced as a progressive enhancement to PHP-powered features like the slide-show for the home page.

Microformats are used wherever appropriate: hCard for Denna’s contact details; hAtom for blog entries; hCalendar for Upcoming events.

There is still more things we’d like to do, but in the meantime we’ve got a great head start and hopefully the beginnings of something special for an exceptionally interesting voice on the Web.

Parting shots

Working with Denna was inspirational. Her boundless curiosity, willingness to experiment, and professional skill made the whole process lots of fun. Her uncompromising belief in the ability of art and design to improve people’s lives makes her just the sort of person we need consulting on the future of our public spaces. It was a pleasure to give her a quasi-professional site that hopefully embodies the spirit of collaboration, personal creativity and expression we all admire. You can read more of her own thoughts on the design in her entry, Websites and the Science of Happiness. I’ll leave you with the opening line of that entry; it’s humbling to be though of in this way:

“The designers of this website are happiness merchants.”

Thanks Denna.