As a themer I understand how important it is to have a guide or tutorial you can follow when first learning how to design a theme for a new platform. Good documentation is key! As the Vanilla community continues grow and thrive more and more themers are looking to add Vanilla themes to their portfolio. Since I’m in the in-house themer, amongst other things, at Vanilla the BIGGEST question I get asked is “How do I design a theme in Vanilla?”

I’ve spent the last week trying to answer this question by putting together a guide that illustrates the design approach/process I take when it comes to theming. It is my goal that this guide will continue to grow organically with the help of the community and their feedback.

Without further ado, I bring you …

The Ultimate Theme Guide for Designers – will show you how to build a powerful, up-to-date, Vanilla Theme from scratch. Essentially, you’ll learn everything you need to know about Vanilla Theme development.

What are you waiting for? Go code yourself up something awesome!

Dirty Deeds – Stupid People from Flying V on Vimeo.

Exhausted … after 4 days in NYC at the greatest design event ever, FOWD!

As you may know from previous posts I have spent the last few months on the road with Vanilla spreading the good word, and having a lot of fun doing it. I was very excited to have the opportunity to head to New York for a few days to check out FOWD, by far one of my favorite design conferences, organized by Carsonified, whom many of us in the industry look up to. It was a fun filled, inspiring, and action packed 2 days of learning from some of the greatest minds in the industry focusing on design from all aspects.

Highlights

Every presentation was good, but there were a few that really stood out for me.

• Designing for Emotion – by Aaron Walter of Mailchimp. Aaron looked at design from a more conceptual and psychological approach and tied it in to how our emotions are affected by this.
• How to Design Great WordPress Themes – by Nick La of n-design studio. Nick showed us how to design a WordPress theme that is properly UI’ed to give the user the best possible experience.
• What Will Web Design Look Like in 2 Years? – Jan Cavan of Dawghouse Design Studio. Jan hypothesized what the future of web design will be based on the current state of the web and where it’s heading with technology such as mobile.
• 10 Tips for iPhone Interface Design – by Sarah Parmenter of You Know Who Design. Sarah illustrated how to conceptualize, design, and develop a successful user interface for iPhone.
• The Changing Face of Typography – by Mathew Smith of Squared Eye. Mathew took us above and beyond the world of design and showed us how essential typography is to the success of design and the impact it has on the user.

What made it successful

• Venue -New World Stages, an off Broadway theater in midtown  Manhattan.
• Location – Close to absolutely everything New York has offer!
• Speakers – Wow, some of the greatest minds in the industry.
• Host – Paul Boag. This guy ROCKS!
• Food – Starbucks coffee in the morning and individual boxed lunches (Sandwich, chips, cookie, and a drink)
• Attendees – Friendly, outgoing, smart, and interesting. What more could you ask for!

What made this event so successful, for me, was the overall feeling of being welcomed into a family. Every moment was an opportunity to meet someone interesting, spark a conversation, and create a new relationship. I was fortunate enough to meet some remarkable people, or should I say friends, whose kindness extended beyond the conference walls and into an amazing experience. It was like “design camp”. Each day I had lunch, dinner, and some crazy nights with a varying group of individuals from all over world.

It was great to share our industry experiences, swap battler stories, and most importantly learn from each other and develop new alliances and strategies.

Good people, good times …

As I’ve already mentioned, my biggest take away are the people I met, the agencies and firms I discovered, and most importantly the friends I made. I would be remiss if I did not shout out to the wonderful people that made this experience worthwhile.

*In no particular order

• James Fenton – Tribal
• Clint Robinson – Rawlco Interactive
• Juanma Teixido – Teixido
• Andre Foeken and Matthijs Langenberg – Nedap
• Aaron k White – Empire Avenue
• Jan Cavan – Dawghouse Design Studios
• Paul Boag – Boagworld
• Louise Morgan – Carsonified
• Ismael Burciaga Jr – ChurchMedia
• Meghan Bristow – SAS
• Joe Guthrie – SA Technologies
• Fabian Acantara – Mad Fabuloso
• Chris Bannon – Wijmo
• The Entire webpop crew (these guys ROCK!)
• Tyler Smith – Teamspace
• Bryan Shneider – Bryan Shneider Design
• Gillian Vrooman – GNDV
• Dan J Sullivan – Daniel J Sullivan Design

old friends …

• Nick La – n design studio
• Alkarim Nasser – bnotions
• Darcy Clarke – Themify

Follow these people on twitter @DanielJSullivan @thatguy666 @jamesfenton @alkarim @aaronkwhite @fabuloso @jancavan @gndv @boagworld @nickla @darcy_clarke @loulou @ webpop @teixido @b4nn0n @meghanbristow @nutshell @churchmedia

See you all next year!

I’m stoked to be heading to New York for a few days next week (Nov14-17) to check out the Future of Web Design Conference. I attended the conference a few years back, it was an amazing experience. I’m also really excited to be back in New York again. I lived there for 2 years when I graduated college, paid my dues with my first real world experience in the industry. I’m looking forward to reunite with colleagues, friends, and family, and can’t wait to check out my old stomping ground in Brooklyn.

I’m also glad to see that Nick La, a good friend of mine, will be speaking this at the conference (How to Design Great WordPress Themes). If you don’t know who he is, you really need to check out his illustrated and WordPress work.

Other presentations I am looking forward to:

• Designing for Emotion – Aarron Walter, Mailchimp
• Getting Down To Business: How To Be Successful With Web Design – Paul Boag, Headscape
• What Will Web Design Look Like in 2 Years? – Jan Cavan, Dawghouse Design Studio
• Beyond Usability: The Art of Experience Design – Aral Balkan

To name a few ( see full schedule here )

Here is a small list to get you started, they are all built using the jQuery library and licensed under both MIT and GPL licenses.

ColorBox

The nice thing about ColorBox is that it works on Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8. This tool will pretty much load anything you need, it is really easy to modify at CSS level, image level, and the jQuery is pretty standard. One thing I did notice is that id tends to conflict with jquery-latest.js.

FancyBox

Great tool, updated often, lots of good documentation and examples.

Lightbox2

Lightbox is slowly becoming a standard and first choice for most developers. It is very user friendly if you are a nOOb to jQuery. Lightbox also has a very reliable WordPress plugin. You can see this plugin in in action on my portfolio.

Shadowbox.js

Shadowbox is written entirely in JavaScript and CSS and is highly customizable. This package is not jQuery (very similar), but very useful and has some nice effects. They offer both free and commercial licenses (30$-50$).

jQuery Dialog

jQuery dialog allows you to display floating windows. You can add scrollbars and drag features and they are easily customizable with minimal code.

If you have created anything unique or different with these tools, or want to recommend other alternatives please feel free to comment on this post.

What this post covers

• FBML – The Basics
• Adding Applications (For first time admins)
• Static FBML Widget
• Adding Your FBML Box or Tab to Your Page
• FBML Examples
• FBML Test Console
• Creating Custom Tabs
• Removing Tabs
• Facebook Page Examples

FBML – The Basics
A bit of history -  First came FQL (Facebook Query Language) which evolved into the Facebook API. Then in 2007  Facebook launched their Platform in order to complement their API, which uses FBML(Facebook Markup Language), similar to HTML, it allows you to write browser interrupted code to render elements on a Facebook page or application. For example, we can embed FLV’s or SWF’s, insert images, retrieve or send data, etc., essentially creating widgets.

The only downside is that these widgets can only be used on Facebook!

Before we get into some basic code snippets, I should mention Jesse Farmer’s post An Introduction to FBML, he does a really good job of breaking down the theory, plus he has included some really good code examples to help you get started. You should also check out the Facebook Developers Wiki.

Top

Adding Applications
The following is mostly for new admins. If you know this stuff you can skip to the juicy content below.

By default when you create a Facebook page there is a set of standard applications that come with it; Discussion Boards, Events, Links, Notes, Photos, and Video. However, we can add to this set by browsing some of the other applications that exist. These applications are similarity, but not exactly the same as the ones you would add on your personal profile. Typically we are looking at business applications like RSS Grafitti, Slideshare, flickr, YouTube Box, FlashEmbed, and most importantly Static FBML.

To add an application to your page click on “edit page” (link is under your profile pic when logged in) and at the very bottom there is a “More Applications” option. Click on the pencil icon and choose “Browse More”. This will take you the central Facebook apps page.

I recommend using the search, for example enter “Static FBML” (no quotes). Once you have found an application you want/need got to the application page and click on “add application to my page” and follow the on screen steps. Go back to you Facebook page and under “edit page” you will find your new application ready to go.

Top

Static FBML Box (Basically a widget)
For starters you will need to install the Static FBML application mentioned above. The nice thing about this widget is you can write HTML in it. So, for example if you want to load some graphics like banners, logos, etc., you can use <img src”">. You can also link these images with <a href=”"> and so on. You cannot run JavaScript ONLY basic CSS/HTML!

Top

Adding Your FBML Box or Tab to Your Page

• In “edit page” find the “Static FBML” link, click on the pencil icon and select “edit”
• Enter the name you want to appear in the box heading in the “Box Title” field
• Enter the HTML content in the “FBML” field
• When you’ve added in your HTML — click “Save Changes” and view your page to see the results.

Unfortunately there is no preview option.

*A few tips on dimensions – If you want your FBML box to appear in the left column of your Wall, set the width to 180px and/or if you want it to appear in the tabs in the main Wall column, set the width to 600px  width or less.

Top

FBML Examples
Here is an example of a page I am working on (not published yet).This FBML box is on the left column. All I have done is called an image and linked it to a Twitter profile using standard HTML.

Let’s take a look at some FBML. Here is some simple code to embed a swf in the Static FBML box (this is if you wanted to do something like the Apple Students page “On Campus” tab). To do this I used the fb:swf tag which allows me to render a SWF object. Notice I also load an image file, this is because an image will appear first, when the user clicks on the image, it turns into the SWF object. We can do the same thing with an FLV.

<fb:swf
swfbgcolor="ffffff"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.yourdomain.com/mymovie.swf'
imgsrc='http://www.yourdomain.com/myimage.jpg'
width=600' height='450' />

and to load an flv…

<fb:flv
src='http://www.mediacollege.com/video-gallery/testclips/barsandtone.flv'
width='400' height='300' title='my movie' color='#FFBB00' salign='r'
img='http://www.example.com/test.jpg' scale='showall'/>

and just for fun, here is how you load an mp3

<fb:mp3 src="http://host.com/file.mp3" title="Song Name" artist="Song Artist" album="Album Name"/>

Top

The FBML Test Console
Now that we have covered some of the basics let’s take a look at the  Facebook Developer Tools. You may not be aware that Facebook offers a bunch of free online developer tools to help you learn, test, and eventually deploy your apps. For this example I will go through some basic FBML embedded in HTML.

Using the  FBML Test Console we can input our code and get a Facebook Box preview. The FBML Test Console will also output the HTML source if you need to embed it elsewhere.

How it all works

• Log into to Facebook
• Got to Facebook Developer Tools
• Click on the FBML Test Console Tab
• You will notice that the tool will automatically retrieve your user ID and API Key
• Input code in the left box
• Click on “Preview”

*Notice the Position dropdown menu, here you can choose from standard Facebook layouts like feed body, request form, etc.

In this example I am using some test code I found online(can’t remember where), to retrieve user profile pic and name. I create a basic HTML table and embed the fb:profile-pic and fb:name tag in adjacent cells. For the fb:name tag I use 3 attributes, useyou=false, uid=(whatever user ID you want to retrieve), and firstnameonly=true(in the last cell I change it to false). For the fb:profile-pic I use 1 attribute uid=(whatever user ID you want to retrieve).

Here is the code I inputted (remember to change the uid=xxxxxx to an actual user Id)

<table cellpadding=0 cellspacing=0><tr><td>
<table cellpadding=0 cellspacing=0>
<tr><td>
<fb:profile-pic uid=xxxxxx></fb:profile-pic> </td></tr>
<tr><td>
<fb:name useyou=false uid=xxxxxx firstnameonly=true></fb:name>
</td></tr></table>
</td><td>
<table cellpadding=0 cellspacing=0><tr><td>
<fb:profile-pic uid=xxxxxx></fb:profile-pic> </td></tr>
<tr><td>
<fb:name useyou=false uid=xxxxxx firstnameonly=true></fb:name>
</td></tr></table>
</td><td>
<table cellpadding=0 cellspacing=0><tr><td>
<fb:profile-pic uid=xxxxxx></fb:profile-pic> </td></tr>
<tr><td>
<fb:name useyou=false uid=xxxxxx firstnameonly=true></fb:name>
</td></tr></table>
</td></tr></table>

This is what it outputs

Once you have a basic understanding of FBML you will find this tool very useful for testing code and playing around. You may also want to check out this great post at devtacular on How to Style an Application Like Facebook this post includes a complete Facebook Component Stylesheet!

Top

Creating Custom Tabs
It is important to create custom tabs that represent your page/brand beyond the basic Wall, Info, Photos, Events, etc.  Most successful pages use custom tabs to sell their products or services, watch demos and presentations, enter contests and so on. A good example is the Apple Students Page, they have a tab called On Campus which launches a really slick Flash app with videos, a google map mashup, and some ads.

The other bonus of custom tabs is the ability to set it as the default landing page. In your page settings you can choose which tab is set as the default, most people just use the Wall. A good example is the Nokia Page, which defaults to Nokia Twist-USA.

How do I create a custom tab? Easy! First you need to make sure you have added the FBML Application to your page. Without it you can’t create any custom widgets to display as tabs(you can also use these steps to add any of the default applications as a tab).

Click on “edit page” (link is under your profile pic when logged in) and under Applications click on the pencil icon on the top right corner of the application you want to add as a tab.

Click on “Applications Settings”.

You will be giving 2 options, add/remove from Boxes and add/remove from Tab. Click “add”. Now go back to your page and refresh and you new tab should be there.

Top

Removing Tabs
Removing tabs take only a few seconds.

Click on any of your tabs. When that page loads you will notice the tab is white and a pencil icon appears next to the tab name. Click on the pencil icon.

Click on “Delete Tab”. Told you it was easy!

The only tabs you cannot delete are Wall and Info.

*A quick tip about the Boxes tab – You can remove the boxes but not in the same way as others. To remove the boxes tab first you need to click on Boxes. When the page loads remove each box that is under this tab (the same steps as above). Once there are no boxes left under the Boxes tab go back to your wall. The Boxes tab should be gone, if not refresh a few times. Essentially this tab only exists if there is something in it!

Top

Here’s a list of some really nice examples
http://www.facebook.com/officelive
http://www.facebook.com/applestudents
http://www.facebook.com/livescribe
http://www.facebook.com/nokia
http://www.facebook.com/Starbucks
http://www.facebook.com/adidasoriginals
http://www.facebook.com/Paramount