500
We've just published our 500th video course! Get it FREE for a limited time.
Advertisement

Design and Code an Integrated Facebook App: HTML + CSS

by
This post is part of a series called Design and Code an Integrated Facebook App.
Design and Code an Integrated Facebook App: Theory
Design and Code an Integrated Facebook App: PHP + jQuery

Welcome back! In this part of the tutorial we're going to be coding our design into HTML and illustrating some of Facebook's CSS style properties that will give it that native feel. So stick with me, make yourself a cup of tea and happy coding!


Introduction

Welcome to part 2 of our design and code a native Facebook app. In the last article we looked behind the scenes at some of the thought processes involved with creating a native look and feel Facebook app. Although we didn't go into great detail about the actual design of it in Photoshop; we did discuss how Facebook's design principles can help you with designing your app. For my example I chose to recreate the webdesigntuts+ blog as a Facebook app. I'm presuming that you are all comfortable enough in Photoshop to have either replicated it or tailored it to create your own native look and feel design.

What We'll be Creating

Design and Code an Integrated Facebook App

In this part of the tutorial we're going to be coding that design into HTML and illustrating some of Facebook's CSS style properties that will give it that native feel. So stick with me, make yourself a cup of tea and happy coding!


Step 1: Failing to Prepare is Preparing to Fail

It's always a good idea to begin with a bit of forward planning. Some of you will want to design your layout in Photoshop whilst some of you who are confident enough will want to jump straight from the wireframe into the HTML/CSS mark up. Personally I always like to create what I am going to be coding into Photoshop first as it gives me a strong visual idea as to what I am going to be coding. It can also come in handy in the future for when you want to update your app. It can be much easier to arrange and conceptualize things in Photoshop than it can be in your code editor.

Sometimes I also like to print out my wireframe and mark the dimensions on them with a pen. This also makes life easier when I'm coding things up. As you go along I'm sure you will come up with your own methods and ways of doing things and a part of it is finding the best way that suits you.


Step 2: App Structure

Facebook app folder structure

The way I have my folder structured is as follows (and this is pretty much my standard way of setting things up for every project). You can save yourself a lot of time by simply creating this blank folder template on your hard drive and copying it every time you create a new project

  • css
  • js
  • images
  • index.html

Step 3: HTML Markup

Setting Up our Includes

For this project I've used the HTML5 doctype, which I think most of you should have tried out by now. For my CSS reset I've linked to Yahoo's CSS reset from their YUI library. If you're not familiar with a CSS reset, in its most basic form it can be described as:

a stylesheet to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings etc

I'm not going to go into too much detail about this in this tutorial but you can find more information regarding this in the further reading section below.

After the reset I've then linked to my own CSS file which I've named 'style.css'. I've then followed this by the latest include of jQuery and an include to my own javascript file which I have named 'myjava.js' (although we will be creating this file in the next part of the tutorial). This file will allow us to do our filter search and change the content of our page tabs

Setting Up Our Page

Whilst creating the html version of our Facebook app I'd like to put everything in a wrapper that is 760px wide. This is just to ensure that I'm staying within 760px; the width of the canvas that Facebook allows your app to sit in. I then remove this wrapper and the CSS for it before I put it into Facebook.

Once we've setup our includes and 'wrapper' it's then time to move onto the main building blocks of our app. In this example it's relatively simple as we only have the 'maincontent' and the 'sidebar' divs. To this we'll apply classes of the same name. You could, if you wanted, use 'id's' instead of 'classes' as these div instances will not be repeated. However, something, which I always opt for (although I'm sure some would disagree) is to use classes on most items. I rarely use id's. I find that by doing this it just keeps it simple for me. I never have to wonder whether I've given something an 'id' or a 'class'. This can come in remarkably handy especially when you start to incorporate jQuery into your apps. Although do consider whether it is feasible before you start coding that you definitely will not need to use id's anywhere.

It's also advisable to always end your markup blocks with a closing comment stating which part of the markup has finished. This way you know where each section ends. I must admit I was pretty late at adopting this technique and in hindsight I could have saved myself many hours of having to wade my way through heaps of code trying to find out where certain blocks begin and end.


Step 4: Main Content

Facebook app main content

For this app I didn't think it was necessary to use a header just to house the logo so I've put this at the top of the 'maincontent' div in its own div with a class called 'logo'. This is then followed by an unordered list for the tabs. I've given the tabs a class name of; yes you guessed it 'tabs'. These will act as our tab menu bar that will display the different pages of our blog app.

The pages of our blog app are wrapped inside a div container, which I have given a class of 'tab_container'. Inside this I then have four divs (one for each tab/page). I have given all four of these a class called 'tab_content' with each one having its own class for its position within the page. The first tab has an extra class of 'tab1', the second 'tab2', the third 'tab3' etc. These individual class names will be used to help us identify each tab in the next part of the tutorial when we implement the jQuery.


Step 5: Individual Blog Posts

webdesigntuts Facebook app blog posts

The individual blog post has a class titled "post" and is situated in the div with the class 'tab1' as this tab will be on the default-landing page. This then contains several anchor and span tags which will allow us to be able to style items such as the date and blog author in the native blue a la facebook. Once this 'post' div has been completed we can simply copy and paste it for the rest of the posts. Don't go overboard and clog up your code, keep it to around three or four as this will give us an idea as to how it will look and feel. I've also created a span with the class 'line' which is simply a horizontal line that we will use throughout the app.


Step 6: Other Page Tabs

webdesigntuts Facebook app tabbed pages

Our other Page Tabs are made up mainly of h3, anchor and paragraph tags:


Step 7: The Search Filter

webdesigntuts Facebook app filter search

At the top of the sidebar we have our site filter search - this is made up from a simple form. We will make this operational in the next part of the tutorial using jQuery. The form is then followed by another horizontal line and a span and paragraph text to display our 'likes' count.


Step 8: Facebook Like and Button

Fortunately for us, Facebook has made it super simple to incorporate a like button into our app. You can generate the code for your own like button or any of their other social plug-ins at Facebook Developer Plugins. Once you've generated the code, bring it into your html. You may want to add some CSS to position it, however in this case it isn't necessary


Step 9: Tab Headers

If you have read the first part of this tutorial (if you've made it this far I'm guessing you have) then you'll have heard me talking about reusability. These tab headers define that more than any other part of our code. As with Facebook we are able to reuse these tab headers and implement them with great ease. They come in really handy should you want to add a quick additional section to the site.


Step 10: The CSS

Now it's time to move onto the styling of our HTML. Due to Facebook's simple styling there isn't too much CSS. I've broken it up into parts for you to have a look at. It's also important to point out at this stage that Facebook can be annoying when it comes to testing and tweaking your CSS as it caches it, meaning that when you upload a new version of your style sheet it still renders the old one. Although not perfect; the workaround I used was to add '?version=1' at the end of the included stylesheet in the index file. Every time you do an update to the CSS and upload you also have to update the version number in the index file.


Step 11: Setup

We start the CSS by creating the wrapper and a couple of classes that I always add to be able to float items left or right.


Step 12: Building Blocks

The building blocks for our main content are as follows:


Step 13: Typography

Probably one of the most important CSS parts of our Facebook app. Get this wrong and it will spoil the native effect of your app. Have a look around Facebook and choose the most suitable font sizes for your requirements.


Step 14: Tabs


Step 15: Buttons

webdesigntuts Facebook app buttons

Another integral part of the CSS for Facebook apps is the buttons. I'm sure you'll want to use a few of these around your apps. We've created these not using a button, but instead an anchor tag with a span class inside it for the image.


Step 16: Extra Components


Conclusion...

So there we have it, we now have our Facebook app coded up into HTML/CSS. I hope you enjoyed reading this part of the tutorial and that you now have a great understanding on how Facebook's styles can be translated into CSS. By looking at and using a few of Facebook's CSS properties we really are able to understand how just a few lines of code in the correct places can give our app that native look and feel, which will sit comfortably within Facebook and adhere to Facebook's design principles.

In the next part of the tutorial we'll be learning how to implement this into Facebook to be a native blog app. We'll be doing this using YQL and the Facebook Graph API. I'll also be showing you a few hints and tips for spicing up your app with some sweet jQuery goodness. So until the next part, happy coding peeps!


Further Links & Resources

  • Design and Code An Integrated Facebook App - Theory
  • Eric Meyer's CSS reset
  • Facebook social plugins
  • Our Webdesigntuts+ app on Facebook
  • Advertisement