Posts tagged as “Development”

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

... we're going back to the setting that makes Qumana put in extra line breaks.

Because if I leave that setting on, apparently Blogger reformats all of my old articles, removing the line breaks.

Not good enough.  Not good enough at all.  It's easier to fix the twenty or so Qumana articles and to use shift-breaks in future to accomplish my will than reformat all 200 previous entries in my blog, so Blogger wins.

So my buddy Gordon has beat me to the punch (yet again) by finding the site FaceStat, which does wisdom-of-the-crowds rating of pictures.  His came out pretty good; I used one of my favorite pictures of myself, which turned out ... not so much.

Ok, so I already knew my beloved missing cat is more attractive than me.  But did the crowds in their infinite wisdom have to put down "repulsive" for my level of attractiveness?  Sure, maybe they're referring to the prominent surgery scar on my arm.  But that doesn't explain why the crowds thought I was "definitely not to be trusted."

Stupid crowds.  I didn't want your wisdom anyway.

-the Centaur

... of making things easier on Qumana was to make things harder on Blogger.  Apparently the setting I turned off on Blogger to prevent the extra carriage returns in Qumana means that Blogger posts will come out all mooshed together.  Sigh.

So after my essay on intellect and will, Jim posted an interesting comment, to which I replied ... a long-ranging reply which could have been a blog post in its own right. SO I finished the reply, hit preview to check it out, and then hit view blog. Note that none of those steps involved "publish" ... so the whole essay disappeared.

AAARGH!

These browser based apps still leave something to be desired. Anyway, it was really witty and acknowledged all of Jim's good points while carefully highlighting my areas of difference in a subtle yet engaging way. You should have been there ... *sigh*. Will rewrite it (in Qumana so I don't lose it) and will post it as a new article shortly.

-the Centaur

As part of making my "Blog a day through May" and "Distract Myself From Writing This Paper" tasks easier, I hunted down this Blogger bookmarklet which which enables you to select some text on a page and then with a single click get a micro-Blogger window so you can edit and send a post (like this one):

What is BlogThis! ?: "BlogThis! is an easy way to make a blog post without visiting blogger.com ... Clicking BlogThis! creates a mini-interface to Blogger prepopulated with a link to the web page you are visiting, as well as any text you have highlighted on that page. Add additional text if you wish and then publish or post from within BlogThis! ... just drag the link below to your browser's Link bar. Then, whenever the mood strikes, click BlogThis! to post to your blog:

This isn't the only bookmarklet out there. There's also one for Google Bookmarks, Steve Rubel at MicroPersuasion has his own list of key bookmarklets, and Irregular Shed shows us how to make your own. I know these work in Firefox but I suspect you can get this to work in other browsers as well.

So check out these links, and if you find yourself doing any of these common tasks in less than a click and the associated commenting/typing time, add yourself a bookmarklet and save a few minutes of your life.

-the Centaur

Qumana is a great blog post editor, but it has an interesting property that makes its posts appear weird on my web site.

If you hit return, it wraps the whole paragraph in a HTML "p" tag

like so

.

Which is nice, in theory it's how you're supposed to use the "p" tag, but ...

It puts huge spaces between paragraphs in my blog.

I'm not sure why this is happening.  Some CSS error in my stylesheet?  Some translation ... WHOA!

I just did "view source" on the published blog, and found extra
tags after each paragraph in the published blog!  So THAT's what is happening... now, of course, the question is WHY, since they don't show up on Qumana's Source View.
Here's seeing if switching from "Enter Starts A New Paragraph" to "Enter Starts A New Line" does the trick.
9:56pm hit return.
-the Centaur

Google News has a new feature where searching for a politician's name will pull up recent quotes:

Consider this election season. All along the campaign trail we have heard candidates' thoughts on the future of health care, the war in Iraq, and even each other. These debates have generated untold pages of commentary, and it's only too easy to lose track of original quotations. Unlike much of the surrounding rhetoric, these quotations cited in news articles are not conjectures but facts - transcriptions of actual words and thoughts - be they campaign promises, arguments or opinions. Wouldn't it be great if they were easily searchable?

You can search for quotes right at the top of the Google News box; it apparently just shows news if it can't find quotes. At the time of this writing, searches on John McCain, Hillary Clinton and Barack Obama all turn up with news quotes:

Hillary Clinton: "I believe the potential for life begins at conception"



Barack Obama: "You go into those small towns in Pennsylvania and, like a lot of small towns in the Midwest, the jobs have been gone for 25 years and nothing's replaced them"



John McCain: "We need to make a clean break from the worst excesses of both political parties"

I have a policy of not directly talking about my employer on my blog, so I deny all knowledge of the hard work of my cubemates in making this happen. Check it out...
-Anthony