/ log / 25th Apr, 2008 /

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:

Screenshot of dennajones.com

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:

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.

Denna’s Tumblr account is not linked because she wishes it to remain private.

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.

Share

Browse More Articles

24 Comments

  1. 1. By Ty Gossman on 25th Apr ’08 at 09:46am

    Thanks Jon!

    I’ve added the site to an upcoming gallery journal at mostInspired blog, where they are letting me do some guest write-ups to stay out of trouble. The technical side of this design is enlightening to what types of open source resources are out there.

    Most Gallery #5 will be due out next Monday 4.28. I had to show the happy merchants some love.

  2. 2. By Dave on 25th Apr ’08 at 15:23pm

    I’d be very interested to know the method you used to distinguish between platforms for the fonts. I’m in the process of creating a website where I want to use helvetica for macs but arial on pcs (due to the way cleartype renders helvetica).

    Cheers John

  3. 3. By Dave on 25th Apr ’08 at 15:25pm

    my apologies for misspelling your name!

  4. 4. By Hamish M on 25th Apr ’08 at 16:41pm

    Another great piece of work Mr. Tan. :)

    I love how you make the URLs with the verbs (as you did with OmniTI) — thanks for sharing this!

  5. 5. By Noel Hurtley on 25th Apr ’08 at 19:03pm

    Love the site Jon! It’s really innovative both in technology and design.

  6. 6. By Chris on 25th Apr ’08 at 19:58pm

    I love the write up you have done for this and OmniTI, it’s very informative.

  7. Jon 陳’s profile 7. By Jon 陳 on 26th Apr ’08 at 02:08am

    Thanks for taking the time to comment guys, it’s much appreciated.

    Dave, there’s no special method, just the implicit fact that unless someone has installed Helvetica (Neue Light in this instance) they will not have it by default on a PC, therefore Arial will be used as per the font-family property.

    Looking forward to seeing what you have to say, Ty. Glad you’re staying out of trouble. :)

  8. 8. By Elliot Jay Stocks on 26th Apr ’08 at 03:37am

    Inspirational stuff, Jon. It’s refreshing to see a client who’s willing to pay for all the little 'extras’; i.e: the stuff that isn’t immediately obvious to the end user. I’d be very interested to hear how you pitched this stuff to Danna, although in fairness she sounds like a very decent, open-minded kind of person anyway, so perhaps it wasn’t too hard.

    Your attention to detail never ceases to amaze me. Again, all very inspiring.

  9. 9. By Dickson Fong on 27th Apr ’08 at 00:49am

    The tight integration of existing web services is fabulous—the content-driven layout is just icing on the cake. It’s amazing what can be done without a central CMS. I also think you’ve struck a very nice balance between the Swiss aesthetic and…uhh…the non-Swiss (hip?) aesthetic.

    Congrats to you, Jon, and Denna on a job well done!

  10. 10. By Stephen Collins on 27th Apr ’08 at 19:25pm

    This is inspiringly clever stuff. Really.

    The integration model where so much has been brought together to illustrate the online life Denna leads is the sort of thing I’ve been looking for on my site for so long.

    Now comes the hard part of course – using this as inspiration for changing acidlabs while remaining original.

  11. 11. By Simon Pascal Klein on 29th Apr ’08 at 00:35am

    An inspiration read, not to mention a true “web 2.0” website. Thank you for the insight.

    On a separate note, the link labelled “accessibility” pointing to http://jontangerine.com/help doesn’t seem to exist.

    Kind regards.

    –Pascal

  12. 12. By Nicola Pressi on 29th Apr ’08 at 01:07am

    Great work Jon!

    Can you do this with multilanguage contents? (switch between 2 language for example…)

  13. Jon 陳’s profile 13. By Jon 陳 on 29th Apr ’08 at 01:27am

    Hey Elliot, you’re pretty much right; it seemed like an obvious solution to everyone once I mentioned it. It also lowers the barriers to publishing, and future-proofs the applications. Costs in the long-run will be minimal, both in training and updates, which could be a useful business case in the future.

    Hi Nicola: The short answer is I don’t know, but it would be interesting to find out! :)

    Thanks for all the positive comments guys, and the relative path catch, Simon! It’s now fixed.

  14. 14. By Ty (tzmedia) on 29th Apr ’08 at 13:45pm

    Hi J, the top 10 gallery is up now, they are in no certain order.

    I went on a tangent with the whole "Science of Happiness" theme.

    Design is a journey to that end (happiness) , if you continue to be inspired… ;)

    peace out!

  15. 15. By Joe Leech on 30th Apr ’08 at 04:32am

    Jon,

    The site looks amazing. Great ideas, great design work.

    joe

  16. 16. By David Yeiser on 30th Apr ’08 at 09:59am

    This is very inspiring work. You have got me thinking of "all the possibilities" now. Great job!

  17. 17. By Sam on 30th Apr ’08 at 13:08pm

    Web 3.0 ?

    Good work !

  18. 18. By Kel on 30th Apr ’08 at 13:23pm

    All very amazing! As many of the Web 2.0 services, applications and APIs mature, undergo change, new ownership and the like (flickr/Yahoo and Microsoft all making noise, Tumblr/Union Square investments and who knows about Twitter) plus the DNS "glue" that’s holding all of this together, I wonder what happens to the longevity of Denna’s site?

  19. 19. By Stephen on 1st May ’08 at 13:01pm

    While being just as allergic to change as most, I’m fascinated by your approach to Denna’s site. Your own site deserves praise as well.

  20. 20. By cath on 8th May ’08 at 10:26am

    Hi Jon

    This seriously rocks – love it.

    I have a couple of questions if you don’t mind – how did you plan this out before you started building, or didn’t you? If you did, how did you do it – what artefacts did you create? Traditional wireframes would only describe a fraction of the story..

    Finally, just wanted to say that the verbitecture is a stroke of genius! Cheers.

  21. Jon 陳’s profile 21. By Jon 陳 on 9th May ’08 at 01:54am

    Thanks for taking the time to comment, folks, it’s truly appreciated!

    Kel, Denna’s content is all stored locally for her too, just in case.

    Ty, Stephen, thanks for writing your review posts . :)

    Cath, the layout is nothing radical, and once the idea was formed, neither was the architecture, so apart from a few notes there are no artifacts; the site was planned using good old verbiage and grey-matter memory dumps. :)

  22. 22. By kral oyun on 31st Mar ’09 at 02:22am

    Can you do this with multilanguage contents

  23. 23. By Shane on 29th Apr ’10 at 03:46am

    Really great site Jon, inspiring for all!!

    Thanks for sharing.

  24. 24. By MikkoJ on 9th Nov ’10 at 09:13am

    Really interesting stuff here, keep up the good work!

Post a Comment

Required sections are marked § . Please remember, debate and courtesy are mutually inclusive.

Personal Details and Authentication
Comment

Lately in the Log

  1. Anakin Tue, 26th Jun 2012 {4}

    I’m pleased to be able to say that Analog is joining forces with…

  2. We, Who Are Web Designers Mon, 19th Sep 2011 {65}

    In 2003, my wife Lowri and I went to a christening party. We were friends…

  3. Ampersand, the Aftermath Wed, 22nd Jun 2011 {3}

    The first Ampersand web typography conference took place in Brighton last…

  4. Design Festival, The Setup, and Upcoming Posts Mon, 20th Jun 2011 {1}

    Wow, this has been a busy period. I’m just back from the Ampersand…

  5. Web Design as Narrative Architecture Wed, 30th Mar 2011 {12}

    Stories are everywhere. When they don’t exist we make up the…

  6. Ides of March Tue, 15th Mar 2011 {4}

    My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

Remarks from the log

  1. By ilkyaz reklam in Typeface != Font:

    as a teacher in graphic software. Your article explenation is perfectly clear http://ilkyazreklam.com

  2. By Otomatik Rent A Car in Seven Things:

    I can empathize with the book. The image of a tiny kayak with a man http://otomatikrentacar.com

  3. By Otomatik Rent A Car in Seven Things:

    I can empathize with the book. The image of a tiny kayak with a man http://otomatikrentacar.com

  4. By Otomatik Rent A Car in Seven Things:

    I can empathize with the book. The image of a tiny kayak with a man

  5. By DarkStar in Smoothing out the Creases in Web Fonts:

    I agree with Leicester that table is great!

  6. By Martin Varesio in Ampersand, the Aftermath:

    His dry, droll, richly-flavoured delivery was a humorous counterpoint to some controversial asides…

People and XFN

Analog folks:

  1. Andrei Zmievski

  2. Chris Shiflett

  3. Jon Gibbins

Friends, colleagues, and authors with interesting voices:

  1. Ben Ramsey

  2. Dan Mall

  3. Denna Jones

  4. Ed Finkler

  5. Elizabeth Naramore

  6. Elliot Jay Stocks

  7. John D. Boardley

  8. Helgi Þormar Þorbjörnsson

  9. Joe Leech

  10. Jos Buivenga

  11. Kester Limb

  12. Nicola Pressi

  13. Patrick H. Lauke

  14. Piotr Fedorczyk

  15. Richard Rutter

  16. Rick Hurst

  17. Sean Coates

  18. Simon Pascal Klein

  19. Terry Chay

Live the questions and one day grow into the answers.