RWD Build Review: Bed Supper Club
This week I was fortunate to get an email from one of our readers detailing the work they have recently done on a redesign for the website Bed Supper Club.
Lets take a look at how they put it all together.
Hello and thanks for your newsletter which gives a good recap of what’s been going on in the ever-expanding, ever shifting world of rwd!
We just relaunched Bed Supperclub website (http://bedsupperclub.com). Bed is an iconic club and restaurant in Bangkok, they just celebrated their 10th anniversary this week.
We’ve been fortunate to work with them since almost
10 years, redesigning their website every 3 year as the web evolves. 800×600 constrains layout with flash intro (hey it was cool at the time), fixed width centered layout based on 960.gs when 1024×768 became the norm, Cufon when typography was becoming
a possibility (yes it sucked in retrospect)… This time around we went all responsive, and also used server side components to deliver slightly different content and features to different devices. Phpmobiledetect is used to identify devices.
For instance extra footer buttons to make a call
are added for mobile devices. Or shortened address in footer, or links to new windows instead of fancybox. It’s the kind of things you won’t see if you just resize the site on a laptop.
Thanks to modernizr we can detect touch devices and style slider controls differently.
Very handy, all you need are .touch rules
We tried avoiding long dropdowns on the Booking page by using an autocomplete field for the country choice.
We owe a lot to Chris Coyier’s roundup of responsive table techniques
for the What’s On page.
Adaptive images is used to deliver retina images when a device can handle them.
Fontello icon fonts for icons that scale well and avoid numerous requests or retina and non retina sprites.
Last
but not least performance is crucial so we use Ajax to load snippets of content on demand instead of all at once (see Event details on home, Follow in header or DJ bios on DJs & Acts).
We ditched issuu as a publishing platform for their Bed Sheets magazine in favor of turn.js
It works well but a kind of refresh will probably be added to handle device orientation changes.
For the gallery we’re using tn3gallery with Flickr. Very fast and easy picture management for Bed. We’re still tweaking this page as its not ideal in tiny
screens.
Devil’s in the details and there are lots of tiny optimizations across pages.
