Around the Block
I was asked by the guys at The Solid State in October to develop another one of their great designs into an all in one Facebook/mobile solution for the movie Around The Block.
First and foremost this is a hand-coded, responsive website. It is also a registered, fully fledged Facebook App - you'll find it in the FB App Center as well as searching in FB mobile. It is also a custom page tab on the Around The Block fan page, which is the primary purpose of the site.
However, the problem with custom page tabs is that they are not available for FB mobile and trying to access them results in the user getting the dreaded 'Page Not Found' error. As a solution, the thoughtful folk at Facebook provide a 'mobile url' section in the app settings, so you can specify where you would like mobile users to be sent when they try to access the app. In this case it is the site itself, which of course is the source of the custom page tab.
The final step was to employ user agent detection to redirect desk/laptop users to the custom page tab, if they accessed the site via url. Oh, and coding in a simple referrer check to make ensure a continuous redirect loop wasn't created if they were accessing the page tab from within the FB page.
The result, an FB app, custom page tab and mobile site all rolled into one.
Site features include:
- Full screen background slideshow
- Animated, fly-in menu
- Thumbnail image gallery with lightbox
- Animated accordion content
