A new, modern website for Die Gute Fabrik’s Johann Sebastian Joust
Posted by Andreas Zecher
I designed and developed a new website for Die Gute Fabrik’s Johann Sebastian Joust. In this blog post, I’m going to give you some details about the design goals and used technology.
The previous site for the game was part of Die Gute Fabrik’s main website. My goal was to make a separate website hosted on jsjoust.com to have more room to show video, photos and background information. Since it’s easier to show, not tell what Johann Sebastian Joust is about, a video of people playing the game should be the first thing you see. The site should also be modern and standards-driven and look great on any device.
To enable this I’m using a Responsive Design that adapts to any resolution using Media Queries. No matter if visitors have a desktop, laptop, tablet or mobile phone, the site will always show all content in an appropriate layout. Visitors won’t need to fiddle around and zoom in or out to be able to read the text. This also saves development time compared to building a separate mobile version of the site. The site offers four different layouts that are based on the Skeleton boilerplate and a sixteen column grid. To support the Retina Display I’m using sprites and photos at 2×.
The site consits of the homepage and a separate press kit, based on the one I made for Spirits. The goal of the press kit is to make journalists happy and simply have everything in one place, right in the browser. No need to download a ZIP file with a complicated folder structure and information hidden in Word documents. As the homepage, the press kit is fully responsive.
Johann Sebastian Joust has already won several awards and gotten some nice press, so I wanted to highlight this on the site. The testimonials and awards for both the homepage and the press kit are loaded via jQuery as JSON-P from Die Gute Fabrik’s public Promoter page. This way, quotes and awards only need to be updated in one place. Promoter also automatically finds new reviews and mentions of the game, which makes it easier to add new quotes.
The game is currently in private alpha and still in development, so I wanted to give people a simple way to get notified when Die Gute Fabrik will make it available to the public. This is done via a prominent newsletter signup field that hooks into Mailchimp.
Upcoming events where people can play the game are announced on the Twitter account @playjsjoust. A Rails app hosted on Heroku is parsing and caching the tweets once a day. The chronic gem is used to parse the dates of the events from natural language (e.g. July 20) to a datetime string that can be sorted. The site then loads the cached tweets from the Rails app via jQuery as JSON-P.
For the photo gallery I skipped the overused lightbox. Instead clicking on a photo will simply double it in size, while staying inside the grid layout.
I also wanted to add a little bit of playfulnes to the site. Clicking the character illustration changes the background color of the site and plays one of four activation sounds from the game. Modernizr is used to detect if the browser supports the HTML5 audio tag.
To improve loading times, all JavaScript, stylesheets and PNGs are compressed using CodeKit. FF Dagny Web Pro is used for all type on the page. It’s implemented as a webfont in CSS, served by TypeKit. The site was coded using Coda 2.