The Diner

After working for Catch Digital on Hoxton Square Bar and Kitchen I was chosen once again to work on another Barworks site for The Diner. If you live in London and you've been to the cool places (Shoreditch, Soho, Camden) you know what the Diner is and the kind of atmosphere they deliver. It's cool, it's hip, and they needed an awesome website to go with the awesome food they serve. Their old website was a Flash number built using Papervision, rarely updated and not the most mobile friendly. It was time for an update...

  • Sole developer working with a designer and account management.
  • Drupal module development.
  • Drupal theming.

Location location location
(Google Maps to the rescue)

The location page of the Diner website

The most important part of this website was nailing the locations page and creating something that could be updated easily as Diner's come and go (and move about). Using the Google Maps API version 3 it was easy to style the map, create fancy markers, and keep the map zoomed to the bounds during responsive layout changes. On mobile, the locations map is substituted for a list of restaurants with each restaurant having a button that directly opens the Google maps app on your mobile to easily get directions from where you are.

Finally: A client with awesome photographs!

The gallery page from the Diner website

Barworks are an amazing client when it comes to providing photography. Both Hoxton Square Bar and Kitchen and The Diner benefitted hugely from having client-supplied photographs of the restaurants, food and atmosphere. Using jQuery Roundabout helped make the designs a reality and, with a little tweaking, I was able to get the gallery responsive on tablets and computers whilst reverting to a much simpler view on mobile.

Mobile is king

The Diner website on an iPhone

Restaurants and venues are perfect candidates for responsive design and development for obvious reasons. The Diner was built mobile first with a huge emphasis on making sure everything feels natural and comfortable on small screens instead of just looking like a hacked, miniaturised web site. Testing was done on Android and IOS devices on both tablets and mobile with a focus on maintaining the visual style and cool factor that the brand demands. There's even some brand consistency between the Hoxton Square Bar and Kitchen mobile experience and the Diner mobile experience (both Barworks companies) with the drop down menu's and subtle headers.

The authoring experience:
Drupal contextual editing

Contextual editing

There's quite a bit of discussion claiming that the Drupal authoring experience is somehow more difficult than other CMS's like Wordpress. Personally I think thats bullshit, it's just that Drupal requires a degree of consideration for editors during the development process that many developers leave until way too late in the project. Using contextual links and the overlay module in Drupal 7, editors can easily edit anything on The Diner website simply by clicking the gear icon next to the content they want to edit. They never need to leave the site or go into any scary admin pages. Personally I think it's more logical to do contextual editing than to take the Expression Engine or Wordpress route of having a completely different looking back-end interface for site management. The handover manual for this site was less than a page and training was over in an hour - and there were no pods (no pods!).