Web 602: Design and Code an Integrated Facebook App: HTML + CSS

Tutorial Details

Topic: Facebook App, UI, HTML, CSS, Photoshop
Difficulty: Beginner/Intermediate
Estimated Completion Time: 2 hours

This entry is part 2 of 3 in the series Design and Code an Integrated Facebook App

Design and Code an Integrated Facebook App: Theory
Design and Code an Integrated Facebook App: HTML + CSS
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

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design and Code an integrated Facebook App</title>
 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="js/myjava.js" type="text/javascript"></script>
 
</head>
 
<body>
</body>
</html>

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

<body>
<div class="wrapper">
 
    <div class="maincontent">
 
        <div class="tab_container">
        </div><!--End Tab Container -->
 
     </div><!--End Main Content-->
 
    <div class="sidebar">
    </div><!--End Sidebar-->
 
</div><!--End Wrapper -->
 
</body>

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

    <div class="maincontent">
 
        <div class="logo"><img src="images/logo.png" width="379" height="60" alt="webdesigntuts+ logo"></div>
 
        <ul class="tabs">
            <li><a href="#tab1">All</a></li>
            <li><a href="#tab2">About</a></li>
            <li><a href="#tab3">Write For Us</a></li>
            <li><a href="#tab4">Other Blogs</a></li>
        </ul>
 
<div class="tab_container">
    <div id="tab1" class="tab_content">
 
          <div class="post">
        </div><!--End Blog Post-->
 
        <div class="post">
        </div><!--End Blog Post-->
 
    </div><!--End Tab 1-->
 
    <div id="tab2" class="tab_content">
   </div><!--End Tab 2 -->
 
    <div id="tab3" class="tab_content">
    </div><!--End Tab 3 -->
 
     <div id="tab4" class="tab_content">
    </div><!--End Tab 4 -->
 
</div><!--End Tab Container -->
 
  </div><!--End Main Content-->
 
    <div class="sidebar">
    </div><!--End Sidebar-->
</div><!--End Wrapper -->

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

<div class="tab_container">
    <div id="tab1" class="tab_content">
 
         <div class="post">
                <h3><a href="#">Designing For, and As, a Color-Blind Person</a></h3>
                <span class="postInfo">by <a href="#">Connor Turnbull</a> on Jul 22nd 2011 with 2 comments</span>
                <p>Color  blindness is a mild disability through which the affected experience a  decreased ability to distinguish colors from others. This can be a real  drawback for anyone in the design field since color theory is an  integral feature in successful design, and a lot of decisions are based  on the feeling and emotion derived from...</p>
                <a class="more" href="#">Read More</a>
                <span class="line"></span>
                <a href="#">12 Likes 14 Comments Share</a>
                <span class="line"></span>
        </div><!--End Blog Post-->
 
    </div><!--End Tab 1-->

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

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

<div id="tab2" class="tab_content">
 
<h3>About</h3>
<p>Webdesigntuts+  is a blog made to house and showcase some of the best web design  tutorials and articles around. We publish tutorials that not only  produce great results and interfaces, but explain the techniques behind  them in a friendly, approachable manner.</p>
<p>Web  design is a booming industry with a lot of competition. We hope that  reading Webdesigntuts+ will help our readers learn a few tricks,  techniques and tips that they might not have seen before and help them  maximize their creative potential!</p>
<p><strong>Webdesigntuts+ is part of the Tuts+ Network</strong></p>
 
</div><!--End Tab 2 -->

Step 7: The Search Filter

webdesigntuts Facebook app filter search

<form action="" method="get">
            <input name="search" class="search" placeholder="Filter webdesigntuts+ posts">
            </form>

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

<a class="button left" href="http://webdesign.tutsplus.com/" target="_blank"><span class="buttonimage left"></span>Website</a>
           <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=253432341349745&amp;xfbml=1"></script><fb:like href="http://apps.facebook.com/fbtuttts"layout="button_count" width="75" show_faces="true" action="like" font="lucida grande"></fb:like>
           <a class="button right" href="#"><span class="buttonimage left"></span>Logout</a>

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

<div class="tabHeader">Categories</div>
 
               <ul>
                   <li><a href="#">Sample Cat 1</a></li>
                   <li><a href="#">Sample Cat 2</a></li>
                   <li><a href="#">Sample Cat 3</a></li>
                   <li><a href="#">Sample Cat 4</a></li>
                   <li><a href="#">Sample cat 5</a></li>
               </ul>
 
           <div class="tabHeader">A Little Bit About Us</div>

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

1	`Code Block showing tabs headers`

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.

/*-----------------------------------------------------------------------------------*/
/*  Setup
/*-----------------------------------------------------------------------------------*/
.wrapper{
width: 760px;
height:200px;
margin-left:auto;
margin-right:auto;
padding-top:20px;
 
}
.right{
float:right;     /* A class I always add to float items right */
}
.left{
float:left;      /* To float items left*/
}

Step 12: Building Blocks

The building blocks for our main content are as follows:

/*-----------------------------------------------------------------------------------*/
/*  Setup
/*-----------------------------------------------------------------------------------*/
.wrapper{
width: 760px;
height:200px;
margin-left:auto;
margin-right:auto;
padding-top:20px;
 
}
.right{
float:right;     /* A class I always add to float items right */
}
.left{
float:left;      /* To float items left*/
}
 
/*-----------------------------------------------------------------------------------*/
/*  Building Blocks
/*-----------------------------------------------------------------------------------*/
 
/*-----------------------------------------------------------------------------------*/
/*  Typography
/*-----------------------------------------------------------------------------------*/
 
/*-----------------------------------------------------------------------------------*/
/*  Tabs
/*-----------------------------------------------------------------------------------*/
 
/*-----------------------------------------------------------------------------------*/
/*  Buttons
/*-----------------------------------------------------------------------------------*/
 
/*-----------------------------------------------------------------------------------*/
/*  Extra Components
/*-----------------------------------------------------------------------------------*/

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.

/*-----------------------------------------------------------------------------------*/
/*  Typography
/*-----------------------------------------------------------------------------------*/
 
a{
cursor: pointer;
color: #3B5998;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
strong{
font-weight:bold;
}
em{
font-style:italic;
}
h3{
font-size: 16px;
font-weight:bold;
line-height: 1.1em;
margin-bottom:5px;
}
.postInfo{
display:block; /* Spans are inline element so needs to be changed to block in order for the margin to work */
color:#808080;
margin-top:5px;
margin-bottom:10px;
}
p{
font-size: 12px;
line-height: 1.5em;
margin-bottom:18px;
}
.line{
display:block;
width:100%;
height:1px;
background-color:#ccc;
margin-top:5px;
margin-bottom:5px;
}
.more{
color:#3B5998;
font-weight:bold;
 
}
.likesCount{
font-size:16px;
font-weight:bold;
}

Step 14: Tabs

/*-----------------------------------------------------------------------------------*/
/*  Tabs
/*-----------------------------------------------------------------------------------*/
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 19px; /*--Set height of tabs--*/
    border-bottom: 1px solid #E2E2E2;
    border-left: 1px solid #E2E2E2;
    width: 100%;
    margin-bottom:20px;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 18px; /*--Minus 1px from the height of  ul--*/
    line-height: 18px; /*--aligns text within the tab--*/
    border: 1px solid #E2E2E2;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #f2f2f2;
    margin-right:5px;
    min-width:73px;
    text-align:center;
 
}
ul.tabs li:first-child{ /*--Removes the left border from the first child of the list--*/
border-left:none;   
 
}
ul.tabs li a {
    text-decoration: none;
    color: #333333;
    display: block;
    font-size: 11px;
 
    padding-right:5px;
    padding-left:5px;
 
    outline: none;
}
ul.tabs li a:hover {
    background: #fff;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #fff;
    border-bottom: 1px solid #fff;
    color:#3B5998;
}
ul.tabs li.active a{
    color:#3B5998;
}

Step 15: 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.

/*-----------------------------------------------------------------------------------*/
/*  Buttons
/*-----------------------------------------------------------------------------------*/
.button{
    background-color:#ECEEF5;
    border:1px solid #CAD4E7;
    text-decoration:none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
padding: 2px 3px 2px 2px;
margin-right:5px;
}
.button:hover{
    border:1px solid #9DACCE;
    text-decoration:none;
 
}
.buttonimage{
background:url(../images/icon.png);
color: #3B5998;
display: block;
width:12px;
height:12px;
margin-right:3px;
margin-top:1px;
margin-bottom:1px;
margin-left:2px;
 
}

Step 16: Extra Components

/*-----------------------------------------------------------------------------------*/
/*  Extra Components
/*-----------------------------------------------------------------------------------*/
.logo{
width:379px;
height:60px;
margin-left:auto;
margin-right:auto;
margin-bottom:26px;
position: relative;
-moz-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
}
.search{
padding: 1px 5px 2px 0;
margin-bottom:20px;
width:240px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}
.tabHeader{
background-color: #F2F2F2;
border-top: solid 1px #E2E2E2;
padding: 4px 5px 5px;
margin-top:15px;
margin-bottom:10px;
}
.profileimage{
float:left;
margin-right: 5px;
}

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

Series Navigation<< Design and Code an Integrated Facebook App: TheoryDesign and Code an Integrated Facebook App: PHP + jQuery >>

Web 602

martes, 24 de enero de 2012

Design and Code an Integrated Facebook App: HTML + CSS