Since the Facebook IPO is all over the news we thought we’d examine the facet of the story that interests us the most – the mobile story and what was revealed in their S-1 filing.

Background and Context

A few months ago we looked at a snapshot of Facebook’s sharing data on mobile and found that 57% of all sharing was through the mobile web, with all apps on all platforms combined – iPhone, Android and Blackberry – contributing 40%.

(Click for full size image.)

Combine that data snapshot with ongoing rumors of a full HTML-5 version of Facebook, fit for the mobile web and codenamed Project Spartan, and we can start to see the macro trend of Facebook’s business and users is to embrace the mobile web as essential.

Mobile Summary of S-1 Filing

In Facebook’s S-1 Filing, we saw more details on mobile usage, growth and revenues that caught our eyes.

(The S-1 is form companies use to describe their business when they go public. Here’s more background on S-1 filings.)

And a few of the mobile details that stood out in the coverage:

  • Facebook reports 845 million Monthly Active Users (MAUs)
  • 57% of monthly active users visit Facebook every day and are classified as Daily Active Users (DAUs)
  • 425 million of those monthly active users (~50%) used Facebook mobile products in December, 2011
  • Facebook does not serve advertising on its mobile experience so increased mobile usage actually hurts their revenues
  • Facebook are nervous about mobile because “user growth and engagement on mobile devices depend upon effective operation with mobile operating systems, networks, and standards that we do not control”

As covered by ReadWriteWeb in Facebook’s Biggest Risks Explained, quoting Antone Johnson in point form:

“No revenue currently generated from mobile advertising; unclear how much mobile use could be monetized; failure to solve this puzzle combined with a dramatic shift toward mobile usage could be a serious problem for FB; and per the next risk factor, they don’t control the iOS and Android platforms.”

So mobile presents a paradox for Facebook: huge growth, no current revenues.

Mobile is how their users are increasingly choosing to access Facebook but they haven’t figured out how to insert their key revenue driver – advertising – into the experience.

Mobile: Engine of International Growth

Reading the Facebook S-1 and knowing a lot about international mobile traffic, we can see that a heavyweight driver of Facebook growth around the world is the mobile web.

From the Facebook S-1:

There are more than two billion global Internet users, according to an industry source, and we aim to connect all of them. We have achieved varying levels of penetration within the population of Internet users in different countries. For example, in countries such as Chile, Turkey, and Venezuela we estimate that we have penetration rates of greater than 80% of Internet users; in countries such as the United Kingdom and the United States we estimate that we have penetration rates of approximately 60%; Increased mobile usage was a key contributor to this growth. DAUs as a percentage of MAUs increased from 54% in December 2010 to 57% in December 2011.

And as move towards 2014, the year when mobile becomes the #1 way to access the web, mobile will increase its importance as the engine for international growth of online businesses.

Reading into the numbers, it’s apparent that Facebook see the popularity of the mobile web today and also a dominant future for the mobile web around the globe.

So it will be interesting to watch their evolution as a public company, as they are required to share more information publicly.

If early indications are accurate, mobile apps will be part to their mobile strategy and the mobile web will be essential.

One of the discussions we often get invited to contribute to with clients is a discussion on their mobile strategy.

What’s the right thing for them to do: mobile apps or mobile web?

Each client has their own situation, customer needs, goals and context. A blog post won’t do justice to answering the full question.

But this blog post seeks to provide some data on how people use the largest website in the world with their mobile devices.

Using data gathered by Dan Zarrella in his strong post New Data: 33% of Facebook Posting is Mobile, we broke down the 33% of mobile traffic posting to Facebook a little further to see how they were accessing Facebook.

(Click for full size image.)

According to the 70,000 samples Dan gathered, mobile web contributes 57% of the mobile posts to Facebook. All apps combined contribute 43%.

So when we hear rumors of Facebook’s Project Spartan now we can start to see the reasoning behind the investment and direction towards a full HTML 5 version of Facebook.

Reading into the numbers, I think we can guess that Facebook see mobile web’s popularity today and they also see a dominant future for the mobile web.

So while apps are part to their mobile strategy, the mobile web is essential.

(Thanks to Darren Barefoot for the coffee and conversation that spurred this post.)

Everybody likes their Internet fast. Content delivery services (Akamai, Limelight and others) speed up the Web significantly, distributing your media across a global network of caching servers. It’s very likely that the end user is closer to an Akamai mirror than to the origin server, so the experience is improved significantly.

Enter the age of mobile web. At Mobify, we believe that every link on the Web should present an amazing mobile experience. One way to do this is by making content management systems mobile-aware. When the CMS detects a mobile user, it launches an alternate rendering path and generates new HTML server-side. This new mobile web page is then presented to the user – for a great example check out WPTouch, the most popular mobile plugin for WordPress.

The problem is, most content delivery networks don’t bother telling the origin server about mobile users, serving whatever is cached for the URL. And why should they? The whole point of CDN cache is reducing the time it takes to access web content. Plus, when not done properly server-side mobile rendering can actually be worse than the desktop website, as this comic illustrates.

So, what to do? Akamai allows limited code execution right on its edge nodes with EdgeComputing, but this is counterproductive for today’s agile web companies. Mobify’s Studio service relies on JavaScript to detect mobile users, redirecting them to the “m-dot” version of the same URL which is cached separately (see it in action by going to wired.com or newyorker.com on mobile; both use Akamai). In the future we’re going to see even more mobile rendering shifted into the browser, powered by JavaScript and HTML5. This brings the best of both worlds – responsive client-side apps that can be stored on a CDN for optimal performance (we use Amazon Cloudfront).

In my next post, I’ll try to guess why Matt Mullenweg doesn’t use WPTouch on his beautiful personal blog and share some of the things we learned about Drupal 8 from Dries’ DrupalCon keynote. Stay tuned!

A few days ago, Google launched Instant Previews on Mobile – a neat new feature for improving search experience for mobile users. Clicking on the preview icon pulls up a set of screenshots representing the content of SERP links, helping users find relevant pages faster.

This is a great example of using client-side technology in order to improve the mobile web experience. Our first impressions are below.

Continue reading »

The previous post in the series described the design of Mobify Studio, and how it fit the mobile market in 2008. This post will examine changes to those assumptions caused by a changing mobile market and reveal the improvements made possible by proliferation of new devices.

In past three years, devices with high-quality browsers captured most of the market. iPhone, Android, and Blackberry 6 browsers are now competitive with desktop ones in correctness of Javascript and CSS implementations. Meanwhile, increased use of mobile social networking, as well as bookmark sharing and synchronization, made use of m.yoursite.com a problem. Today, a URL can pass through multiple services used by both mobile and desktop users.  Making sure that user ends up on correct URL for their platform is becoming more and more difficult. In addition, having a separate mobile domain introduces SEO concerns, requires additional SSL certificates and DNS configuration, and gets even more complicated when more device types are added  (tablet, TV).

These changes made us revisit the original assumptions. Our toolkit is now expanded to include complex JavaScript processing, and use of m.yoursite.com can hinder deployment, URL sharing, and use of SSL encryption. So, we started thinking about serving a single copy of website to both desktop and mobile users, and using JavaScript to transform it into mobile form. This approach can remove a whole lot of issues, in exchange for a single big one: how can we make this work correctly and quickly?

The most obvious way to transform a website on the client-side is by using override stylesheets for CSS (possibly delivered through media queries), and JavaScript content rewriting for HTML. The difficulty with this method is that all resources (images, scripts, stylesheets, frames) start loading as they are parsed, and browsers give us no reliable tools for preventing or canceling HTTP requests. So, if one was to modify the page after its markup finishes parsing, the resulting mobile page will load all the desktop resources, all the mobile-specific ones, and spend CPU time on extra processing. Since mobile browsers load few resources at a time and suffer from higher network latencies (especially on 3G), this is a recipe for unacceptably low performance.

To maintain reasonable performance, our client-side solution would need to exercise control over which resources are loaded before rest of the browser can see the resource and start an HTTP request. This requires overriding default browser behavior of fetching every resource as soon as its HTML tag is parsed in the document. We have figured out a way to accomplish this in the new Mobify product.

The webpage includes Mobify script snippets that lie dormant most of the time, but initialize and capture page content as text if they detect a mobile browser. As a result, the captured content is not processed by the browser, preventing it from issuing HTTP requests or executing unwanted Javascript. Now, transformation code can build the mobile page out of fragments of desktop one, and load just the pieces that are needed. Finally, the newly constructed markup is injected into page itself and has the desired external resources re-enabled, resulting in the complete mobile page.

As a result, mobile and desktop pages can live at same URL despite using drastically different markup and resources. We already do have some websites using this technology, such as http://alibris.com, http://kiwicollection.com, and http://threadless.com. In future posts in this series, we will describe the lower-level technology used to perform content escaping and transformation, and provide details on tools that the mobile page author can use to control inclusion of HTML and external content.