A labour of love for our local bar, we’ve designed and built a very customised new wordpress site for them.

The client was very easy going and happy for us to lead the design and choose the technology to showcase the content.

Here are some of the cool features we used

Bilingual – using localstorage, jQuery and ACF

Using Advanced Custom Forms, we were able to add a French and an English title and content to every page and post. With a little jQuery & CSS, it was simple to show/hide either, and save the preference in localstorage

localStorage.setItem("language", "en");

SVG (Scalable Vector Graphics) – inline & as a sprite

For crystal clear, lightweight retina ready icons, we used a single .svg file, with each icon hand positioned to be pixel perfect and incredibly sharp. All icons on the site comes to less than 24KB, meaning extremely fast loading and low page weight.

For the clocks on the homepage and the social icons, these were simply added to the page inside <svg></svg>  tags, which cuts out many server requests.

Webfonts or mobile Native

Handily, the Monkey Bar branding is based on American Typewriter, which is included in iOS by default, which saves bandwidth. For Android, we fall back to the default fixed width font. On desktop, we use .WOFF fonts for crisp type.

Responsive build

Every page fills the screen, with large hero imagery and a dynamic layout. We also use the mobiledetect.net PHP script to reliably serve a seriously lightweight page over the air, as little as 47KB for the homepage, due to CSS backgrounds and image hiding on the server.

Google Spreadsheet powered menus

We wrote a tutorial a while ago on how to use a simple bit of PHP to suck in tabular data from live google doc spreadsheets, as that was where the client keeps the menu content. Each time they want to update the menu, they simply edit the spreadsheet and the changes are reflected instantly on the website.

Advanced Custom Forms

A special mention for Advanced Custom Fields as we relied so heavily on it, a fantastic wordpress plugin well worth the $50. It allowed us to create totally custom layouts in two languages. Highly recommended.

View monkeychamonix.com