Site Guide

Responsive Design

Responsive website design is the modern answer to the question: 'how do we as web developers serve content equally across multiple browsers, display sizes and orientations?' IMHO the key word in that question is content. I believe that serving the same content to users is vitally important, but the presentation and user experience can, and often should, vary. The <nav> at the top of this site is presented by waiting for the web font to load, and then calculating the width of the resulting <nav>. Media queries are then dynamically written to change the styling at any width less than the full width. The navigation scripts pick up on this change in style, and provide the necessary interaction. Fallback styling is available for browsers without javascript enabled. Resize your browser window to see it in action.

Media queries in the style sheets for each page handle the presentation of content for that page at varyious screen sizes and orientations. This styling is continually under development, and is one of the primary goals in the development of this website.

Photo Wheel

This interactive image gallery loads a JSON file that contains the information about each collection and the photos within it. It takes advantage of 3D transforms available in the CSS3 draft spec. It is stable in recent versions of most of the modern browsers, although not surprisingly, IE11 exhibits some strange behavior that I'm still trying to work out. I have written fallback styling for browsers that support 2D transforms, but again there are issues with IE9 and IE10. I have great plans for additions to the Photo Wheel, including a slideshow mode, support for image types other than .jpg, captions, and an optional audio track or tracks. Keep an eye out for the updates!!

Parallax Effect

The home page contains a simple implementation of the parallax effect. This effect makes the background, or any other layer, move at a different rate than the foreground content when scrolled. This has the effect of creating a more 3D type of environment. Unfortunately (but also by design), most mobile browsers freeze the DOM when scrolling, so this effect is negated for those user agents. There are work arounds for this, but they are heavier plug-ins or libraries than what I find necessary for my site. In responsive websites where additional content is provided on one or more of the layers invovled with the parallax, it would be necessary to implement one of these work-arounds.

Cross Browser Compatibility

This is a tricky subject for me. Being a personal website and not a commercial one, I'm constantly tempted to bail on IE like I have done with IE6. My goal of course is to serve the majority of browsers equally, but without introducing large libraries or complicated hacks. I have done no 'browser sniffing' in my development, with the exception of IE conditionals, but rather employ functionality testing where I can. Interactive elements like the Photo Wheel do not function without javascript turned on, but all other sections / pages of the website function without javascript enabled (to the best of my knowledge!). Please drop me a line if you have suggestions or notice issues in your particular browser or mobile platform!