-
First impression
- Giving an overview of what's going on and direct access to all of bed's online presences (facebook, twitter, flickr, blog, itunes store) without feeling cluttered was a real challenge.
- It wasn't possible to cram more content on the homepage and a solution had to be found.
Less is more
- A slide-in panel proved the best way to keep access to extra content just a click away.
- The panel is available from all pages, which also boosts SEO of tweets, blog posts, link to facebook, newsletter subscription and podcasts.
Typography
- Bed Supperclub has its 'official' font (Myriad Pro) which is used everywhere (flyers, merchandising, business cards, signage, logo, menu, ...).
- We were able to use the same font from headings to copy text without requiring sluggish flash-based text replacement (bye bye sIFR) thanks to @font-face and Cufon (for better antialiasing, especially on Windows platform).
Thai Typography
- For the Thai version of the website, we had to find a Thai font that would give a modern, humanist feel while remaining legible.
- This is no small feat as Thai fonts are usually very traditional, or overly modern and barely readable.
- Our first choice (SMB Advance) wasn't available for legal reasons, but 'Sukhumvit' (another beautiful font by Anuthin Wongsunkakon) was.
Performance
- Precious seconds of loading time were shaved everywhere we could: image optimisation, css sprites, code optimisation, lazy loading, better markup, server tweaking (expires headers, caching, gzipping, redirections) and the use of a Content Distribution Network (CDN).
- Website performance has improved drastically, and we keep monitoring and tweaking the website to make it even faster.
Content Distribution Network
- Ajax libraries are hosted on Google's AJAX Libraries API, a content distribution network and loading architecture with servers around the world.
- Other static files (JavaScript, CSS and images called from CSS) are hosted on Amazon S3 and served via CloudFront.
- A reliable and very afforable solution to speed up websites: files are served from the closest server to each visitor.
Music player
- Each DJ can upload and tag his podcast via the CMS.
- With a click, the iTunes Store feed is notified of the update (xml feed is generated automatically) and the latest podcast appears on the iTunes Store and on bed supperclub website.
- Podcasts can be listened via the bed player (flash-based) or in iTunes.
Agenda
- Events can be browsed fast thanks to the lack of page refreshes.
- All upcoming events are published in an RSS feed which can be embedded on other websites.
- All events (and pages) can be shared with friends via email, facebook, digg, twitter, ...
flickr integration
- Party pictures are uploaded to flickr and appear automatically on the website.
- Galleries can be ordered by date or name.
- Using flickr reduces development costs, increases visibility, speed (pictures are served by Yahoo's servers) and sharing possibilities.
- The photostream also appears automatically on Bed Supperclub's facebook profile.
bed sheets magazine
- We chose and set up issuu to publish Bed Supperclub's bed sheets.
- Bed Supperclub can easily publish new issues by uploading a pdf and entering a few tags.
- The magazine can be flipped online in full screen or downloaded as a PDF for more comfortable reading.
- Readership statistics are generated and can be shared with advertisers.
Progressive enhancement
- The website was developed in a layered fashion that allows everyone to access the basic content and functionalities using any browser, while providing those with a more advanced browser an enhanced version of the website.
- Our special exorcism prayer which is included in specific style sheets for Internet Explorer also helps reducing bugs and hacks and saving our sanity.
Project tracking
- From first sketches to delivery, the whole project was tracked online.
- The client could check progress, provide feedback, share files and access todo lists to make sure the website would be ready on time.
Background
Bed Supperclub (Bangkok, Thailand) is best described as an upscale restaurant, stage, gallery and club merged into one, where every night is different.
Bed Supperclub had been adding a lot of content and features to its website, which started to feel slow, cluttered and lost its minimalist feel.
With the imminent opening of Bed Supperclub Paris, we were contacted to rethink, restructure, redesign and relaunch Bed Supperclub website to accommodate both venues in multiple languages (English, French and Thai).
Besides, the website was loved a bit too much by uninspired copycats and it was time for a fresh start.
We were thrilled by the design challenge (going back to the simplicity of the curves of the iconic building and the pink and white tones of the White room) and at the technical challenges (website performance, handling Thai script in a beautiful way, simplifying updates and maintenance, improving findability of content, optimising code and markup, connecting with social networks).
Responsibilities
Information architecture, graphic design, user interface design, CSS/XHTML template development, front-end development, custom CMS development, JavaScript development, Ajax integration, flickr and twitter integration, iTunes Podcast integration, WordPress integration, virtual magazine, Flash animation and development, typography (roman and Thai scripts).
The result
A clean, minimalist website with lots of features to stay connected (social networks, blog, iTunes Store, birthday alerts, rss).
Special thanks (in no particular order)
ImageOptim, Amazon Web Services, issuu, jQuery Validate, Google AJAX Libraries API, jmaps, magpie, <swfobject>, Cufòn, Font Squirrel, jQuery Cycle, jQuery Bookmark, jQuery Filterable, QueryLoader, Lazy Load, Google Maps, Google Analytics, Woopra, basecamp, flickr api, jQuery, jQueryUI, jScrollPane, Shadowbox, Firefox, Internet Explorer 6, Yahoo UI Library, php, transmit, mysql, W3C, (mt), Safari Web Inspector, YSlow, Web Developer Extension, Coda, Steve Souders, Anuthin Wongsunkakon (Cadson Demak), Bed Supperclub team.