Official developer’s documentation

Googling for Facebook documentation will often bring you to outdated, incorrect information. Even the official looking wiki.developers.facebook.com contains information that is downright wrong, so stick with developers.facebook.com/docs. Here you can find documentation about everything Facebook: authentication, JavaScript SDK, Graph API, Open Graph protocol, social plugins, FQL, PHP SDK, XFBML and more.

Working examples of Javascript SDK methods and XFBML tags

The best way to learn how these things work is to see some working examples.

Console for testing Graph API queries

If you’re having trouble making Graph API queries from the JavaScript SDK, PHP SDK or some other method, this is a great tool that can help you determine whether the problem is in the query or your other code. It also contains an (almost) exhaustive list of the objects and properties available through the Graph API, but still needs to be updated to include checkins. You can browse through the list and see what information is available to you and the format that it is returned in.

If you see an error message saying "You must use https:// when passing an access token," then change the URL in the input text field from http to https. That’s a bug Apigee needs to fix in its console.

Console for testing FQL queries

FQL queries tend to be more complex than Open Graph queries, so it can be even more valuable to test them out in a console before trying to call them programatically.

URL Linter

If you want your web pages to be shared through Facebook, you will either add Open Graph protocol meta tags or basic meta tags to your pages. No matter which technique you use, the URL Linter can easily show you how Facebook will interpret this metadata when users share your pages.

Developers’ Forum

Draw from the knowledge and experience of over one hundred thousand Facebook developers. Just go easy on the Facebook reps – you can’t expect them to respond to every message or fix every bug. Unfortunately a lot of people tend to be quite disrespectful in the forums.

Bugzilla

The constant innovation of the Facebook platform comes with a price: there is a never-ending backlog of bugs. If you’re banging your head up against the wall because your app isn’t working, more often than not it will be a problem with Facebook’s code rather than yours. Search Bugzilla to find out if other developers are experiencing the same issues as you – and see if or when Facebook plan to fix it.

ThinkDiff.net tutorials

The blog of Md. Mahmud Ahsan contains some really useful tutorials for Facebook development – from getting started with the JavaScript SDK through to advanced topics like using the new iPhone SDK.

Facebook GUI PSD kit

A free set of vector images of Facebook GUI elements like the multi-friend selector and authentication dialogue. Really useful for wireframing and design. Thanks to SurgeWorks for providing this resource.

An extra effort and more code: two major drawbacks that often discourage developers from writing unit tests. They seem hard to write and little to contribute or at least that is what I first experienced when I started using them. And although I still don’t consider myself to be an expert in the field of test-driven development, I have not given up and can say: unit tests are a real time saver. Rather than walking through a long list of benefits, let’s write some code and see for ourselves..

Before you can write a unit test you obviously need to have a chunk of code or some business logic that requires testing. The following example shows you how to add a unit test after writing your initial code and how you can alter the unit test before writing any additional code (e.g. in a second iteration).

Important to note: although the example is created in C# with the Visual Studio unit-testing framework, the principles can be applied to any given library in your preferred programming language.

The full source code of the example can be downloaded here.

Example: Testing the shopping basket of a web shop
Let’s say you are working on a web shop and you are asked to implement some logic that calculates the total price of a shopping basket. You’ve created the shopping basket and price calculation logic in the business tier:

public class WebshopFacade
{
public void AddProductToBasket(ShoppingBasket basket,
Product product)
{
basket.Add(product);
UpdateBasketPrice(basket);
}

public void UpdateBasketPrice(ShoppingBasket basket)
{
double totalPrice = 0;
foreach (ShoppingBasketItem item in basket.GetItems())
{
totalPrice += item.Product.UnitPrice * item.Amount;
}
basket.TotalPrice = totalPrice;
}
}

The code is pretty straightforward: the web shop can create a basket but to add an item it needs to call the façade which will than update the basket’s total price. Now, before creating a web page (and I know you want to) it’s a good practice to set up a unit test. Why? If there are any coding errors in the shopping basket or its price calculation, you want to expose these bugs right now, and not by experiencing strange issues when creating the web page which will eventually have you debug the web application. The unit test may already save you from losing precious time, and surely you want to hold on to it for future testing when the price calculation logic becomes more complicated.

Test method 1: Initial price of the basket
Ok, let’s start out with a basic yet crucial test: you want to make sure that when the web shop creates a basket, the initial total price is zero. You may laugh, but your customers won’t if this is not the case!

[TestClass]
public class ShoppingBasketTest
{
public ShoppingBasketTest()
{
}

[TestMethod]
public void TotalPriceOfEmptyBasketMustBeZero()
{
ShoppingBasket basket = new ShoppingBasket();
Assert.AreEqual(0, basket.TotalPrice, "Expected total price to be zero for empty basket");
}
}

That wasn’t so hard, was it? Running all tests in Visual Studio takes only a few seconds and for me it resulted in a test run completed, results: 1/1 passed. Sweet, an instant confidence boost!

Test method 2: Adding products to the basket
Let’s move on and add a test method that ensures products can be added to the basket:

[TestMethod]
public void ProductsCanBeAddedToTheBasket()
{
ShoppingBasket basket = new ShoppingBasket();
WebshopFacade facade = new WebshopFacade();
MockFactory mocks = new MockFactory();

for (int i = 0; i < 50; i++)
{
facade.AddProductToBasket(basket, mocks.CreateProduct());
}

int totalUnits = 0;
foreach (ShoppingBasketItem item in basket.GetItems())
{
totalUnits += item.Amount;
}

Assert.AreEqual(50, totalUnits, "Expected 50 units in the basket after adding 50 random products");
}

In this test 50 random products are added to the basket, and then the test does a recount by looping through the basket’s items. As the test method cannot create products directly (nor can the web shop for that matter) a mock factory is used to create mock objects, in this case products.

And believe it or not, when I first ran the test it failed because of a bug in the basket. In Visual Studio you can add a breakpoint inside any test method and instantly debug the test method, so I was able to resolve the issue in no time!

Test method 3: Price calculation
Finally, you can add a test method which ensures the total price is calculated correctly:

[TestMethod]
public void BasketTotalPriceIsCalculatedCorrectly()
{
ShoppingBasket basket = new ShoppingBasket();
WebshopFacade facade = new WebshopFacade();
MockFactory mocks = new MockFactory();

double expectedTotal = 0;
for (int i = 0; i < 50; i++)
{
var product = mocks.CreateProduct();
facade.AddProductToBasket(basket, mocks.CreateProduct());
expectedTotal += product.UnitPrice;
}

Assert.AreEqual(Math.Round(expectedTotal, 2),  Math.Round(basket.TotalPrice, 2), "Expected total price does not match basket's total price");
}

The code is mostly copied and pasted from the previous method, but here the price calculation is somewhat mimicked. It may seem obvious that this test will pass, but when you make further progress in developing the basket, this test method can fail, and it will expose any bugs that were introduced by your (or someone else’s) changes.

Another way of testing this logic would be to create some specific products, and to hard code the expected total price. This could include special situations that don’t frequently occur but are part of the business logic, e.g. discounts for certain products, discounts for a specific amount of products, etc.

Creating a unit test before writing any code
The unit test now covers the basic functionality of the basket and you might decide to start a second iteration in which you introduce removal of products or discount logic. In either case you can initiate this iteration by creating new unit tests or updating the existing one allowing you to focus on the requirements before writing any code.

You can start by changing the “interface” of the façade, by adding a method for product removal:

public void RemoveFromBasket(ShoppingBasket basket,
Product product)
{
throw new NotImplementedException();
}

And now you can add new test methods that validate the product removal logic:

[TestMethod]
public void ProductsCanBeRemovedFromTheBasket()
{
ShoppingBasket basket = new ShoppingBasket();
WebshopFacade facade = new WebshopFacade();
MockFactory mocks = new MockFactory();

var addedProducts = new List
();
for (int i = 0; i < 50; i++)
{
var product = mocks.CreateProduct();
facade.AddProductToBasket(basket, product);
addedProducts.Add(product);
}

for (int i = 0; i < 25; i++)
{
var remove = addedProducts[i];
facade.RemoveFromBasket(basket, remove);
addedProducts.Remove(remove);
}

int totalUnits = 0;
foreach (ShoppingBasketItem item in basket.GetItems())
{
totalUnits += item.Amount;
}

Assert.AreEqual(25, totalUnits, "Expected the basket to have 25 remaining units after removal");
}

[TestMethod]
[ExpectedException(typeof(ShoppingBasketException), "Expected shopping basket exception to be thrown")]
public void ProductMustExistInBasketOnRemoval()
{
ShoppingBasket basket = new ShoppingBasket();
WebshopFacade facade = new WebshopFacade();
MockFactory mocks = new MockFactory();

facade.RemoveFromBasket(basket, mocks.CreateProduct());
}

Obviously the unit test will fail if you run it before you have written the actual implementation, but for sure you will gain a great deal of insight in how to set up any interfaces, how objects should behave or interact, how exceptions are thrown, etc.

Try it out yourself!
A demo, including the example’s full source code can be downloaded here. You can run the tests in Visual Studio by pressing CTRL-R A or through the menu as shown in the screenshot below. If you are new to unit testing and can use a little practice, I strongly recommend that you try and write the code for product removal, and see if you can make the failing unit test pass again.

Final considerations
• Any unit tests that you create are there to stay and the more complex a module becomes the more often you will find that bugs are exposed when the module is changed or re-factored, simply by rerunning the tests
• By creating advanced unit tests you are to mimic and validate every possible in- and output of a certain module, allowing you to immediately recognize and debug the most specific / exotic situations when a test fails
• Unit tests may seem like a lot of code to write, but most of the time you are just writing the consuming code that has to be implemented anyway
• Unit tests offer great insight in how a module behaves or is to be used. Developers that are not familiar with the code can walk through the tests as it were code documentation

Hope this helps!

What is the problem?

Recently many Facebook developers have been frustrated by popup blockers preventing the Stream Publish dialogue box from being displayed. If a user hasn’t logged in and authorised the application, dialogue boxes are shown in a popup window instead of an iframe. That’s fine for some visitors, but for those who have a popup blocker enabled, it means that they won’t see the dialogue box and therefore can’t publish a post into the stream.

The Stream Publish dialogue being displayed in an iframe.

The Stream Publish dialogue being displayed in a popup window. Popup blockers will prevent this from opening.

What causes it?

Previously popup blockers didn’t cause any problems for the Stream Publish method because all dialogue boxes were displayed with an iframe rather than a popup window. But in mid-May Facebook discovered that this exposed users to a clickjacking security vulnerability. To address the security problem, dialogue boxes are now shown in a popup window instead of an iframe for users who are not logged in or haven’t authorised the application making the request. According to Facebook, this change is here to stay.

Technically, popup blockers shouldn’t block popup windows that are opened intentionally by the user, for example by clicking on a link that says "Publish this to your profile". Unfortunately however, Facebook have implemented their Stream Publish method in such a way that the relationship between the user action and the popup window being opened is not direct enough. The onus is on Facebook to fix this, but in the meantime, there is a workaround.

The workaround

While not documented by Facebook, it is very easy to construct a URL for the Stream Publish dialogue box. To publish the news feed story, the user simply has to click a link pointing to this URL. Here’s one I prepared earlier. You can construct the URL with your programming language of choice, but I will demonstrate how it works with an ActionScript 3 example. (I have also provided a PHP example in the source download).

1. Defining the post parameters

First we define the parameters for the post, such as the title, link, caption and any media that we want to attach. The attachment and action_links objects follow exactly the same structure as the JSON objects used by the streamPublish method in the JavaScript SDK and the old REST API.

// An event handler which publishes a Facebook story when a button is clicked
private function clickPost(event : MouseEvent) : void {
    // Define the stream story parameters
    var attachment:Object = {
        'name' : "I've just played golf with Lexus at St Andrews.",
        'href' : 'http://apps.facebook.com/myapp',
        'caption' : "Win 2 x VIP tickets to the Open Golf Championships at St Andrews. Simply find the missing golf ball to win - it's quick and fun! Play now...",
        'media' : [ {'type' : 'image', 'src' : 'http://www.myapp.com/assets/share_image.jpg', 'href' : 'http://apps.facebook.com/myapp'}]
    };
    var action_links:Object = [
        {'text' : 'Find the Golf Ball', 'href' : 'http://apps.facebook.com/myapp'}
    ];
    var publishURL:URLRequest = StreamPublish.publishStoryLink('YOUR_API_KEY', attachment, action_links, TopGoals.APP_TAB_URL);
    // Open the URL and Facebook's dialogue box will be displayed
    navigateToURL(publishURL, "_blank");
}

2. Generating the URL

This static method takes the parameters we defined in the previous step and encodes them into a URL. It uses the JSON class from Mike Chambers’ as3corelib project.

package com.thesedays.facebook {
    import flash.net.URLRequest;
    import com.adobe.serialization.json.JSON;

    public class StreamPublish {
        
        /**
         * Generate a URL for displaying the Stream Publish dialogue.
         *
         * @param api_key The API key of your application - you must create an application to call this method.
         * @param attachment An object containing the post text, links, media, etc.
         * @param action_links An object containing actions links of text and hyperlinks.
         * @param next The URL to open after the user has published the post or cancelled it.
         * @param locale The locale code to display the Facebook interface with, for example en_US, fr_FR or nl_NL. It is generally best to leave this parameter as null because then Facebook will determine the language based on the user's browser and session.
         */
        public static function publishStoryLink(api_key:String, attachment:Object, action_links:Object, next:String, locale:String = null) : URLRequest {
            var url:String = 'http://www.facebook.com/connect/uiserver.php' +
            (locale ? '?locale=' + locale + '&' : '?') +
            'api_key=' + api_key +
            '&method=stream.publish' +
            '&channel=' + escape('http://www.facebook.com/xd_receiver_v0.4.php') +
            '&extern=1' +
            '&attachment=' + escape(JSON.encode(attachment)) +
            '&action_links=' + escape(JSON.encode(action_links)) +
            '&display=popup' +
            '&next=' + escape(next);
            return new URLRequest(url);
        }
    }
}

Download the source from this example.

Finding the right CMS is a challenge

Finding a CMS that suits your needs – not to mention fully embracing one – is not an easy task. It is hard to get your hands on a descent comparison and research is very time consuming as you really need to get your hands dirty. If you are somewhat wary and cautious about using a CMS, you are right, it is to be a tool that assists you in creating and maintaining websites, and it should never dictate the way you handle things as you probably already have a methodology or framework in place. And that is exactly what we have found in Umbraco: a reliable, user-friendly and extensible platform which drastically reduces development time and really fits into our projects.

Umbraco is easy, extensible and reduces development time

After completing several projects with Umbraco, we are very pleased with the results and would like to emphasize the following:

• Umbraco is easy to learn. Within days you are able to grasp its concept and developers will be writing custom XSLT for dynamic content such as a news pages, FAQ’s, ..
• As Umbraco is based on ASP.NET, most developers will be very familiar with the environment and configuration settings which eases development and deployment
• Umbraco has an active community: http://our.umbraco.org/
• A project can be implemented without writing a single line of .NET code. You may have to write some XSLT or install a package, but you will save a considerable amount of development time nonetheless
• Umbraco is extensible in many ways, from writing custom XSLT and .NET user controls to installing packages and integrating its API or event-driven model.

Most importantly, its extensibility allows us to choose which parts of an application we wish to implement using Umbraco while we are still able to implement the parts we don’t see fit in the exact same way we would implemented these in other situations.

Completed projects

Although we still have several projects in the pipeline, we would already like to share some of the projects that have been fully implemented using Umbraco:

• Ijsboerke – http://www.ijsboerke.be
• Wunderman Belgium – http://www.wunderman.be
• Mio – http://www.mio.be
• VAD – http://www.qado.be

Plans for the future

We plan to do much more with Umbraco, and the first thing we want to do now is tweak our development environment and make Umbraco integration even easier:

• Add an abstraction layer to our framework that will abstract the Umbraco API integration and provides a set of global helper classes for Umbraco
• Create a template solution for Visual Studio that contains a pre-configured Umbraco install and includes our framework projects
• Moving the template solution to Microsoft’s Web Platform Installer, allowing our developers to install the latest version of the template in no time. See also: http://bit.ly/aj2Uwm

As you can see, many of us have become strong believers and if you are considering using Umbraco as your CMS or you are a strong believer yourself we are always glad to hear from you.

The answer: WURFL. The Wireless Universal Resource File (WURFL) is an open source project which collects information about all of the different mobile devices in use. It is constantly being updated, so as long as you keep your WURFL definitions up-to-date you don’t have to worry about your detection scripts not recognising new devices. By querying a WURFL database with your visitor’s User Agent string, you can not only determine whether the device they are using is a mobile device, but whether it has a touch screen, can make phone calls, is a tablet (iPad) and more.

It is reasonably straightforward to install a Tera-WURFL service on your PHP enabled web server. If download speed is critical for your website, it would be best to install Tera-WURFL on the same web server. But if you would prefer to avoid the installation process, feel free to use our quick and easy These Days implementation of Tera-WURFL.

It can be as simple as this:

<?php
require_once ('TeraWurflRemoteClient.php');
$wurflObj = new TeraWurflRemoteClient(
    'http://wurfl.thesedays.com/webservice.php' );
$wurflObj->getCapabilitiesFromAgent(null, array('product_info'));
if ($wurflObj->getDeviceCapability("is_wireless_device")) {
    // Show mobile website
} else {
    // Show normal website
}
?>

Don’t forget to give your users a way of overriding automatic device detection. Even WURFL can get it wrong sometimes, and anyway some users prefer to view full sites on their mobile phones. The user is king!

At These Days, it’s pretty simple. I’ve installed a NetApp SAN (FAS 2050c) about 2 years ago. It’s a clustered box which contains all fileserver data (the normal network drives which almost every digital company has and where employees save all their documents and work-related files) and it also contains all data from our VMware virtual infrastructure environment. The latest is a 25-30 virtual server clustered farm, These Days is completely virtualized and thus heavily dependent on the NetApp SAN/Virtual Infrastructure.

So basically, if the NetApp box goes down, we’re in big trouble. No fileserver nor access to servers anymore (development, finance, planning, …) and 80 people who are unable to work. You don’t even want to know how much that would cost for an office. Imagine 80 people completely unable to work! Time is money right?

But the NetApp SAN doesn’t go down. It’s made and designed for that. You boot it up once and you never turn it off or reboot it. It doesn’t require patches or updates. OK, you’ve got the occasional firmware updates but they can be done online with a 40sec Disk I/O interrupt. So yeah, that’s not bad. It’s even clustered, 2 controllers in an active/active mode, so IF something went wrong and one of the controllers died, the other one would take over and keep everything running.

It’s a box which stays online, 24×7.

Unless… you get a power outage like we did last week. It happened between 4-5 AM. The UPS (emergency battery power) kicked in and gave me 40 minutes to restore power or shut everything down. But I didn’t wake up from those text alert messages at 5AM! So UPS time went down while I was sleeping and dreaming of hot chicks ICT Business Continuity. Eventually the whole server room was without power and everything went down.

When I woke up, I saw the text messages and said (more like screamed) something along the lines of “EEK!” and “F*CK”. Phone calls from the early birds in the office were already coming in saying there was no power and after the fastest bike ride ever to the office, I booted up everything and got the whole thing up and running again in 15mins.

Now the cool thing about this experience kicks in. The same day, in the afternoon, I noticed something was wrong with one of the NetApp controllers. LEDs weren’t on/flashing, no network activity, nothing, completely nothing. I checked the box and noticed a failover happened and one controller was handling all traffic and took over all tasks from the other controller.

I was shocked and happy at the same time. Shocked as in: one of the controllers didn’t boot up and happy as in: cool, we’ve been running on one controller for a whole day and no one noticed a thing! All iSCSI and CIFS connections stayed up with no problems.
After some testing, I declared the faulty controller dead and called support to bring me a new one. It probably died from a voltage spike when restoring power.

The next day, I received a brand new controller and replaced the dead one. Another cool thing about NetApp controllers: all OS and config data is stored on the compact flash. So placing the flash card from the old controller in the new one restores all configs on the new controller. The only thing that needs to be done manually is reassign the disks to the new system ID, which takes about… 3 seconds.

The point of this post is to show how important it is to have redundancy on your business critical systems. What if our NetApp box wasn’t clustered? These Days would have been down for an entire day and lost large amounts of money, it’s the nightmare of every IT Manager. Sometimes we need to invest in these complex solutions to guarantee business continuity and in a situation like this, it pays off. Big time.

ROI on the NetApp? Ha, yeah, we reached it and even went completely over it

1. Design with a fluid layout, min-width: 320px

There are two factors that make this a necessity. First, mobile device screens are so small that you really need to utilise all of the available space. Second, there are a lot of different screen resolutions out there. The only way to utilise all of the space available on different sized screens is with a fluid layout.

I have found websites with a minimum width of 320px will look good on most high-end mobile devices like the iPhone, Android and Nokia N97. Here are the screen resolutions of some of the most popular devices:

Technically, the retina display on the iPhone 4 has a screen resolution of 640 x 960 pixels but don’t worry, if you optimise your site for 320 x 480, the iPhone 4 will scale it up by a factor of two so it fits the whole screen. You will need to insert higher resolution images – but more on that in the next section!

2. Include high res images for the iPhone 4 retina display

The iPhone 4 display has four times the number of pixels as that of the original iPhone. To prevent mobile sites from looking tiny, it magnifies them by 200%. That works great on text and vector images like SVG. But its not so hot on bitmap images (or even the HTML5 canvas so it would seem). To avoid pixelation, you need to insert alternative high resolution images for the iPhone 4.

Designers should create their Photoshop documents with a width of 640 pixels. Developers should export the images at full res for iPhone 4 and 50% res for everything else.

Here’s how to use a CSS media query to insert a high resolution image for iPhone 4:

.myImage {
    height: 40px;
    width: 100px;
    -webkit-background-size: 100px 40px;
    background: url("images/myImage.jpg");
}

@media screen and (-webkit-device-pixel-ratio: 2) {
    .myImage {
        background: url("images/myImage@2x.jpg");
    }
}

The first line that might jump out at you as being a little unusual is probably -webkit-background-size: 100px 40px;. The -webkit-background-size CSS property takes two parameters: width and height. The parameters can be lengths, percentages or "auto", and can even be mixed, i.e. -webkit-background-size: 100% auto. This tells the browser to stretch the background image to a specific size.

The second interesting part is the media query @media screen and (-webkit-device-pixel-ratio: 2) {...}. This means that any styles contained within the curly braces only apply if the device has a pixel ratio of 2 (two physical pixels per measurement pixel). Inside the media query selector, we override the .myImage class, and replace the background image with the high resolution image myImage@2x.jpg.

The left half of this screenshot shows the pixelation that occurs on iPhone 4, and the right half shows how it looks when we insert with a high resolution image:

3. Turn off auto-scaling

Mobile devices will assume your website is optimised for desktop computers unless you tell them otherwise. Add a viewport meta tag to the head section of your HTML to set the width of your website to match the width of the display, render with a zoom level of 100% and prevent the user from zooming in/out.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Mobile phones will also adjust text size when the screen orientation changes unless you include a special CSS parameter:

body {
    -webkit-text-size-adjust: none;
}

4. Make clickable elements big enough for a fingertip, ≈44px²

Your mobile visitors don’t have the accuracy of a mouse – they are often using their fingertips on a touch screen. Don’t make them put their fingers through a pencil sharpener just to click your button! Apple has said that the average finger tap on an iPhone is 44px by 44px (in your high res Photoshop doc that will be 88px by 88px), so aim to make clickable areas at least that size. This doesn’t mean you have to design gigantic looking buttons. Just add some padding to your small buttons to enlarge the clickable area.

5. Don’t use hover states

Today’s touch screens can’t detect when a finger is getting close to touching, so the concept of rollovers does not apply. On the iPhone your :hover style will actually display on click and then remain on screen even after the user takes their finger away, which can be really annoying. So the rule is – don’t use :hover in your CSS or mouseover in your JavaScript.

6. Create icons for your site

Hopefully users will really love your site and add it to their home screen for easy access. Don’t ruin the mood with an ugly default icon! Add these meta tags to the head section of your HTML to define icons.

<!-- 57 x 57 Android and iPhone 3 icon -->
<link rel="apple-touch-icon" media="screen and (resolution: 163dpi)" href="icon57x57.png" />
<!-- 114 x 114 iPhone 4 icon -->
<link rel="apple-touch-icon" media="screen and (resolution: 326dpi)" href="icon57.png" />
<!-- 57 x 57 Nokia icon -->
<link rel="shortcut icon" href="icon57x57.png" />


Note: The iPhone will automatically add rounded corners and a glossy effect to your icon. If you want to turn this off, change the rel attribute to apple-touch-icon-precomposed. Thanks to Jesse Dodds for discovering how to specify a seperate high res icon for the iPhone 4 retina display.

7. Reduce load time by using CSS3 instead of images for gradients, rounded corners, shadows, etc.

Depending on the devices you are targeting, CSS3 can be an excellent option for mobile design. With old school web design techniques, a button with a gradient and rounded corners might consist of 9 separate image slices, a bunch of nasty non-semantic markup and a hefty amount of CSS. With CSS3, you can create this:

With this:

.redButton {
    color: #B91440;
    font-size: 19px;
    line-height: 25px;
    padding: 10px 30px;
    border: 1px solid #FFFFFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#FFFFFF));
    -webkit-box-shadow: 0 0 2px #E4E3E3;
    -webkit-border-radius: 5px;
}

Go here for everything you need to know about CSS3.

But be careful! While the iPhone, Android and Nokia all have good CSS3 support, the Windows Mobile 6.5 browser is built on a version of IE6 (sigh…). Define, define, define your target devices before you begin design and development.

8. Use an HTML5 doctype

Not all browsers implement HTML5 features, but they will still accept an HTML5 doctype.

<!DOCTYPE html>

Using this doctype declaration will allow you to display HTML4 elements to all browsers, and then add in additional functionality for the browsers that support HTML5.

9. Make your site operate offline

Your visitors won’t always have a fast Internet connection. If you’re designing the type of site that will have return visitors, consider leveraging the client-side storage capabilities of HTML5. It can be as simple as creating a cache manifest file that tells the browser what files it needs to cache for offline access. A more advanced option is to create an SQLite database on the client with JavaScript.

10. Include an option for your mobile visitors to view the normal website

Detection scripts can get it wrong, or a user might simply prefer not to use the mobile optimised interface. So my final tip is, always offer users a way to switch back to ‘normal mode’.

So there’s a few mobile web tips I’ve picked up over the last few months. I’d love to hear yours too in the comments!

I have always wondered how much of a barrier the “Request for Permission” dialogue presents to uptake of Facebook applications. So two months ago I set up a simple one-page app to gather some statistics about user behavior.

My sample group consisted of 4000 unique visitors who spoke English, Dutch, Spanish or Portugese. Visitors came from 82 countries but the largest groups were from Portugal, Belgium, the Netherlands and Argentina.

The idea of the application was very simple. Users were asked to enter their birthday with one of two input methods, either (a) through a series of dropdown boxes or (b) with a button that gave the app access to the birthday on their Facebook profile. The app then calculated how many days, weeks and months the person had been alive for and allowed them to post the result to their Facebook profile.

This is what the input screen looked like:

And the resulting profile story:

So what were the results? For whatever reason, 96% of users chose method a – the dropdown boxes. That’s a pretty significant majority, but it doesn’t tell us why users chose this option. They probably had different reasons, but I think some would have been:

• “The dropdown boxes look quicker and/or easier”
• “I don’t want to give this application access to my personal information”
• “I don’t know what will happen if I click the Facebook button”

Personally, I can understand people not wanting to grant the application permission to access their information. Even the lowest level of authorization gives an app access to the user’s name, profile picture, list of friends and other “public” parts of their profile.

Much of the time when we develop Facebook apps we can’t avoid asking users for authorization. But we need to be aware of the barrier this creates. We should delay the authorization request in our application flow until the point where we really need it. And hopefully by that time the user will be able to see the value of authorizing our app.

In a previous post I’ve discussed a simple n-tier approach using a Facade and Dao pattern. The Facade provides a single access point for the business tier, and wraps a data access object that encapsulates the implementation of the persistence mechanism, separating the concerns.

I also mentioned that these objects introduce a large dependency (high coupling) as the Facade does not function without the Dao. I will now show you how this dependency can be overcome, by injecting the Dao into the Facade using the Spring.NET framework.

In the following example we will create a simple web management tool for a Zoo (inspired by amazedsaint). The tool needs to list all animals and caretakers, and allow the manager to rename animals or to assign one or more caretakers to an animal.

We start out by creating the business entities:

public class Caretaker

{

public string Name { get; set; }

public int Age { get; set; }

}

public abstract class Animal

{

public string Name { get; set; }

public IList<Caretaker> Caretakers { get; set; }

}

public class Lion : Animal { }

public class Elephant : Animal { }

We will also create a Facade which allows consumers to have a good understanding of the class library without having to worry about the exact implementation. Therefore, a good practice is to set up an interface:

public interface IZooManagement

{

IList<Animal> GetAllAnimals();

IList<Caretaker> GetAllCaretakers();

void RenameAnimal(Animal a, string newName);

void AssignCaretaker(Animal a, Caretaker c);

}

This should cover all requirements. The animals and caretakers will be stored in some kind of data store, so we’ll create a data access object (Dao) that will handle this for us. We haven’t decided on which type of data store or which ORM to use, so for now, let’s not worry about its implementation and create the interface:

public interface IZooDao

{

IList<Animal> GetAllAnimals();

IList<Caretaker> GetAllCaretakers();

void UpdateAnimal(Animal a);

}

Ok, now let’s implement the Facade. For the sake of simplicity, I will leave out any validation or error handling. Eventually, the minimal implementation will look much like this:

public class ZooManagement : IZooManagement

{

private IZooDao dao;

public virtual IZooDao Dao

{

set { dao = value; }

}

public IList<Caretaker> GetAllCaretakers()

{

return dao.GetAllCaretakers();

}

public IList<Animal> GetAllAnimals()

{

return dao.GetAllAnimals();

}

public void RenameAnimal(Animal a, string newName)

{

a.Name = newName;

dao.UpdateAnimal(a);

}

public void AssignCaretaker(Animal a, Caretaker c)

{

a.Caretakers.Add(c);

dao.UpdateAnimal(a);

}

}

The persistence mechanism has now completely been abstracted from the Facade. Also notice that the Facade does not instantiate a Dao: the property allows us to “inject” the Dao implementation and completely remove the dependency (this can also be done using a constructor parameter).

We now need to find a good way to inject the Dao into the Facade, and this is where the Spring.NET framework provides additional support, as one of its many features allows you to set up dependency injection through configuration.

Before we configure the dependency injection, let us create a “dummy” Dao, one that does not really access a data store, but holds a list of animals and caretakers internally:

public class DummyDao : IZooDao

{

private IList<Animal> animals;

private IList<Caretaker> caretakers;

public DummyDao()

{

animals = new List<Animal>();

animals.Add(new Lion() { Name = "Simba" });

caretakers = new List<Caretaker>();

caretakers.Add(new Caretaker() { Name = "Leo", Age = 25 });

}

public IList<Animal> GetAllAnimals()

{

return animals;

}

public IList<Caretaker> GetAllCaretakers()

{

return caretakers;

}

public void UpdateAnimal(Animal a)

{

throw new NotImplementedException();

}

}

If you want to use the Spring.NET framework, you will first need to add a reference to your web project. The latest version can be downloaded here. Next, you’ll need to configure Spring.NET in the Web.config:

<sectionGroup name="spring">

<section name="context" type="Spring.Context.Support.ContextHandler, Spring.Core"/>

<section name="objects" type="Spring.Context.Support.DefaultSectionHandler, Spring.Core"/>

<sectionGroup name="child">

<section name="objects" type="Spring.Context.Support.DefaultSectionHandler, Spring.Core"/>

</sectionGroup>

</sectionGroup>

<spring>

<context name="ParentContext">

<resource uri="config://spring/objects"/>

</context>

<objects xmlns="http://www.springframework.net">

<object id="ZooDao" name="ZooDao" type="TheseDays.Business.DAL.DummyDao, TheseDays.Business">

</object>

<object id="ZooManagement" name="ZooManagement" type="TheseDays.Business.ZooManagement, TheseDays.Business">

<property name="Dao">

<ref local="ZooDao"/>

</property>

</object>

</objects>

</spring>

The first part is standard and announces the Spring.NET configuration. The second part is where the magic happens: the spring/context section is necessary for Spring to create its application context, and the spring/objects section allows you to configure the resources.

The object configuration is pretty straightforward: we tell Spring.NET we want to create an object of type ZooManagement (our Facade) and to set its property with an object we also configured, an object of type DummyDao.

Once we have implemented an actual Dao (rather than a dummy one), in order to start using it all we need to do is reconfigure its type. For example, if we would create a RealDao that also implements the IZooDao interface, and we need to pass a connection string to the constructor, the configuration of the Dao would look like this:

<object id="Dao" name="Dao" type="TheseDays.Business.DAL.RealDao, TheseDays.Business">

<constructor-arg name="connectionString">

<value>Server=.;Initial Catalog=Zoo;User=ZooUsr;Password=ZooPwd;Application</value>

</constructor-arg>

</object>

In the web application we can then access the ZooManagement Facade through the Spring’s application context. Here’s a demonstration of a small helper class I often use:

public class ApplicationContextHolder

{

private static ApplicationContextHolder instance = new ApplicationContextHolder();

public static ApplicationContextHolder Instance

{

get { return instance; }

}

private IApplicationContext applicationContext;

private IZooManagement zoo;

private ApplicationContextHolder()

{

applicationContext = ConfigurationManager.GetSection("spring/context") as IApplicationContext;

zoo = applicationContext.GetObject("ZooManagement", typeof(ZooManagement)) as IZooManagement;

}

public IApplicationContext ApplicationContext

{

get { return applicationContext; }

}

public IZooManagement Zoo

{

get { return zoo; }

}

}

Now you can access the ZooManagement in the web pages with a single line of code:

IZooManagement zoo = (ZooManagement)ApplicationContextHolder.Instance.Zoo;

Surely a nice feature when you’re building your own framework!

You can download the full source code of the example here.

After reading the ‘goodbye http‘ blog post on thenextweb.com I first thought that it was a crappy idea to change the way of browsing for users… but @donotfold managed to change my mind…

Let me quote one of his emails:

“Everything that is illogical or irrelevant for the end-user should be popped out, it’s a logical next step in the evolution of the internet and web browsers.”

And after reading that I couldn’t agree more. So we started thinking .. how far can we actually take this? For example; I’m a huge fan of the windows7 explorer. Can’t we port this technique to web browsing? There’s bound to be a point where, by over-simplifying things, you will eventually begin to make it more difficult for the end user … the ultimate goal would be to find that tipping point. So let’s try out some ideas, shall we?

Our starting point; A regular website made by John Doe with a .com url.

Let’s get rid of the http:// as suggested by google.

And if we can delete the http:// part in URL’s, why not hide the extensions too? No one really cares about whether your site has been made in PHP or ASPX. And why not take this even further and add a breadcrumb system instead of the slashes, you’ll end up with something like this:

You often also have websites that are multilingual (especially in Belgium) so instead of using /nl/, /fr/, /en/ or ?lang=en we can display a flag icon of the current language.

Here’s where the windows7 explorer principle will come in. If we click on the language flag, we can quickly switch between languages, and when we click on the arrow before Home you can select another item in that level from the dropdown.

And now if we take the idea really far … Let’s add the possibility to query your page. Give a selection to show the latest 10 items (where applicable) or show latest 20 items, you can add the possibility to sort those items .. I think you can go quite far with this

Control

How would all of this be controlled? Should it be controlled? A possibility would be to use the sitemap.xml as a basis for the breadcrumb system. And then implement a second, language.xml file for the language dropdown. I, personally, would prefer to be in control instead of the browser generating it all for you.  That way, it’s still up to the webmasters if they want to use this function or not.

Conclusion

Would this be an improvement for me? No! For the common user? I believe so. But there’s a point where it will be to difficult, so how far can we really go? How will we handle id’s? Here too, we could choose to just handle this in the background, users don’t necessarily need to be faced with this. But then how do we allow users to share links? We could use a button and convert all links into short links… (http://goo.gl/123) … And I believe we should always have the possibility to switch back to the full path, like the Windows7 explorer does. Suffice it to say that there is a lot to think about and plenty of room for discussion.

Bear in mind that this is a concept … I don’t see any of these suggestions happening any time soon, especially not while browsers are at war with each other and standards aren’t yet where they need to be. Something huge like this should be a unified effort, not a nice-to-have feature in one browser trying to gain on the competitors. So google; nice job starting this! But invite your peers and explain to them the reasons why and the importance for the user.

Join the discussion

As for our little concept, … What do you think? Should everything stay as it is? Is there room for improvement? Let’s start the discussion here, who knows, maybe some good can come of it.