• Layered Rocknations 3D development diagram - layer 1 Layered Rocknations 3D development diagram - layer 2 Layered Rocknations 3D development diagram - layer 3 Layered Rocknations 3D development diagram - layer 4 Layered Rocknations 3D development diagram - layer 5 Layered Rocknations 3D development diagram - layer 6 Layered Rocknations 3D development diagram - layer 7 Layered Rocknations 3D development diagram - layer 8
  • Rocknations website screenshot
  • Portfolio image of the Rocknations site
  • High-resolution screenshot of the Rocknations website
  • Portfolio development screenshot
  • Project screenshot

Rocknations

rocknations.com

HTML5, CSS, jQuery, WordPress, & Facebook

Rocknations is the young people's ministry of Life Church, UK and is also the name of their music-rich annual conference which attracts thousands of attendees each year.

The website was first delivered and put live shortly before their 2011 conference as a promotional piece and to attract the attention of their young target audience via its integration with social networks.

Built from the ground-up on WordPress, this website is a large, media-rich, HTML5, and jQuery development which has been carefully optimised for mobile and tablet devices whilst making use of several ingrained social networking platforms. The development includes several scratch-written PHP/MySQL plugins to enable the on-site integration between Twitter, Facebook, Youtube, and Viemo APIs, and to allow better control over content for the website owners.

Media plays a key role in the website including videos, podcasts, and music. For the most part this hypermedia is contained within a version of the SlideDeck Pro extension which was modified extensively both visually and functionally, to improve the way it handled the delivery of HTML5 and Flash-based media.

The content throughout the site (including the sites, navigation, and drop-down link block) is customisable and managed from the WordPress admin panel, and even includes custom shortcodes to help the client with embedding videos from Vimeo and YouTube, and gallery slideshows (within SlideDeck slides).

One final feature built into the site was an appearance editor to give the client direct and easy control over the colour scheme of the site and imagery by way of simple colour-picker tools. When first released the site colour scheme was dark and purple, this has since been recoloured annually for each subsequent conference (black/yellow in 2012, grey/blue in 2013).

Top