Josh Bernard Digital.Experience.Creative

This site is a case study

Found more and more, the full page Flash sites, with background video stretched, pixelated. You know the ones I'm am writing about. Cool looking, but does it have to be all in Flash?

A great medium for media, ads for example, but is it ideal for delivering web content? I think that anything extra, say Flash Player, that has to be loaded by a browser in order to display an interface is an extra, unnecessary layer added.

"But Flash site is so pretty, so precious." -Anonymous

I must admit, the ability for a Flash piece to control the layout and flow is pretty cool. Makes it nice for designers to ignore that variations of screen sizes and browsers. But can't we have a similar experience with browser friendly code.

That's what I've set out to do.

Starting out with a few basic goals:

  • Nice visual presentation of information (work samples)
  • Touchy-feely transitions
  • Do not reload the page
  • Make each page search indexable
  • Track user behavior

The Internet is delighted splattered with other such work. This is not purely original code or thought, but an adaptation of both. Learning from other's experiments and adding in my own interpretations of execution.

Visual Design

I am skipping information design and jumping to visual design. The IA is basic with a few details at page level. All done with sketches, no wireframes.

My starting point was the full page background. This was an attempt to create a texture, filling the screen, establishing a canvas. I found that large photos were actually smaller in file size than the FLVs some site were loading.

Next, I wanted to content to remain center fixed. I'm really trying to control the content being laid against the background canvas. The content dictated ending placement. A simple screen layout, navigation on left - content on right. Semantic markup for the pages.

The visual style is influenced by research of cable news programs' information overlays while designing one in Australia. It turns out there is some nice motion design work being done at this level. Navigation is visually "Tagged". Content is organized, visually conservative. By presenting a understated design with uniformity in layout, the content is showcased.

Structure

I had seen similar tetechniquesor displaying content from external pages. Like javascript steroid iframes. The catalyst for this particular approach was the "jQuery history plugin" by Taku Sano. Much gratitude.

With this script in place to handle navigation, then it was on to the matter of animating loading transitions. The navigation script was extended to initiate javascript calls when content is finished loading. This allows for nice timing and control over the background animation.

The site is comprised of distinct, individual pages. Content is pulled in as required while able to be indexed.

--------------------- info break -----------------------