This presentation's original home was at http://www.neuralust.com/~cac6982/20010721/ 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.
- Event
- New Media Underground Festival
- Date
- July 12, 2001
- Location
- Brooklyn, NY
- Topic
- Creative problem solving & thinking of the browser window as your canvas
Background
Rather than put on a slide show of my current neuralust.com 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.
- Glish.com 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 http://dailynews.yahoo.com/h/nm/20010712/od/cocacola_dc_1.html] : 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.
