Site Guide

Navigation System

This website's navigation system is based on the concept of the SPA. It is not purely that, because each page, at it's core, is a stand-alone HTML page. Browsers that do not support dynamically written media queries, the HTML5 history API, or javascript, will render the website as a collection of standard linked pages. Browsers that do support the HTML5 history API use AJAX to load content, stylesheets, and scripts into the content area dynamically, by leveraging the new 'data' attribute from HTML5. This type of 'lazy loading' of resources reduces the number of resources and the time it takes to load the site inititally. This is particularly important for devices that have 'metered' data loading policies, like smartphones on cellular networks. This implementation of the history API allows you to use the forward and back buttons, or entries in your browser's session history to navigate the site. There are other benefits of this particular AJAX implementation:

• no page refresh when loading new content
• content transitions
• pages maintain their state when users navigate to other parts of the site and back

When using 'pretty urls' it is generally necessary to have Apache mod_rewrite instructions in the .htaccess files on the server. I have taken a slightly different approach. The navigation system uses a combination of 'pretty urls' and hashes, but it loads from any page within the site. This means that no matter what page you link to, you still find what you expect when visting from a bookmark.

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!