A Peek Inside Hoagiefest 2011

Each summer, Wawa fans across the region flock to the Hoagiefest website to see what new fantasy world Archer has dreamt up for them. For the past four years, we used Flash to create a whimsical land full of rich animations designed to entice the senses and leave customers eager to jump on the Hoagiefest “bandwagon.” This year, we took an entirely different, more cost-effective approach, using HTML5, jQuery, and animated GIFs to deliver an equally exciting experience.

By deciding to build an entirely HTML/CSS-based site, we allowed all members of our production team to touch this project, rather than limiting development to those with Flash skills. We utilized the latest and greatest features of web development to provide a seamless transition from last year’s Flash-intensive site while still offering cross- browser compatibility.

Wawa Hoagiefest

Parallax Scrolling:

Hoagiefest is filled with animated GIFs and small Flash pieces that bring life to the birds, butterflies, and blimps in our “Hoagie Wonderland.” We wanted something else, though, that would serve as “wow factor” and add more depth to the site. The answer was simple – parallax. Parallax is the effect of objects in the distance moving at a slower rate than those that are right in front of you. Scrolling through the Hoagiefest site conveys to the user a feeling of falling through the sky, and the clouds right in front of you are whizzing by while those in the background are moving ever so slightly.

Achieving this effect is quite simple but requires some extra planning. The content of our website scrolls with the page at a normal rate, but we have two extra divs that wrap around our content, each with its own repeating background full of clouds. To implement parallax scrolling, set the background-attachment of these divs to fixed. In your JavaScript, update the background-position of these divs in your scroll handler, using variations of the offset to move the background images at different rates. For example:

$(window).scroll(function() {
         var windowHt = $(window).height();
         var scrollAmt = $(window).scrollTop();
         var bgTop = $(‘#background’).offset().top;
         var offset = 0.05;

         $('#background').css({
                  ‘background-position’:
                  ‘center’ + (-(windowHt + scrollAmt - bgTop) * offset) + 'px';
         });
});

Without too much effort or code, you now have a sleek, attention-grabbing effect that will take your site to the next level.

Flash versus HTML5:

The only elements in the 2011 Hoagiefest website that we physically created in Flash are the people situated in the contest section and the cow that is grazing right above the footer. This is a drastic difference from last year’s site, which was made entirely in Flash! With the level that smart phones and tablets have penetrated our market, building a Flash-based website is no longer a viable option. Attempting to view Hoagiefest 2010 on an iPad or iPhone would strip the site of all of its value since Flash is not supported on these devices.

Wawa Hoagiefest

In years past, we would have built custom Flash players for the site’s audio and video components. This year, we leveraged JWPlayer, a pre-made audio/video player with HTML5 fallbacks to both reduce coding time and ensure cross-browser compatibility. In browsers that support Flash, an swf that you download from the Longtail Video site is embedded and pulls in the correct video or audio file. If Flash is disabled or does not exist, the HTML5 “video” or “audio” tags are automatically used for playback. Although we ran into some technical issues along the way, mainly because the JWPlayer documentation isn’t as complete as it could be, the end result of this plugin is definitely worth the effort.

Mobile:

Hoagiefest is a very robust website when viewed on a desktop computer and even an iPad. However, with the popularity of mobile browsing, we knew we’d have to develop alternate versions of the site for the iPhone, Android, and other devices (like the BlackBerry) due to the limited screen space and varying functionality of these devices.

The iPhone and Android offer an experience comparable to the desktop version of the website. The difference lies in a slimmer design that excludes any sections involving file downloads (which mobile devices do not support). Due to a lack of consistent support for media playback (audio and video) and limited JavaScript capabilities, we built an even more streamlined version of the site for non-iPhone/Android devices, such as the BlackBerry. We transformed the “Groovy Deals” into a static list and, coupled with the hoagie lineup and contest details, the most important aspects of the site are still front-and-center on these devices.

Mobile 1
Mobile

Optimization:

As you can clearly see, the Hoagiefest website is composed primarily of large PNG images, which amounts to a very hefty site. On top of this, we have video/audio files downloading and a lot of JavaScript code running as the user scrolls. Our biggest concern was the load time that users would experience when coming to our site, so we had to take various measures to get our site down to a manageable size.

In order to optimize the site, we first made sure to reduce all our images in size while still maintaining their quality. We used a combination of PunyPNG and Smush.it for lossless image compression. We also minified our CSS and JavaScript files and consolidated them in order to decrease the number of HTTP requests.

This reduced the “k-weight” of our site significantly, but it was still coming in at about 5MB. Although we couldn’t reduce the overall size of the site any further, we knew we could trim down the initial download with lazy loading (loading sections on-demand as the user scrolls). This requires replacing each image in your HTML with a link and setting the href attribute to the src of the image. In your JavaScript scroll handler, detect if you are scrolled to a specific section (by comparing the amount that the page is scrolled with the top position of the section) and replace the link with an image using the href from the link as the src of the image. Sure enough, this shaved 1.2 MB off of our initial page load.

Banner Campaign:

While HTML5 was a good choice and had many benefits for the Hoagiefest site, Flash is still used for our digital banners. Although there are plug-ins out there that allow you to convert Flash banners to HTML5, this is still a new technology that isn’t stable enough for widespread use. Our banner campaign had two phases: pre-launch and post-launch. In the pre-launch phase, we executed countdown banners to generate excitement, promote awareness, and direct customers to the pre-launch website, where they could unlock the hoagie lineup by “liking” the page.

The post-launch banners this year were more specialized and had more ad placements than in years past. In addition to ads created for YouTube and Hulu, we created an expandable banner for AIM; a full-page skin and banner ad for Pandora; a full-page takeover for Accuweather, which included a skin, banner, and animated overlay; and an interstitial ad and synchronized banners for WWE. Although HTML5 is rising in popularity, Flash is still very much alive – it is an integral part of our advertising efforts and continues to succeed in directing customers to the desired location.

Conclusion:

In the end, we managed to create an amazing, innovative site without compromising our original vision or feeling limited by the technology at hand. Now that we’ve gotten our hands dirty and have seen all that HTML5 can do, it will definitely be a key item in our development toolbox. And as Hoagiefest 2011 was revealed, we continued to overhear the same exclamation being made around the office – “We don’t even miss the Flash!”

Leave a Reply

Close Modal

Contact Archer

Close Modal

We know you're still using an older version of Internet Explorer. Do you know how much mind-blowing stuff you're missing because of this?

Save yourself. Upgrade now.
We'll help you...