Hoxton Square Bar and Kitchen

Hoxton Square Bar and Kitchen is well known amongst the East London trendy for gigs and boutique beers however their food menu and dining experience remained a mystery to many. Their website, although functional, frequently visited and kept up to date, was not optimised for mobile phones and portable devices (which many diners use) and felt retro (in a bad way). I worked with Catch as the sole developer on this project alongside Ryan Overeem, the designer I worked with during the Scope project, to create an exciting, trendy and maintainable web site which worked across mobile devices such as Android and iPhone as well as iPad and regular desktops/laptops. After launch the site was featured on jQuery Isotope's home page boosting views and generating positive chatter on Twitter.

No Longer online

Roles: 
  • Front-end Drupal Developer
  • Back-end Drupal Developer
Challenges: 
  • Nodes needed an automatic JavaScript path created for them on update and save that created a /js prefix loaded with AJAX commands.
  • Android web browser caused many problems for us with the Dropdown select menu sizing (iPhone worked perfectly off the bat).
  • Issues with performance had to be solved early on, with markup minimisation a key element of the front end development process.
  • FLICKR switched to OATH half way through the development process meaning an update to the FLICKR which caused many bugs that needed patching.
  • FLICKR embedded slideshows are Flash and wouldn't work on mobile so various slideshows were tried until Galleria was chosen.

The coolest place in town

Hoxton Square Bar and Kitchen home page

Animated, cool, fun ... not often terms people associate with Drupal powered websites however Drupal 7 was chosen from the beginning for Hoxton Square Bar and Kitchen because of its API integration (for Twitter and FLICKR), contextual editing and agressive caching. jQuery Isotope and Views paired easily to display content the way in which the designs dictated without hacks or ugly work-arounds. Drupal provided a brilliant framework of tools to create a solid and robust site with low development and upkeep costs.

AJAX commands:
dynamic done properly

Dynamically loaded in event.

AJAX was easily handled with the Drupal AJAX framework along with non-javascript fallbacks (which are used for the mobile version to improve performance). The site uses jQuery BBQ (bundled with Drupal core) for hash based URLs and the Google standard hash-bang fragments allowing search engine bots and Facebook to pull metadata from dynamically loaded AJAX pages whilst maintaining the dynamic URL structure. This site is a great example of how flexible and yet simple the AJAX Commands framework in Drupal can be.

Mobile
(responsive with a bit extra)

Contact page on the iPhone

Making a site responsive isn't just CSS layout, it's about making a site that feels like it belongs on a mobile when viewed on small screens. Hoxton was pimped up for mobile with a:

  • Smashing Magazine inspired dropdown navigation menu.
  • Tap to call phone numbers.
  • Touch friendly and responsive Galleria Flickr viewer.
  • Quick access to the iPhone and Androids native built in maps application for directions.