Serving hearty nuggets since 2001

Presentation Notes: Browser As Canvas

This presentation's original home was at but has been moved here in hopes of someone actually finding it. Additionally, many of the links contained within are now defunct but have been retained for completeness.

New Media Underground Festival
July 12, 2001
Brooklyn, NY
Creative problem solving & thinking of the browser window as your canvas


Rather than put on a slide show of my current projects I wanted to provide some background on the type of projects I do. Each major piece I do is grounded in trying to solve questions that I have about designing for this medium. It may be a proof of concept, or building on the foundation layed by my or others work. But it's always about problem solving.

What follows is a linked outline of sorts to all the things I remember mentioning during my part of the presentation.

Previous Problem Solving

To give an idea of where I'm coming from I hit a few of the past issues I've concentrated on.

  • pnhObjectLibrary : object oriented javascript : a repository of cross-platform/cross-browser javascript objects that I use for some of my work.
  • chris/photography2 : photo display : the main focus of this interface was to present a large number of photographs in an organized fashion.
  • chris/photography3 : photo display : here I was building on my previous work, trying to build on some of the weakness of the previous piece [img size, click history, etc.]

Current Problem Solving - The Browser as Canvas

The remainder of my presentation focused on the main issue that I'm tackling at the moment. As a reaction to the proliferation of sites contained entirely in popup windows I started to question what my canvas as a web designer is. The time honored methods of deciding what browser size you're gonna design for, setting your photoshop canvas to that size, then design just weren't cutting it for me anymore.

Current Approaches

I'm not the only one in the world to consider the problem of how to deal with the display of content to multiple resolutions. So I tried to highlight some of the approaches being currently implemented. All of these methods should be familiar to anyone who spends any time on the web.

  • CSS layouts : liquid layout : example of a liquid stye 2 column layout where the width of one or more columns grow to fit a large percentage of the browser
  • A Random Yahoo News Story [was] : oversized page : example of a page designed with the main column inside a "basic" viewing area leading to horizontal scroll bars for those at lower resolutions
  • k10k screenshot 1 : extraneous content : a sample showing k10k displayed at exaclty the height and width of their content area
  • k10k screenshot 2 : extraneous content : a slightly wider sample showing k10k using a pattern to fill the area beyond their content
  • chris/photography2 : fixed size popup : no need to explain this one - eliminate the problem == problem solved

Alternative Solutions

So I started scouring the web for alternatives. Unfortunately I didn't find much. Doing plenty of reading and learning on CSS and doing javascript prototypes in the process. Here's what I've come up with as alternatives to the approaches mentioned above.

  • Scaling Photo : javascript scaling photo : using javascript to allow page elements to adapt to the size of a browser window
  • Timeline : relative positioning : an example of distributing elements across the full length of the browser based on scaling a predefined layout
  • scaling type test : relative font sizes : my example of scaling the type size to fill the space designated for it
  • The Art and Science of Web Design : relative font sizes : To give credit where credit is due, I first heard of this method last fall when I saw Jeff Veen speak about his book. I've also seen it a few places since then.
  • dynamic oval : relative paths : an example of a motion path that scales to fit the browser size

To date I have two projects that incorporate some of these techniques.

  • Selected Photos : My first major piece for neuralust, also incorporating my question for the perfect photo gallery navigation.
  • Laika : A client project for the band Laika that was released a few months ago. [ big shoutout to the rest of the design and development team over at Planetmouse ]

Next Problem To Solve

Well, I really can't answer that. Rest assured that somehow you will know as soon as soon as I do.