If a picture is worth a thousand words, what about a thousand pictures? The memories become too many to count. And its all too easy to let each memory become a blur in time. The Reitz Football Photo Archive is a project intended to capture the blur and provide a venue for the Reitz football community to relive the magical year of 2007 for decades to come.

To understand the impact of the project and the 2007 year, one must understand the Reitz community. F.J. Reitz High School was founded in Evansville, Indiana in 1918 with the football program starting one year later. Since that time, the school claims dozens of championships, including 17 undefeated regular seasons and 10 state titles. It is not an overstatement to claim football is the life-blood of the school and its dedicated community. Pre-season hype proclaimed 2007 to be the best chance in 37 years for the school to grab a state title. The hype was more than justified when the Reitz Panthers acquired the Class 4A title after defeating Lowell High 33-14 on November 24, 2007 at the RCA Dome in Indianapolis. A few weeks later first-string quarterback Paul McIntosh was named Indiana’s Mr. Football, the most prestigious individual football award granted annually in the state. 2007 truly was a magical year for this diehard blue-and-grey, West-side community.

One such diehard fan, a mother of one of the seniors, took the initiative to photograph the entire season — every practice, every dinner, every event, every game — from late June through early December 2007. In order to broadcast the story to the rest of the community, she approached me to be her voice.

Presentation Interface

As requested, the photos should be presented as a single, complete package that could be given to each senior at the end of the season. Due to the shear volume of photos to be stored, the archive would be best presented as a single CD. Though the easiest solution is to simply throw JPGs in the root of the CD, it would require the OS to preview the images. To create a unified experience across all operating systems, a custom, cross-platform presentation layer would need to be developed. An executable Flash application would serve as the middleman, telling the story of the Mighty Reitz Panthers.

The interface navigates to various galleries through a pop down menu listing the event gallery hierarchy (or alternatively for a the right-brain crowd, a filmstrip version). Likewise, each gallery features three ways to visually organize its respective images: grid mode, filmstrip mode, and slide-show mode.

Data Organization

Gathering and organizing image data in a format Flash could easily read was one of the primary tasks to solve early in the development of the project. Photos need captions and need to be organized into events and events into groupings. (For this project 1,100 photos were organized into 40 events; the 40 events into 4 groups.) All organizational and image data are stored in XML files, which are parsed and executed on application load. This structure allows flexibility to modify the content independently of the proprietary Flash environment, making updating information relatively effortless.

Acquiring and formatting the information was the next problem to tackle. Since the client would be responsible for organizing photos into events and writing all photo captions, it would be unreasonable to expect the client to write the information in the desired XML formats and individually resize the hundreds of images to fit the constraints of the interface. Therefore, a mini web application was built for this specific purpose. The client could build and organize the structure of the images, while any caption information would be stored in a MySQL database. When the client finished all content changes, a PHP script would execute to simultaneously write the XML files based on the database information and resize all images from their original file sizes to more manageable dimensions, all placed in a single data directory, ready to be read by the Flash interface.

Packaging

After completing the presentation interface and gathering all the necessary data, the last part required to finish the archive was to package it all together on a CD. Since several hundred discs would be made, each labeled with a full-color printed cover, the best solution is to outsource the duplication process. In just over a week, the discs were delivered, ready for distribution by mid-January 2008. All proceeds for the Reitz Football Photo Archive are donated to the school.

Screenshots

Images in a gallery can be viewed in a grid format.

Or view the gallery as a slideshow.

Or manually skim through the gallery in filmstrip mode.

Jump to a specific event gallery in a drop-down menu or alternatively browse all 40 event galleries in a filmstrip navigational reel.

Once the project went Gold, the master disc was mailed to Disc Makers for duplication.

After reviewing the CSS Zen Garden’s official designs, we quickly discovered a trend in the submissions: They were chosen due to design aesthetics or technical complexity. For our experiment, we didn’t want to force ourselves into either category, so we spent considerable time on both strategies.

Early in the conceptual stage, we decided we wanted to tell a story as the user interacts with the design. To understand how to accomplish this, you must first understand how a story is traditionally driven: The narrative progresses at the speed of reader, i.e. the reader is in control of the story. In terms of web browsing, one of the most fundamental controls granted to a user is the ability to scroll a page. Based on that precept, we wanted to tell a story as the user scrolls the page.

Eventually, we settled on the idea of the transition from night to day. Since it is an experience everyone shares, the story is instantly relatable to the user. Given the idea, the design would require several elements to tell the story: The moon and sun to respectively establish the night and day and a sky assisting the transition between the two. In order to give a visual anchor to the user and the world in this story, the foreground must be the ground to the scrolling moon, sun, and sky. As an anchor to this world, the element should be something that is natural, strong, and enduring. A blooming tree would be the anchor to this story.

Technical Roadblocks

To technically achieve a smooth transition from the spectrum of cool to warm colors while overlaying a visually complex tree element, the tree would need to be created as a 24-bit PNG image. (24-bit includes an alpha channel, rather than merely a “transparent” pixel, like 8-bit PNG and GIF.) However, as web designers, we understand the consequences of such power: It summons the need to resolve the problem for the sake of backwards compliance. For this case, Internet Explorer 6 has a notorious history of torturing designers by not naturally supporting 24-bit PNG transparency. Though the blue-block-of-death can be fixed relatively quickly with some JavaScript hackery, this will not work for the CSS Zen Garden project, since all submissions run on the same HTML template, i.e. style sheets and images are the only tools that can be utilized.

Thus, we have three options:

• Comply to the lowest common browser, and remove any transparent PNG images, forcing us to re-brainstorm our concept;
• Continue to use transparent PNGs and forego backwards compatibility; or
• Produce a non-PNG version specifically for IE6.

To improve our chances to be accepted as an official design and strengthen the piece technically, we chose option three. Therefore, any PNG images were converted to GIF.

The only alteration to this process were the rendering of the section headlines. Since the headline font was previously rendered in the transparent image, the selectable text was removed from the viewing area. However, without gradual transparency granted by an alpha channel, complex serif text on a transparent background appear jagged and unpolished. Thus, for IE6, any headline text was reintroduced in the viewport rendered with a generic serif font and not pre-rendered in the image with a custom font.

As another roadblock, IE6 cannot fix elements to the bottom of the viewport naturally in CSS. The way around this was to produce a different but aesthetically similar visual anchor and affix it absolutely to the top of the page. This new image places the user “underneath” the tree, seeming as if selected branches are hanging low in the top of the user’s peripheral vision.

Screenshots

As the page scrolls toward the bottom of the screen, the sun dawns revealing additional navigation.

Alternative graphics were produced to gracefully degrade for IE6.