Candlewood Suites for Facebook

This was the first of a couple of Facebook projects we created from designs by the Blue Sky Agency. The project presented a number of interesting hurdles and we emerged with a much greater understanding of Facebook’s architecture, conventions and gotchas.

To begin with, you have a smaller area to work with than a standard web page. Facebook gives you about 500 pixels of width to work within. Additionally, if your content ends up longer than 800 pixels, a scroll bar gets added to your content (which hides about 10 pixels on the right side of the design). We were able to resolve the issue with a lot of research and a smidgen of javascript.

The second consideration was Facebook’s use of an old web technology called an iframe. For the uninitiated (i.e. those smart enough not to get suckered into programming), an iframe works by creating a “hole” in a web page. A second web page gets pulled into this “hole” by the iframe and gets display as if it’s just a single page. In this case, the information in the center is actual a separate webpage Facebook’s iframe pulls in for display. This trick has been around for a while, but web browsers tend to do it in different and often very aggravating ways (I’m looking at you Internet Explorer…) After a great deal of hair pulling, we managed to get all the browsers seeing things our way.

We also needed to create two versions of one page; one for a person who has “liked” Candlewood and hidden teaser page for people who have not yet “liked” Candlewood. This let’s them deliver cool deals to special customers and gather a network of friends for the company.

The last step was to tie it all together with a custom built Content Management System (CMS) that allows Candlewood’s Facebook admins to update the pages, add events to the calendar and preview their changes. The CMS is built with Sencha’s Ext4, PHP and mySQL. The CMS authenticates using each admin’s existing Facebook account login, allows for creating draft pages for later use, modifying the overall layout and it can be expanded to additional clients as needed.

The project taught us a ton of new things about Facebook and even gave us a few ideas for our own company Facebook page.

McPherson FuelZCard Website

Starting off with another wonderful design by the Blue Sky agency, the McPherson FuelZCard site was created using the WordPress CMS system.

The site uses a number of custom page types and a heavily customized admin panel for managing the various pages.

In this case, heavily customized means turning off a lot of the extraneous options available in WordPress. This greatly simplifies the maintenance of the website by the client and should be an essential design consideration of any WordPress installation.

Grady and Blue Sky

Twelve Foot Guru is pleased to have recently finished the new website for Grady Hospital here in Atlanta. The site was contracted to the Blue Sky Agency, who created a wonderful new design. Twelve Foot Guru was brought in to take the Photoshop design files and make them into a working website. In addition, we built a custom search tool with logging, geo-location and filtering to assist Grady’s users in finding the service they need.

This was a fun project and it was very well received by the client. The results speak for themselves:

  • Time on the site is up 150%
  • Search Usage is up
  • The new site has half the bounce rate of the previous site
  • Goggle Analytics is also tracking way ahead of the previous site

From The Client:


“12 Ft Guru is one of the most pleasant and professional development partners I have ever had the good fortune of working with. They not only brought their extensive programing knowledge to the table, but also offered smart solutions during the planning stages as well on every venture. I look forward to many more opportunities in the future to work these guys.”

– Ryan Kellogg

Vitality Guild Website

Vitality is a World of Warcraft guild. For those of you that have not have the pleasure (and you really should), World of Warcraft is a wonderfully complex online game played world wide by over 10 million people. Individual gamers become members of a guild which encourages collaboration between members and teamwork for accomplishing difficult in-game tasks. Guilds typically pool information, strategies and even loot in an attempt to help each other enjoy and advance within the game. By their very nature, these guilds are a combination of social network and tribal knowledge warehouse. The Vitality guild needed a site that reflected just this combination of social and knowledge space. We delivered using a combination of WordPress, BuddyPress and Simple:Press.

WordPress provides a dedicated CMS (Content Management System) so that Guild members can publish information on strategy, helpful guides for new users and rules for the guild. Custom code was added to pull information from the internal game calendar which allows users to schedule activities within the game world. This setup provides a near perfect base for a number of additional tools.

For example, BuddyPress allows the guild to leverage profiles, friends, status updates, notifications and other aspects of traditional social networks like FaceBook. We also added some custom coding to the profiles which where tied to Blizzard’s World of Warcraft Armory, providing each users profile with detailed views of all of their characters. Additionally, an RSS feed of in game achievements is captured for all Vitality Guild members and displayed on the home page.

The final piece was the Simple:Press forum which allows guild members to communicate and post helpful articles and thoughts on game play. Vitality had previously used a dozen forum topics, many of which were idle for long periods of time and often simply forgotten. In consultation with the guild we decided to shorten this to two forum topics: one for General information and one for outside resources. This server to funnel the information into fewer, yet more active, forums with the understanding that more could always be added later if they were needed.

The site has both a public face and a private section for guild members only. The private section also has a site wide alert system to notify all guild members of things like new site features, new game content, raiding opportunities and more. As with our larger database projects, all data is backed up daily and the system is monitored for outages.

Charles Pierce is a writer for the Boston Globe Sunday magazine and he has also written for the The New York Times, the Los Angeles Times, the Chicago Tribune, the Milwaukee Journal-Sentinel, Sports Illustrated, Esquire  and GQ magazines, and the e-zine Slate  as well as the Media Matters blog Altercation.

He also makes appearances on radio as a regular contributor to NPR programs “Only A Game” and “Wait Wait…Don’t Tell Me!” An author of several books including the best selling “American Idiot,” “Sports Guy” and “Moving The Chains: Tom Brady and the Pursuit of Everything.”

Charles wanted a simple site that could be updated with current appearance and article information. The site is using a custom built Content Management System (CMS) built with PHP and mySQL.

The site is used to supplement Social Media connections from Facebook and provides a central location for information about the various exploits and appearances of Charles Pierce.

As with our larger database projects, all data is backed up daily and the system is monitored for outages.