Project Details

Type Website
Client John Price
Duration April 2011 until April 2011

Technologies, Languages & Frameworks Used

Services Used

Gatekrash Mobile 2 Beta

Touchscreen-optimised version of Gatekrash

  • Case study by John
  • April 16th, 2011

Gatekrash Mobile is a touchscreen-optimised version of Gatekrash, a UK event listings website. It's main purpose is to provide a lightweight, mobile optimised method of browsing the event listings on Gatekrash.

The idea

The main purpose of Gatekrash Mobile is to provide an easier method of browsing the listings available on Gatekrash on a small touchscreen device, such as a smartphone or tablet computer.

To this end, I decided to develop the mobile site using HTML5, CSS3 and JavaScript, making it a web app. I chose not to develop different native apps for each type of device as this would have taken considerably longer to implement, cost more, and would in the future increase development time for very little gain in terms of performance and usability.

The design

The design and aesthetics of the mobile version are very simple, somewhat mirroring the different ways to browse events on the main site. The mobile version is split into three distinct menus; 'Now', 'Soon' and 'Popular', along with pages to display event details and change your location.

The menubar at the top of the page contains consistent user interface elements - the title of the page, and navigation buttons to get back to where you came from. The bottom of most pages contain a 'settings' menu, allowing the user to either change their location or go to the full version of the site.

The actual aesthetics of the site (loosely) mirror the aesthetics of the main site. The same colour scheme is used (black and light grey for page elements, blue for links), but other imagery is not included as this may negatively impact download times for the app (an important consideration due to the intended use of the app via mobile networks which may be slow).

If you'd like to see the design and aesthetics of the site yourself, why not visit the site, or just go to the bottom of the page and look at the gallery.

Features and functionality

The features of the mobile site basically mirror the main site, in that you can browse events near you happening now, starting soon, or just look at the most popular events at that moment in time. You can also see event details and change your location.

All data on the site is pulled from the Gatekrash API in JSON format and parsed on the client side. The site uses jQuery to request and parse the data at the moment, but I'm looking into possible future implementations using xui.js for it's small size (and therefore quicker download time).

The app itself is, other than using jQuery to request data and perform some transitions, and date.js to parse date information, written by me. It's a single HTML page containing a skeleton, which is then filled by the javascript elements of the site on demand. I used the HTML5 boilerplate to help build the site and make it feel like a recognisable 'app' to potential users.

When first loaded, the site attempts to locate a user based on their browser's location settings - it asks for permission to access this data, and if granted will try and find out where in the UK a user is (if they don't grant access, or aren't in the UK, it will default to London).

Once this step has happened, the user will be presented with the main menu. Selecting an option from this menu will start the request for that data and present a loading screen while the data is downloaded. Once downloaded, the results will appear.

As you can probably tell, it's a very basic web app at the moment.

Future developments

I have a list of features I'm keen to add to the app in the future, including:

  • Search - search events and venues like you can on the main site
  • Venues - display event listings by venue
  • Better maps integration - integrate maps into the app better
  • Also occurring on... - on event pages, list other occurrences of that event.

More information

If you'd like more information about Gatekrash Mobile 2, please don't hesitate to get in touch with me!