Logic & Architecture

The I want & need list.

• I wanted a website where I could showcase the creative part of my brain.
• The Internet continues to evolve in to a media powerhouse so I needed to keep up with the times with a bold entertaining design.
• I wanted Web 2.0 design concepts for users that care with out Web 2.0 overkill.
• I wanted lots of Flash elements but balanced with old fashion HTML.
• I wanted lengthy and uninterrupted video & audio elements.
• AJAX solves uninterrupted media but I wanted SEO.
• I wanted static pages that pull in the AJAX pages so there's no code redundancy: creating an SEO site that can be indexed while still being able to present uninterrupted media.
• I needed to make sure media does not overlap.
• Because of the content swaps I had to make sure users don't get lost.
• I needed the site to function and the design to work with out JavaScript or Flash.
• I needed efficient management of animation, audio, & video: programmed with little to no frame-based animation.
• I needed to have the separate Flash objects talking to each other.

Checklist

Attention to detail is the core of my design and development approach.

New design (well duh).

• My own design layout/graphics down to the last icon.
• Apply Web 2.0 design concepts.
• Ensure no sharp or pixilated edges.
• Ensure large design curves blend in correctly with insignificant distortion.

Develop the layout (well duh).

• Valid XHTML & hack-free CSS code.
• Smart CSS that's not loaded with hacks or overloaded with redundancy.
• Optimize graphics for web without sacrificing quality.
• Ensure dynamic layout for content below the header (midsection & sides).
• Support IE 6.0
  • Deal with PNG scripts & CSS tricks so that the design works.
  • Sacrifice some CSS3 concepts/selectors for compatibility.
    [would have potentially cut HTML code down by 25%+]
• Because of the media, lower bandwidth requirements with navigation experience.
  • Allow users to navigate most of the site with minimal page reloads
  • Make sure media/music elements in the content & header do not overlap
  • Ensure SEO with static pages that pull Ajax pages so there's no content redundancy
  • Ensure navigation & pages are functional if JavaScript is disabled.
• Ensure website is functional with both Flash & JavaScript disabled.
  [as a developer I have to because other developers would condemn me otherwise]

Integrate Flash in to/as part of the design shell.

• Content must be flexible/expand regardless of Flash.
• Layer Flash over background, layer HTML over Flash, then Flash over HTML, then HTML over Flash & finally Flash over HTML again: after all of which I am to retain a flexible layout.
  • Ensure cross-browser compatibility (1 version behind current)
  • Make sure the crazy # of layers does not hinder the navigation.
  • Ensure design is intact if Flash is disabled.
  • Ensure navigation is intact & functional if Flash is disabled.
• Enable the completely separate Flash objects to talk to one another so there's no overlapping media/each object knows what the other is doing.
  • Ensure this communication works if a user launches the site in different browser clients at the same time.
    [This was a blast. I came up with 2 solutions. Both worked but only one was efficient.]
• Enable the AJAX page content to update the separate non-AJAX Flash navigation/object.
• Ensure a smooth start & stop to all stage animation.
• Optimize audio/video programming.

Use Flash

• Entertain your brain.
• Present video in anamorphic widescreen (2:39:1) for my media experiments.
  [I'm no director, but I wanted the aspect to make sense.]
• Program the video sequence out of multiple video files instead of one massive video.
  • Multiple video files are accessed independent of the photos in the sequence: all the buffers, beginning, end, and transition programming happening behind the scenes. This gives me the framework to randomize the video sequence or throw it in to an XML feed to create a unique sequence on the fly.
• Add sIFR for a boost in text aesthetics.

Issues

• FireFox seems to allow Flash hidden behind a CSS layer to respond. IE does not.
  [Score one for FireFox. I would have desired the same in IE but I can live without.]
• Flash is not truly transparent in FireFox. HTML behind Flash will be visible but not accessible.
  [Score one for IE. This is really inconvenient.]

Lastly, I put together a page to comment on other note-worthy development issues.

Section Notes

11.11.11 I'm going through some parts of my site & trying to update the code to HTML5 / CSS3 / mobile / etc. This site is 2 years old now so things are a bit outdated. I don't have time to rewrite the entire thing so it's going to be a mixed bag of tricks for now.

04.06.09 I had a bad audio IE-only caching bug that plagued both my top main sequence & old vacation sequence. You could load up/play each sequence once & after that, never again! That's finally fixed.

04.04.09 sIFR is now in. sIFR on its own is not difficult to implement, but getting it work with the AJAX content was tricky.

01.29.09 Shifting things around & fixing stuff. You would have thought I'd think this through already. I'm making tweaks & improving the media elements (specifically the Flash communication) so... it's not perfect, I know. It's almost there.

01.14.09 Apparently if the server lagged my audio programming check was broken and the top sequence would run without the audio. That's now fixed.

Projects [Go Back]