I use transparent windows for my terminals, so you can see beneath the text to other windows or desktop backgrounds beneath. I've done it for a long time on Linux as just a neat trick to show the desktop beneath whatever I'm typing, but it works better if you can see the actual window beneath the terminal. On Windows you can do this with various add-ons (don't remember which one worked best, so sorry no link), but it works well natively on the Mac and recently with Compiz I've gotten it to work the way I want on on Linux.

Combined with the microscopic fonts I like, this makes my screen hard to read for others; one of my collaborators used to insist I make the windows opaque and increase the font size so he could see them. So why do I do this? Even the Mac OS X tips page that tells you how says it "has no serious purpose" except to make your windows look pretty.

Well, I beg to differ. This screenshot shows why:



Here, I'm working on some Python code to automatically generate a list of labels for my web site. I've never used the Python ftp library before ... so I just Google'd the Python ftp protocol, found the Python doc page, and began prototyping my code straight at the Python prompt, looking through the terminal window to see the sample code beneath it.

Mmmm. Composity goodness, captured via Mac's Command-Shift-3 screenshot keystroke and edited with Preview. If you program at the command line you should try it - your eyes train up pretty quickly to ignore whatever's behind the terminal unless you need it.

-the Centaur

For the longest time I've tried to design the websites I'm responsible for to be pretty narrow - the Library of Dresan is supposed to be just over 800 pixels, fanu fiku is supposed to be just over 700 pixels, and Studio Sandi is just about 800 pixels. The rationale behind this was that in the olden days of the Internet, user's screens were as small as 1024 by 768 or even 800 by 600, and even users who had wider monitors displayed their browser in a window that didn't take up the full screen.

I remember reading an article (I don't remember where) that pointed out with browser sidebars and chrome, the width of the page could be far less than monitor width. I measured it on my circa-2000 screen and I found that I had about 800 pixels of width for the web page. So that led to the design of the Library: 800 pixels of width, 600 for the main content and 200 for the sidebar. The banner itself was a little over 1000 pixels so that it didn't end abruptly if the user made their screen wider.

But that was almost ten years ago. Does that logic still hold?

Many people view the web on laptops and phones. Dealing with phone resolution will require more than just dealing with screen widths, so I'll return to it in a later article when I tackle the CSSification of the Library. But a quick search suggests that typical laptop screen widths range from the 1024x768 XGA standard to the 1440x900 WXGA+ widescreen standard. There are some people who have smaller laptop screens, of course, but they are in the minority. Conversely, screens do get larger: for example, for many years I owned a glorious Toshiba Satellite laptop with a 1600x1200 screen. But on those larger screens users often use smaller windows for their browsers: for example, on this MacBook Pro, with a 1440x900 screen, I'm only using a little more than 1200 pixels for the browser window - and typically I use narrower windows.

So something more than 800 and less than 1400 appears to be a good guess. Discussion on the web seems to indicate people are starting to give up on the 800 width and moving to 900 or more, but rarely more than 1024.

Digging around, I found more articles with the same idea - Mario Sanchez argues the goal of web site width is to avoid horizontal scrolling, and recommends you design your web site for 800 pixels, with a layout that works well at 1024. Jacob Nielsen recommends straight out to optimize your site for 1024, but not to design for a specific size and let your layout be "liquid", changing width for your users's monitor sizes. Personally I think this breaks down if you have images to display, though I reserve the right to be convinced otherwise by CSS wizardry at a later time.

All of the above are opinions, of course; what about the evidence that they're based on? The Steam Hardware Survey put out by Valve Corporation suggests that 95% of users use screens of 1024 pixels or wider, with fully 50% at 1024x768, 1280x1024, or 1440x1900. Similarly, the Browser Display Statistics analysis by W3 Schools indicate 36% of users have a display resolution of 1024x768 ... and 57% have higher. Update: I checked the Library's own stats, and found that Google Analytics does indeed track screen resolutions. Less than 5% of all users had a resolution less than 1024x768, and only 1.5% had a resolution less than 800x600. Of that, 0.5% were listed as no resolution, leaving 1% at 640x480. Those numbers will come back later...

Take all that with a grain of salt given that some significant percentage use browser screens larger than their monitor resolution - Nielsen points out in the same article I mentioned above that as resolutions get staggeringly large (he predicts 5000x3000 in the future) users begin to display multiple side by side windows. True enough, at the Search Engine That Starts With a G, all of my officemates have dual monitors with aggregate resolution of 2400x1920, but none of us typically displays a browser window larger than half the screen - 1200 pixels, minus chrome or subtracted width to see other windows underneath.

So that leaves me with the feeling that Nielsen and Sanchez are essentially right. My personal take on it for the Library is:

• Your website should display well in no more than 1024 pixels of width. You may use a "liquid" layout that can expand to use more space, but it should not require more than 1024 pixels to display.


• The essential content of your web site should fit into the leftmost 800 pixels of width. If you are displaying graphics or images or have a lot of site widgets, some of these features may scroll off to the right on an 800x600 screen. Don't put anything essential on the right. Your mileage may vary if you are creating a web site for right-to-left languages, of course.


• Make sure your "liquid" layouts don't break down on very wide or narrow screens. A user who displays a very wide window on a 2400 pixel wide screen should not see all your paragraphs turn into long marching lines of text - these can become hard to read. Similar problems can happen when a screen is squeezed very small - for example, Wikipedia used to display terribly on certain mobile phones, creating vast blank spaces for the user to navigate through.

The new design for the Library uses around 1000 pixels, with the leftmost 600 for text (to satisfy the 1% of people who are still stuck at 640x480), the next 200 for site navigation (for the less than 5% stuck at 800x600), and the remaining 200 for everything (and everyone) else: search boxes, author pictures, and Flickr badges; in short, anything less important than the articles and navigation features. Technically this is not a "liquid" layout, but hopefully this will be something the vast number of users can enjoy with little scrolling, and something that other users can appreciate without feeling left out.

-the Centaur

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 p roduced 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 li nkbar 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