Skive Festival 2012

Moving from Flash to open standards for device independence

Apple Cinema Display

The Challenge

Do a complete revamp of Skive Festivals existing flash website using modern web technology to allow for device-independence. The website should be more engaging and the users should stay longer as a result.

160+ hours of development

… A lot of love, a lot of caffeine and thousands of lines of beautiful PHP and JavaScript.

HTML5 + CSS3

Skive Festival is built with best-practises HTML5 markup and CSS3. Compass was used as the CSS pre-processor to increase productivity and take care of old browers.

Media Queries makes the design responsive and CSS3 transforms handles animations nice and smoothly, even on mobile devices with slower processors. One of the reasons we won 9+ awards and honors

On the JavaScript side it's a nice mix of jQuery and Backbone.js all concatenated into one file for faster page loads.

Creating user engagement

The most important part of a music festival website is the artists and the schedule. In that order. Users rarely visit the website more than a couple of times before the festival — Unless you have some kind of on-site community engaging them with forums, polls and such.

Skive Festival handles its community on Facebook and would like to keep it that way for good reasons. Because of this we had to come up with fresh ideas that would trigger people to revisit the website. Our dynamic timeline, comment threads that sync with Facebook and the favorites system was among our solutions.

Another key part was making the user experience equally immersive on mobile devices and desktop computers. This is very important on a website like skivefestival.dk with loads of traffic coming from mobile devices. Especially under the festival.

Custom like-system

I built a custom favorites-system for Skive Festival that allows users to mark artists as favorites. The favorites system serves two purposes:

1. You're able to filter the artist when viewing the artists and schedule page so you can easily decide which days to go based on your favorite artists. It also makes it easy to see if any of them are scheduled to play at the same time.

2. When you 'like' an artist the server gets notified and the artist gets a vote. This means you're able to see not only your own favorite artists, but the most popular over all. On the artists page you're also able to sort artists by 'Most popular'.

Because I used HTML5 web storage, users don't have to deal with registering profiles, logging in and lost passwords. It just works.

As a neat usability feature I show a little notification when you like the first artist. This notification tells the user about the favorites filter and how to use it.

Custom-built timeline

The timeline is an auto-generated dynamic front page that has new content for returning users on every visit.

As a user, you can filter the content by type.

Technically the timeline grabs all artis and news items that were published in the last 90 days. Then it fetches the status updates from facebook and puts it all in a big pool that is then sorted chronologically, divided into three sections, one for each month, and styled based on the content type.

Huge traffic increase

With about a 300% increase in traffic it's a good idea we moved to faster cloud-based servers. It's also a good thing that everything was highly optimized, gzipped and cached properly using best practises and the awesome features of W3 total cache.

This page optimization led to a 95/100 score on Google Page Speed

Grabbing the Facebook feed

The timeline includes updates from Facebook. I use my Facebook RSS feed tutorial to grab the page feed and convert the status updates to PHP Objects using Simple Pie.

Once I have those it's a matter of filtering the posts (We don't want photos, images or polls), figure out their timestamp and mix them with the artists and news in chronological order.

iPhone and iPad support

Using Media Queries, everything is scaled and reordered to best fit the users device, no matter if it's a phone, a tablet or a desktop computer.

CSS3 transforms makes animations nice and fast on mobile devices while falling back to JavaScript animation on old browsers like Internet Explorer.

Hover effects are disabled on touch screens throughout the site and some buttons are enlarged so they're easier to interact with using a finger.

Backbone.js

The opening and closing of content boxes is a matter of more than just hiding and showing content. The comments and YouTube videos are actually generated on the fly and inserted into the DOM only for the currently opened content box. This is because rendering 70 comment boxes and 140 YouTube videos would not only be a massive amount of data to download. The heavy AJAX/JavaScript stuff going on would most likely crash your browser in a matter of seconds.

To handle all this I built an underlying JavaScript application that uses deeplinks to figure out the currently opened box, render it's content using the templating engine from _.js and scroll the window down to wherever that box is located on the page.

This means you can use the back/forward buttons to navigate between open boxes (Just like you can in these content boxes. Go on, try it!)

The JavaScript application is a full MVC setup built on Backbone.js.

95/100 in Google Page Speed

Page Speed is Google way to meassure website performace. A score of 95/100 is very good as the average is about 80/100.

Here are a few things I did to to get that score:

  • Cache dynamic content to static HTML files.
  • Minimize the number of HTTP requests by using image sprites and concatenating JavaScript.
  • Load related content with AJAX.
  • Use CDN's where available.
  • Set expires headers on images, JavaScript and the cached HTML files.
  • Gzip everything server side.

… and about a bazillion other small tweaks.

A lot of this is thanks to the .htaccess file in HTML5 boilerplate, the awesome W3 total cache plugin and tips on GitHub.

CSS3 transforms

CSS3 transforms allows you to scale, skew, rotate and translate objects in 2D and 3D space.

The cool thing about transforms is that they are hardware accelerated in most browsers which means they animate a lot smoother than traditional JavaScript animations making everything nice and fluid on desktops and mobile devices.

Search engine optimization

The old Skive Festival website was built in Flash. Needless to say this is a pretty poor solution when it comes to search engine indexation. The spiders simply can't crawl flash content very well.

Apart from just converting to best practises HTML5 markup the new website had a bunch of SEO-minded additions. Here are a few of them:

1. Scoring 95/100 in Google Page Speed. This has a big impact not only on search rankings but user retainment and general user experience.

2. Auto-generated XML sitemaps that notify Google, Yahoo and Bing when new pages are published. Those sitemaps include data about images, page priority, when the page was last modified and change frequence.

3. Keyword rich titles, URLs and headers.

4. Auto-generated meta, title and open graph tags for richer snippets on google and Facebook

5. Carefully handle auto-generated archives to reduce duplicated content.

WordPress

Underneath the slick front end of skivefestival.dk runs the worlds most-used content management system, WordPress.

To learn more about WordPress check out my blog post The state of WordPress.

9 Awards and honors

FWA, FWA Mobile, Awwwards, Dope, etc. etc. etc. On top of that there are a bunch of articles out there highlighting the design and functionality of Skive Festivals new website.

Facebook open graph

The Open Graph protocol is basically a bunch of meta tags you put in the head section of a web page to alter the preview snippet when that page is shared on Facebook.

You can do some pretty cool stuff with the open graph tags, like enabling custom branded video players to playback right there in the news feed.

Skive Festival uses Open Graph tags to fetch the thumbnail, description and title for any given page if it has any, or fall back to a defaults values. I use that same method on my own website. You'll see that if you try sharing this very page on Facebook.

The Solution

Media queries are used to scale from mobile all the way up to full HD resolution. This approach works great because the same website morphs to fit any screen, instead of having multiple sites targeted at various devices, leaving only one platform to maintain.

Using filters as a global sub-navigtion system we’re able to show a lot of content in an easy-to-understand way that allows for much less subsequent page loading. The filters are context-aware and change depending on the page you’re looking at.

A custom-built liking system allows users to filter the artists making it much easier to plan which days to go based on your favorite artists. The likes are stored on the server so individual users are also able to see the most popular artists overall. The first time you like an artist a notification on the screen tells you how to filter between all artists and favorites.

Fitting any device with responsive design

Using CSS3 Media Queries the contetent boxes wraps to fit nicely on any screen size from mobiles all the way up to full HD.

On mobiles a lot of small details reconfigure to better fit finger-driven navigation. For instance the filter buttons are enlarged and the menu/branding area re-arranges.

An illustration of responsive design for Skive Festival website

Final Words

Google Analytics tells us that the new website gains about 300% more traffic than the old one and the user feedback has been awesome so far. search rankings are through the roof and people stay longer than before.

On top of that we won a bunch of awards including both The FWA and FWA Mobile.

On the technical side HTML5 Local Storage powers the like-system without requiring the user to log in while AJAX calls to the backend handles the collective amount of likes for each artist. This allows users to sort artists by popularity.

… And to make things even better everything is built on WordPress with a highly customized backend, a ton of tailored widgets and a drag ‘n drop sidebar that changes depending on the current page.

Awards and recognition

Web design awards for Skive Festival

  • The FWA
  • The FWA Mobile
  • Awwwards
  • CSS Design Awards
  • Dope Awards
  • Design Charts
  • CSSDSGN
  • HOW Interactive SOTD

… and a dozen or so other awards, blog postings
and even inclusion in a printed book.