“A cool way to experience Oregon’s Gridiron program. It’s positioned and designed beautifully and makes me want to explore the whole site.” —Kris Kiger
“One of the most creatively executed HTML5 sites I’ve seen. The attention to detail in transitions and roll-overs is amazing. I’m going to kick myself for saying this, but it reminds me of how we were approaching Flash sites.” —Dustin Callif
Overview: The University of Oregon has plenty to offer football players, including an awesome new football facility, but getting potential recruits and their families up to Eugene for a full tour takes some doing. Oregon Gridiron is an interactive website that recreates the experience of a live tour and lets anybody planning to play college football check out all the perks of playing for the University of Oregon Ducks. There is fierce competition for top recruits among highly ranked colleges across the country, so Oregon wanted to pull out all the stops. Oregon Gridiron lets recruits take a look around the new facilities and dig deep into details through features called “hotspots,” all without leaving their living room. Most importantly, the new site gets sports fans everywhere fired up about what’s happening in Eugene, showing them why Oregon is the “future of football.”
• The site was developed in four months by twelve individuals from three agencies.
• It is written completely in Javascript—over 7,200 lines.
• Other software used includes CSS3 animation, HTML5 Canvas, GreenSock for complex animation and PreloadJS for handling assets.
Comments by Aaron Sather and Dane Hansen:
What are some of the site’s core features? “In addition to global navigation, experiential navigation is featured throughout the framework of the website. ‘Hotspots’ offer a unique way to interact with content, letting users explore weight rooms, practice and playing fields, and timelines provide an alternate way to advance through content and jump to any part of the site at any time.”
What were some of the challenges you faced? “The biggest design hurdle was the angled image galleries and end pages. We explored every way to make them work, and in the end, a combination of methods were layered to give the right appearance. Another challenge was the titles, which have a checkered drop shadow. This meant that each letter had to be cut out as an individual image, and we wrote a class to handle inserting and animating them. For the large image sequences on the ‘hotspots’ pages, we needed to implement a preloader that puts up low-res versions of the pictures, and then have a hi-res photo load over the top when a user rests on an image.”
How does this project compare with past projects? “This was the first project Super Top Secret undertook that truly used all areas of our agency. We involved our development, design and writing teams, and for the first time, we fully integrated STS Studios, our in-house content creation team, which produced, shot and edited all of the videos on the website.”
