Responsive Facebook Tab Framework

Responsive trumps unresponsive design.

Keeping in step with our new policy of designing and developing sites in a responsive manner, so that they function with both desktop and mobile devices in a manner specific to those devices (unless we have a good reason not to), we decided to put together a framework for Responsive Facebook Tabs.

One of the easiest ways to integrate your site’s or your company’s web presence with Facebook is to use a ‘page tab’ as a Facebook App. It is essentially just an iframe and we’re not going to get into the details of how to get a ‘page tab’ or ‘app’ set up on Facebook, there’s tons of documentation for that already.

Instead, we’re breaking down what we put into our Responsive Facebook Tab Framework, why we put those things in it and a step-by-step guide to setting it up.  (Hint:  it’s dead simple.)  

Our Responsive Facebook Tab Framework is actually based on work done by people far more talented than us, we just modified it.

Since Facebook’s Tab/App space is 810 pixels max, we used the 1140px CSS Grid developed by Andy Taylor but modified it to 810px. You can get your hands on his original work by visiting http://cssgrid.net.

We then turned to Nicolas Gallagher’s awesome CSS Reset tool Normalize.css as a means of reseting all the browser defaults to a consistent base, thus reducing any debugging and adjusting we’d have to do on a browser by browser basis once we got into the actual site design.

We then added a series of jQuery tools, whose purpose is self-evident:

  • first we downloaded the newest jQuery library,
  • jQuery Retina Support, which replaces regular size images with counterparts twice as big on devices with double density pixel counts &,
  • a CSS3 Media Queries javascript that actually checks for device widths and pixel densities in browsers that don’t natively support it.

The final piece of our puzzle was to visit modernizr.com, make the selections that suited us and then output a minified browser modernizr.js file that forces older browsers to display cool new HTML5 and CSS3 features even if they don’t natively do so. (We recommend you visit modernizr.com and output your own file, however, we have included our’s in the download.)

So, download our Responsive Facebook Tab Framework and follow the instructions below.

Responsive Facebook Tab Framework

1. Download and unzip the archive.

2. Open the folder/directory generated by unarchiving and open the index.php in your preferred text editor.
Lines 1 through 10 are a set of reminders, run through 4 of them and delete.

1
2
3
4
5
<!-- PLEASE COMPLETE THESE STEPS PRIOR TO EVERY TIME YOU USE THIS FRAMEWORK - SAVE THE TEMPLATE &#038; ASSOCAITED FILES, THEN DELETE THESE NOTES IN YOUR WORKING VERSION.-->
<!--1. Go to http://necolas.github.com/normalize.css/ and update to the newest version.-->
<!--2. Go to http://modernizr.com and update to the newest version.-->
<!--3. Go get the newest version of jQuery at www.jQuery.com.-->
<!--4. Go get the jQuery retina support at http://www.troymcilvena.com/post/998277515/jquery-retina/ -->

3. Go and download the newest version of normalize.css.

4. Go and output your own modernizr.js file.

5. Get the newest version of jQuery.js.

6. Go get the newest jQuery Retina Support script.

7. The final step is to determine if whether you want to have a 20px gutter on either side of your tab (so it’s max-width would be 790px) or if you’d like it to extend to the full width of the Facebook Tab iframe at 810px. Once decided, open the 810.css located in:

library/css/

…once open, edit the GUTTER rules located in the file. (Start around line 17.)

1
2
3
4
5
6
7
8
9
10
11
12
13
/* ------------ NO GUTTER ------------ */
/*.container {
padding-left: 0;
padding-right: 0;
}*/
/* ------------ NO GUTTER ------------ */

/* ------------- GUTTER ------------- */
.container {
padding-left: 20px;
padding-right: 20px;
}
/* ------------- GUTTER ------------- */

As you can see, gutterless is 0px on the padding and guttered is 20px on the left and right padding.

And that’s it.  From there, you can simply go ahead and design/develop any manner of Facebook tab. We recommend you read the instructions with each of the associated tools so you can familiarize yourself with how to get them to work and how to maximize their performance/features.

Download it here: Responsive Facebook Tab Framework

This entry was posted in Blog, Downloads and tagged , , , , , , . Bookmark the permalink. Trackbacks are closed, but you can post a comment.
    • |
    • |