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 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.
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).
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.
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.
If you'd like more information about Gatekrash Mobile 2, please don't hesitate to get in touch with me!