The first thing you see when you land on someone’s Facebook page is their landing page.

You know the ones.

They show you a glimpse of what the company/business offer and ask you to Like their page…. often with the promise of wealth/fat loss or, like mine, free information.

Putting this extra effort into improving the load times will avoid users, just like you and me, clicking away. By avoiding this you increase you brand awareness and PROFIT$.

Creating a Facebook Page Welcome tab

There are lots of different ways that you can do this. The most popular way that I have found people using is using an exisiting Facebook App to help you create and host the pages for you.

Alternatively if you’re feeling adventurous, you could code and create your own Facebook tab which will give you a lot more control over things like performance, but if you want the more fancy features it will begin to mean you need more programming skills.

Some easy products that do it for you include….

• Lujure
• Wildfire App (I’ve run competitions with this)
• Tab Site
• North Social

If you’re interested in doing it yourself I’ll be writing an article on how you can do just that for yourself shorlty.

Performance – Battle of the load times

I decided to take a look at the performance of 9 different types of pages for the test.

• 5 were created and controlled by me.
• 2 were pulled from Lujure (Amy Porterfield & Lujure itself)
• 2 were well known brands from the top 10 brands on Facebook for 2011 (Oreo & Cocacola)

Control Batch

I looked at a few possibilities for the pages that were within my control, although you could expand these further.

• Facebook Like Page (checks to see if the user has liked the page) containing a Single Image hosted on my server
• Standard HTML page containing an image, both hosted on my server
• Standard HTML page with inline CSS, hosted on my server
• Standard HTML page hosted on Amazon S3 CDN Server
• Standard HTML page, like #2, but the image was hosted on Facebook

The final results

In order of first to load….

1. 2.8s Amazon Hosted Page (sadly disqualified for returning an error)
2. 3.1s HTML & inline CSS
3. 3.5s HTML & Facebook image
4. 3.9s Fan switcher page (a result anomoly I think)
5. 4.5s HTML & image
6. 4.7s Amy Porterfield (hosted by Lujure)
7. 5.1s Coca-cola (hosts unknown)
8. 6.5s Lujure (hosted by Lujure)
9. 6.5s Oreos (hosts unknow)

What did we learn from this?

The most basic thing I learned is something that I’ve already included in the beginning of the post. Your Facebook page tab should be created with the same performance rules you would use for the rest of your website.

Some of the cooler things that I learned, and you should keep in mind are….

• While Amazon S3 was the best performance OUTSIDE of the Facebook page it returns an error when you use it in Facebook. The error is “Method Not Allowed” “The specified method is not allowed against this resource”. The reason you get this back is because Facebook is pulling the content through an iFrame and for some reason uses a POST to retrieve the content. Unfortunately Amazon only accepts GET requests at the moment… even with the Bucket rules added that Facebook supply to you.
• If you are going to use images on your Facebook page landing tab then you should first upload them your page Wall or in a photo album and set them to public read. Then you simply use that URL to pull the image into your page (and you take advantage of Facebooks awesome CDN).
• KISS – The old saying. Keep it as one document (no javascript or css files) and write all your CSS inline. If you must use pictures (and I think you definitely should) then host them with Facebook.

I’ve nested a video below for you to see how the load times went. There are a few caveats with these tests (grain of salt time).

1. You can see that the Facebook wrapper loads at different times, so the final time should take that into account
2. This was run a few times, each with very similar results, on a server located in the US via http://www.webpagetest.org. I couldn’t use the Video snapshots with any other server.
3. Oreo, Lujure and Coca-cola each showed progressive loading around the same time as the others were showing full content. This might be enough to keep you user put and not clicking away.

To wrap up….. this is just a test. Please check out the pages yourself and post back your experience with each of them. If anyone can do their own round of testing with the same pages please let me know the results.

Build your team of superfans with www.booshaka.com

Booshaka allows you to run a leaderboard right from your Facebook page. Essentially it tells you who is working the hardest for you on Facebook. These are people or facebook fans that are talking about you the most frequently and sharing your content. As a side note, the best engagement is comments on your wall posts, followed by shares of the same post and lastly Likes of your posts.

How can I use this information?

Armed with that knowledge you can then go about rewarding these fans for all the good work they do. The rewards section is the paid version of Booshaka, however there is no reason why you couldn’t create your own rewards page on your site rather than pay for booshaka and get your fans to find out their prizes on those pages.

So what could I do?

Well for example for the Top 10 users you could give away a graded award. #1 gets 20% off your product, #2 gets 10% etc etc. If you’re not selling a product you could also offer free advice for becoming the number #1 person.

How does this help? Well the more people that are engaging with your page and talking about your brand, then more of their friends feeds that you’re going to show up in… and therefore spreading your brand our even further.

It is an expensive service, but one worth checking out if you want to take user engagement a little further.

Laura has been using wordpress for a year but had grown out of the initial off the shelf theme that she had originally chose.

While the wordpress site was able to do everything that was required for her needs, it lacked character and personality to match her brand.

We sat down and discussed the kind of look and feel that Laura wanted for her site, and how the tone of the site should come across to her readers and students.

Armed with that knowledge I set to work first coming up with the logo design. Laura was happy with the first draft, however we had used the original Union Jack colours that created the wrong mood for the site.

We came up with the colour palette and applied this to the logo, and from there it all fell into place.

The site was rebuilt using tweaks to the Thematic theme, and continues to use WordPress as the CMS behind the scenes.

Page Templates

Home page with feature

Inner Page with sidebar

If you have an existing site and you’re looking to give it a bit of a face lift then contact us now for a free 30 minute consultation. If you after that you don’t think I’m the right person for the job you’ll still be 30 minutes more informed about what you need to do next.

This had a duel benefit for Facebook users.

1. If you didn’t want your company or brand to be associated with your holiday snaps they could be completely separate
2. If you wanted to Follow a Brands message you didn’t have to put up with non related content

It also allowed users to collaborate together while still maintaining your own individual accounts.

The other benefit of the page was that Facebook allowed us to create a specific image for our Facebook pages, and it could be a lot bigger than our regular profile images.

So lets get into the details of the Facebook page image.

Dimensions

The image can be 180 x 540 pixels.  This gives you a tonne of screen realestate to not only show off your funky brand, but also to convey quite a bit of extra information to you reader.

This leads us to the next element

Company Name

Include your brand name in the image as well.  I know that sounds pretty obvious, but you would be amazed how many people get caught up with the design and forget to include the name of the buisness they’re trying to promote.

Sure, if you’ve got a world recognised brand then you can get away with it, however if you’re like the rest of us getting started you should keep the company name visible.  It goes a long way to cementing your name and what you do into the readers sub-conscious.

Company URL

Although you won’t be able to click on the URL it’s the same theory as the company name.  It’s no good if you have a potential customer that knows you are called Justin Avery Design but don’t know that you’re site is actually http://justinavery.me .  This is particularly important if you are in competition with domain names and there is .com, .com.au, .net, .org, .co.uk sites out there as well.  You don’t want all this good work to go to your competitors do you?

What your business does

Again we are sure that you will have this covered with you post updates but people are drawn to this area so you should use it.  Give people a sentence or a strapline telling them exactly what you’re all about.

Think “elevator” pitch but much much shorter.  Maybe “broken elevator hurtling towards the ground” pitch.

What else?

That’s it.  This will be a great start… and if you haven’t already done these things then chances are you should see some improvement on your fan base. Check out some examples below to give you a few ideas about what you can do, but please remember that some of these brands are already very established so stick with the guidelines.

Skittles Facebook Image

Victorias Secret

Social Media Examiner

Commonwealth Bank

Zappos Facebook Page

Justin Avery Web Design

Next Steps

We’ll be posting a few more articles around Facebook, Twitter and Google Plus marketing in the next few weeks so if you’re interested don’t forget to subscribe to our updates.  If you’re looking for some immediate advice then contact me to organise an in person meeting or we can skype(@justincavery) or get together for a google hangout.

Why?

The main reason is because I don’t like suggesting people use javascript to manipulate the content of their pages.

Those days are fast approaching being over now that clients are beginning to accept three key things

1. you can progressively enhance your website.
2. your website can progressively degrade
3. your website doesn’t need to look the same in every browser

But I digress.

Lists

There are two basic types of lists, ordered lists and unordered lists.

It’s usually pretty easy to decide which one you’re going to use. If you’re listing something in order, like the top 10 way to style lists, use an ordered list. If you’re listing something because it needs to be listed, like the contents in your bag or the navigation on your site you use an unordered list.

Fancy Lists

The issue with lists are they are usually left aligned and don’t usually span the width of a page.

This isn’t a problem for unordered lists, because you can set the <li> to float:left; and you have all of your list items in a horizontal rather than vertical list.

If you want them in two columns, then you simple set the width of the <li> tag to be 50% of the container width…either the <ul> or containing <div>.

The trouble comes when you want to do something similar with an ordered list. This method will have the lists running
1 2
3 4
5 6

…not very helpful for someone trying to read it in order.

To over come this we can take advantage of the CSS3 property column-count to achieve that for us.

CSS3 column-count lists

All we need to specify is how many columns we want, and the gutter space between the columns and the content will adjust itself whether there are 10 items or 1000.


.columns {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}


Important note about css3 column lists

If you apply this class directly against the <ol> tag you lose the numbering on the list items. I’m sure there’s a good explanation for this, but I’m not sure what it is just yet.

To get the effect you need to apply the class to a containing div on the <ol> and it splits them up perfectly.

I’ve written this up in jsbin so you can play around with it yourself.

Of course you can get iPads with 3G however they are not as popular (due to pricing) as their wi-fi companions.

This is an obvious advantage that a lot of people would see over having the native application rather than a web application, but an advantage that doesn’t really exist.

Mobile web applications that run on browsers that support HTML5 (and lets face it, if you’re browsing on a mobile device the chances are the browser will be supporting HTML5) can take advantage of the Cache Manifest file and therefore allowing your application to run even when a connection isn’t available.

This handy file acts as a camping pack list for your web application, and while this post won’t go into the details of the contents of the Cache Manifest file, you can do a bit more reading about the HTML5 Cache Manifest if you’re just getting started.

One issue around the cache manifest is that it’s very difficult to debug to see if it’s working the way you want it to. That is where this handy bit of javascript comes in handy.

Simple copy and past this into your web application just before the closing </body> tag. Then you can open your web application in your favourite desktop browser and check the console and see a log of what is happening. Chrome & Safari (right click, Inspect element, Console), Firefox the same again but you need firebug.

<script type="text/javascript">
var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';

var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);

function logEvent(e) {
var online, status, type, message;
online = (navigator.onLine) ? 'yes' : 'no';
status = cacheStatusValues[cache.status];
type = e.type;
message = 'online: ' + online;
message+= ', event: ' + type;
message+= ', status: ' + status;
if (type == 'error' && navigator.onLine) {
message+= ' (prolly a syntax error in manifest)';
}
console.log(message);
}

window.applicationCache.addEventListener(
'updateready',
function(){
window.applicationCache.swapCache();
console.log('swap cache has been called');
},
false
);

setInterval(function(){cache.update()}, 10000);
</script>

Big thanks to Jonathan Stark for the code.

The application was a simple one. It is basically an online ordering system specifically designed for that iPad to allow a particular sales force to visit their clients and show them through their product range.

Usually I would be recommending that the website should be made responsive to allow anyone using an iPad to have this kind of experience, however for many many reasons that lie well away from the technology capabilities the client wanted to keep these two resources separate.

There are a few things that go a long way towards making your web page looking more like a web application, but these are probably the easiest and quickest wins (if you follow the syntax of course)

All of these updates need to be made in the <head> </head> section of your html.

iPad Web App Icon

When you click “Add to home screen” from Safari the iPad will drop a miniature screen shot of your web app by default. You can impress all your friends by including the following line which allows you to specify the image that will appear….

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

You don’t need to add the rounded corners or the shine, that’s automatically done by the iPad.

Safari Full screen on iPad

With the release of IOS5 Apple have introduced tab browsing into Safari on the iPad. While this is great when you’ve got lots of windows it detracts from your new web app and provides some distractions for the user.

Add the following code to make the iPad web application go full screen.

<meta name="apple-mobile-web-app-capable" content="yes" >

You should note that even with this added you will need to open your app using the Home Screen icon that we included just before. It’s also worth noting that any links to other pages within your app will open safari in full screen, so you will need to house the whole app on the same page and pull through other content through Ajax…. but that’s for another post.

iPad Status bar appearance

Now that you’ve gone full screen with your iPad web app you can decide the color of the Apple status bar.

<meta name="apple-mobile-web-app-status-bar-style" content="black">

There isn’t a lot you can do here as there are only 3 choices.

1. default
2. black
3. black-translucent

iPad web app startup image

Finally we get to the startup image. This little sucker caused me no end of trouble even though the answer is relatively simple.

The start up image is a great way to show the user that your application is loading, and distracts them incase that is taking a while. It’s something that is required in all native apple applications, so any web app looks lost without it.


<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="spash-1004.png" />

<!-- iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="spash-1024.png" />

Now to save yourself a LOT of trouble please take note…

• Portrait: 768x1004
• Landscape: 1024x748

This took me a while because both my images were the full dimension (1024x 768).

Again….. Portrait is 1004px and Landscape is 748px

Thanks to this article from Miniapps for finally getting me on the right track there.

What else

I’m glad you asked.

There is are a lot of other things you can do with the web application. I’ve already mentioned ensuring that the iPad web app works entirely within the home page, so you need to ajax the other content as the user moves through the app.

You can include a cache-manifest file to ensure that the application is available offline as well.

iScroll is a great javascript plugin that provides quasi native scrolling functions within the application. As of IOS5 you can use the following code in your css..


position:fixed; // header and footer fixed position
overflow: scroll; // scrolling navigation from off the page
-webkit-overflow-scrolling: touch; // Native iPad scrolling with CSS instead of iScroll


I’ve gone back to iScroll because there is a bug with the webkit overflow scrolling with the content disappearing until the scroll momentum has stopped. If you set it to “auto” instead of “touch” it works, but you’re left with a very rigid scroll experience (and it’s just a bit pants).

If you would like to look into anything else you can do on the iPad with web applications (or iPhones, Androids, Galaxy Tablets or any other mobile device) please feel free to get it touch and ask.

The second thing I’m going to do is send them out on Sunday evening so they are waiting in your inbox on Monday morning. This means that while you’re recovering from the weekend sucking in as much caffeine as you legally can consume you can also click through the links and tell your boss that you’re also learning something.

Win Win.

Big Picture

• Geo Targeted Content – Kiss Metrics runs through some great ideas on how to increase your website conversions through the use of your users location.

HTML5 + CSS3 + Javascript

• Zoom/Scroll Navigation – Ever had to curl or wget a site for an import?  You might have come across an issue where some of the content was relying on JS to render it properly.

Javascript

• Captionator is a JS tool that allows you to add captions to HTML5 video and allow it to be more accessible.  I’m in the process of “captionatiing” the Tiffiny Diamonds video collection which means even those that can’t hear the video can now read just how much money they will need to part with.

CSS3

• Animate CSS is a framework of some cool CSS3 animations.  Fades, bounces, rotations…. it’s got most of what you might want (cause you never really need it)
• 3D Image transformation is one of the cool bits I learned while at the Web Directions South.  This is an awesome tutorial that goes into more detail than you would normally expect (and not have to pay for).

HTML5

• Get Manifested – Simply copy and paste the URL of the site you want to create a Cache Manifest file for and this tool will build it for you on the fly using requests on that page.  Great way to get you started.
• Facebook Developers are doing more good things for the web community with some Build/Test/Distribution tools to help you along.

Responsive Design

• Get Skeleton - Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.
• Demystifying Responsive Design is a great article from Elated that takes you through the process and also explains where adaptive design stops and responsive design starts.

Design

• Designing for Communities – Join Mark Boulton as he takes a classroom lecture at CERN.

Presentation Resources

• Social Canvas – A pretty cool talk, but more importantly is the awesome way to display the presentation.
• Coder Deck – If you like giving presentations from the browser and like to run live code examples then this framework is for you.

Mobile

• iOS Boiler Plate – Based on the HTML5 boiler plate this allows you to get up and running with any iOS project easily (but probably with some bloated un-needed code too)

If you like these updates then be sure to check out these as well

• http://rawkes.com/blog/2011/10/17/rawkes-weekly-17th-october-2011
• Web Designer Weekly

From the Apple website…..

Apple has lost a visionary and creative genius, and the world has lost an amazing human being. Those of us who have been fortunate enough to know and work with Steve have lost a dear friend and an inspiring mentor. Steve leaves behind a company that only he could have built, and his spirit will forever be the foundation of Apple.

YSlow

YSlow was the first of the products released by Yahoo as a plugin for Firefox. It was developed by Steve Souders, author of the High Performance Websites: Essential Knowledge for Front-End Engineers and Even Faster Web Sites: Performance Best Practices for Web Developers.

From the Yahoo site….

“Yahoo!’s Exceptional Performance team has identified 34 rules that affect web page performance. YSlow’s web page analysis is based on the 22 of these 34 rules that are testable. These testable rules are listed below roughly in order of importance and effectiveness. Studies have shown that web page response time can be improved by 25% to 50% by following these rules.”

1. Minimize HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires or a Cache-Control Header
4. Gzip Components
5. Put StyleSheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript and CSS
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make AJAX Cacheable
15. Use GET for AJAX Requests
16. Reduce the Number of DOM Elements
17. No 404s
18. Reduce Cookie Size
19. Use Cookie-Free Domains for Components
20. Avoid Filters
21. Do Not Scale Images in HTML
22. Make favicon.ico Small and Cacheable

Page Speed

Steve then went across to Google and developed Page Speed for Firefox, and then the Page Speed Chrome Extension.

From Google PageSpeed….

Page Speed is a browser extension for Google Chrome and Firefox. It runs a number of diagnostic tests against a web page, and analyzes the page’s performance on a number of “rules” that are known to speed up page load time. The rules are based on general principles of web page performance, including resource caching, data upload and download size, and client-server round-trip times. They examine factors such as web server configuration, JavaScript and CSS code, image file properties, and so on. For each rule, Page Speed gives a general score, using a simple red-yellow-green grading scheme, and suggests specific techniques for correctly implementing each rule. It also provides some automatic optimization of external resources included on a page, such as minifying JavaScript code and compressing images.

mod_pagespeed

Steve wasn’t quite finished with those two books with their awesome recommendations, nor was he finsihed with the two plugins that gave you the tools to see how the site was performing and instructions on how to fix them.

He decided that he would take the development out of the web developers hands and make the server do all the hard work for you. mod_pagespeed takes an ordinary HTML page and does a lot the performance enhancements for you.

Personally I disagree with this approach as it’s automating something that you should be doing already. Automation is a guessing game, not an exact science, and this kind of performance will make you lazy. You can always do things better yourself by tweaking each element to the best of your ability, rather than relying on code to do it for you. It will also put an additional load on your server!

Which do I use?

When it comes to these two tools you might ask which one is better or which one should I use? The answer is both of them. While they have been developed by the same person they work in slightly different ways and focus on slightly different areas of performance. It’s important that you run both to get a wholistic picture of the performance of your site.

Remember! – performance matters. It is the first impression that everyone gets when they visit your site even before the first pixel is loaded

We’ve done a lot of performance enhancements on sites and you see a marked improvement in search results and customer coversions. If you need a hand coming to grips with it, get in touch and we can help.