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.
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.
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.
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.
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.
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
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.
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.
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.
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!)
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.
- Load related content with AJAX.
- Use CDN's where available.
- 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 allows you to scale, skew, rotate and translate objects in 2D and 3D space.
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.
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.
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.
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.
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.
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
- The FWA
- The FWA Mobile
- CSS Design Awards
- Dope Awards
- Design Charts
- HOW Interactive SOTD
… and a dozen or so other awards, blog postings
and even inclusion in a printed book.