Recently I started to notice that the design of the Library is getting long in the tooth.  One friend who was a web designer commented that it looked very "old Internet".  I've watched another friend innovate on his blog design while mine was staying still.  Work on my wife's web site made me revisit some of my choices, adding a description and picture but making few other changes.  I know the site needs a redesign because I have a lot more material coming out soon, but the final trigger was when I couldn't attend a talk and looked up one of the authors to learn more about their work - I think it was Oren Etzioni - and I was struck by his straightforward site design which enabled me to quickly find out what he was working on.

SO, I'm redesigning the Library.

I'm an artist in addition to an author and researcher, so simply gutting the site and making it simpler wasn't my goal: I have specific ideas about what I want the site to look like, and I started designing a new one.  Partway through that redesign, I noticed that I was doing a fair amount of research work - examining other blogs that I admired, investigating blog widgets, investigating CSS and HTML advances, researching color theory and design principles - but not blogging any of it.  In fact, come to think of it, typically when people redesign their sites they put all their work under a bushel, trying to hide their planned change until the last possible moment, possibly exposing it to a few trusted users in beta or with an alternate link prior to springing it on the world as if freshly formed and fully new.

Well, phooey on that.  The thought process that a web designer goes through producing a web site is interesting (well, to other web site designers, anyway) and provides a valuable resource to other designers doing their work.  I wished that other people had blogged the process that they went through and the alternatives they explored, as it would help me make my own choices - but you know what?  I don't control other people.  I only control me.  And if someone else hasn't filled the gap, then it's my own responsibility to come up with something to meet my needs. 

SO, I'm going to blog the redesign of my blog.  How "meta".

There's far too much to put into a single blog entry, so I'll start off going over the thought process that led to the design in more detail, then explain my strategy.  The first thing that I did was look at other web sites that I admire.  Earlier when working on my wife's web site I found a number of beautiful looking blogs, but when I started the redesign, I started my search over, focusing on sites of artificial intelligence researchers, bloggers, writers, and artists, trying to find ones I instinctively admired with interesting ideas, features or appearances that I could steal.  Some of these included:

• Oren Etzioni's Home Page: Quickly Present What You Are Doing
  An "old school" (not that there's anything wrong with that) web site from an academic researcher, it has an "old style nav bar" up top that quickly tells you how to find his publications.  Below that is text which points you to his research projects and most cited publications.   From this I gleaned:
  • Organize your work into logical areas
  • Make navigation between areas easy
  • Put things people want up up front
• Rough Type by Nicholas Carr: Put Your Content Front and Center
  Featuring a straightforward design that gets you straight to his content, Rough Type also has an author blurb and a pointer to his most famous article, "Is Google Making Us Stupid?" and his book "The Big Switch" The key points I gleaned from the site:
  • Get your content out front and center
  • Tell people who you are
  • Point them to your best work
• Vast and Infinite by Gordon Shippey: Show the Author, Try Fun Features
  Written by an old buddy from Georgia Tech, Vast and Infinite isn't that different from Rough Type.  However, he's constantly innovating, adding a site bio and author picture, tweaking his banner, adding shared items and flickr gadgets and more, whereas my blog tends to stand still.  The lessons from this:
  • Show people your picture
  • Keep your content front and center (sound familiar?)
  • Trying out new technologies generates interest in the site
• Home Page of Jim Davies: Show the Author, Organize Your Site Logically
  Jim Davies is another academic researcher, with a much more modern site.  Like Oren Etzioni, he has a navbar, but also a large picture, a more detailed description, and links to his art, store and blog.  Unlike Oren, each area of the site seems a little more organized, without the duplicated links to publications and the odd inclusion of news articles in his personal page.  Jim takes this further by having extra blogs just for rants and links.  My takehomes were:
  • An academic site can have a modern design
  • Showing people your picture creates interest
  • Don't be afraid to segregate content into areas
• Marvin Minsky and John McCarthy: Tell People About Your Work, and Share It
  Two of the greats in artificial intelligence have interesting sites filled with lots of content.  Both start with a description of them and their work and then continue with many, many links to their most prominent work.  Minsky puts up chapters of his most recent book; McCarthy includes a lot of narrative that gives context.  What I like:
  • Tell people what your site is about using narrative
  • Put work you are interested in front and center
  • Fill your site with lots of content
• Greg Egan's Home Page: Fill Your Site With Lots of Content, and Share Your Research
  Greg Egan is an author I admire primarily for his novel Permutation City and his short story Dark Integers, though I have more of his books in the queue.  His site's layout is a little harder to read than some of the others, but it is filled with pointers to all of his work, to the research that he did to create the work, and applets and essays related to his work.  The takehome from this firehose is:
  • Fill your site with lots of content
  • Share the research you did on how you produced your work
  • Don't be afraid to promote your work by showing it to people

There was one more site that kicked this all off, which I will hold in my pocket for a minute while I talk about opinions.

Unlike Jacob Nielsen, I don't have research backing up these conclusions: they're really just guesses about what makes these site work, or, worse, just my opinions about what it is that that I like about these sites.  What's dangerous about opinions is that recent scientific work seems to indicate that they're often post-hoc explanations of our instinctive reactions, and they're often wrong.  So, to combat this tendency, I looked at other resources that specialize in information about good design of web sites to try to get information about what I "should" do.  I don't pretend I've absorbed all the information in these sites, but am simply including them to show you the kinds of things that I looked at:

• Jacob Nielsen's UseIt.com: Make your site fast, simple and standards based
  Jacob Nielsen's site on web site usability is so simple it hurts my eyes.  I don't like to actually look at it, but I do like the ideas.  He's got a breakdown of recent news on the right and fixed web site content on the left; the idea of the breakdown is good but seems opposed to my goal to work with Western left-to-right reading.  Jacob points out that he uses no graphics because he's not a graphic designer, and that's fair; but since his site is unpleasant for me to read I only loosely follow his recommendations.  But one cool thing about his site: if I resize the browser his content stays divided more or less the way he's put it because the structure is so simple and well designed.
• But What Are Standards?  W3C and Webmonkey
  The W3C is the official source of standards for the web like HTML and CSS, but I've always found their standards hard to read (and I've read many, many of them over the years).  The new site redesign they're testing seems to make it easier to navigate to find things like the CSS Standard, but it is still hard to read and lacking the practical, let's get started advice that I want.  Back in the early days of the web, I used Webmonkey as a source of good tutorials, but the site seems crufty and broken - trying to narrow in on the CSS tutorials got me nothing.  I have a number of offline books, however, and am a whiz at reverse-engineering web pages, so when I get to the CSS articles I will detail what I learn and what sources I use.
• CSS in Practice: FaceFirst.us and CSS Zen Garden
  I know the designer of FaceFirst.us, a social networking site, and in exchange for me beta testing his site he turned around and gave me a tutorial on how he uses CSS in his process to ease his site design.  In short, like Nielsen, he recommends separating the "bones" of the site from the content using CSS id's and classes.  One example he showed me was the CSS Zen Garden, which has fixed content that is modified radically just by stylesheets.
• But What Did Your Thesis Advisors Do? Ashwin Ram and Janet Kolodner
  I also dug into what Ashwin Ram, my thesis advisor, and Janet Kolodner, a member of my thesis committee and my original advisor, did with their web pages.  Both Ashwin and Janet have profile pages back at the College of Computing, but they also have richer pages elsewhere with more detailed content.  I have no intention of slavishly copying what my thesis advisors are doing, but as far as the research part of my web is concerned they're similar people solving similar problems whose solutions are worth looking at and adapting for my own use - why, yes, my Ph.D. was in the case-based reasoning tradition, why do you ask?  On that note, it occurs to me to look at other colleagues' web sites, like Michael Cox's site.

Standards, shmandards, cool sites and web lights - all well and good.  My brain exploded, however, when I saw Warren Ellis's web site (billed as a blog for mature adults, so it's occasionally NSFW - be warned).  In my mind, Warren's site had a number of great features:

• Show the Author's Name:
  The author's name is hugely printed across the top - so you immediately know who this is, as opposed to say my dumb blog where my name is printed in 2 point type.  And Warren's domain name is also his own name plus dot com, so that he can actually show his name and site name in the same logo.
• Keep the Text to the Left:
  The text of all the articles is corraled to the left margin so they can be PRINTED, aligned to the top of the page so it dives into the header and is immediately visible.  Almost as if Warren's site was designed knowing that the majority of the people who read the English language read it from left to right, therefore the text should appear where their eyes go.  This pattern, plus the pattern of the rest of his design, is consistent with putting the good stuff in the F-shaped heat map that typical users eyes take when scanning your page.
• Use the Middle of the Page:
  There is a bar of links in the MIDDLE of his page, immediately to the right of the articles, which puts it close to the golden ratio of the horizontal space of his site design (as viewed on my monitor).  This "linkbar", held in place by CSS wizardry and a black magic compact with the Old Ones,  contains permanent site features that most need to be linked - message board, mailing list, comics, his novel, his agents, and his bio inline.  Think of it as sexier version of Jacob Nielsen's "Permanent Content" box.
• Put Sparkly Things to the Far Right:
  Beyond the linkbar are all the cool fun site features like a search bar, podcasts, images and other nonsense, which are fun to look at but less important.  On my site, some of these are on the right, or even at the very bottom of the page; on other people's sites they appear on the left, distracting Western readers from the article and possibly shoving the right ends of the articles over the printable width of the page.  Ellis' contract with Cthulhu and the hellish powers of the W3C enable him to safely corral these fun elements to the right where they belong.

The linkbar was the most mindblowing thing.  It eats into the banner.  It's readily visible.  It leaves the text on the left, but it's close enough to be visible on most monitors.  The whole site is 997 pixels wide, so it will fit on a typical 2009 web screen, but if your screen is smaller, first you lose the fun sidebar, then the important linkbar, and only then do you lose the text.  Even better, since the linkbar CSSes its way into the banner, the size of the site is controlled by the header image so it won't get wider.  So your Nielsen-style variable content is always visible on the left, and your important fixed content is always on the right, and God willing it will never get hosed by someone resizing their window.  Once I saw that, I decided I'd done enough work researching, and it was time to start redesigning.

SO my first step is to unashamedly steal Warren Ellis's linkbar.

Immediately I sent out my secret agents out to download his HTML and CSS and transport it to my secret lab so I can take it apart piece by piece until it has no secrets left.  Of course, some of Warren Ellis' choices won't work for me, so I will have to do a lot to adapt the ideas he and his team used in his site design.  And simply imitating the form of Warren's site won't be successful, any more than just making a movie just like Star Wars called Sky Battles would be immediately successful.  (Battlestar Galactica fans, take note: while I loved the show, I think it's fair to say that it took the reinvention of the show to really produce a success, which was based on making the show interesting in its own right and not copying Star Wars).

The outer form of his site is the product of his inner success - he is a popular, prolific author with a message board, mailing list and weekly online comic he uses to promote his other writing and books, which makes the prominent placement of the message board agents and books highly important in the linkbar.  Starting a message board and getting an agent won't help me.  I, in contrast, am a jack of all trades - developer, researcher, writer, artist - using this blog as a tool to force me to stop being a perfectionist, complete my work, and put it out in front of people.  So my goal is to make sure this website displays my content, prominently surfaces the areas of interest I work in, and has a few flashy features to attract attention to individual items of more permanent interest.

In upcoming articles I will detail my original constraints for the blog version of Library of Dresan and why those constraints failed as the site evolved over time, my goals for the new site design, what I think I understand about how wide to make your web pages and where to put your content (and where I got those crazy ideas) my move to the use of CSS and my attempts to make the site work well on screen, on printers and phones, my attempts to better exploit Blogger, Flickr and other web gadgets, and the work that I'm doing investigating color theory and generating the new art assets that will make up the site.

Hopefully you'll enjoy the process, and when it's done, that you'll enjoy the site more.

-the Centaur

Labels: Development, Webworks