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.

Major reductions in data transfer, fewer server requests, and quicker updates are just some of many great advantages to saying no to the use of images in your mobile design. Going image free means having less assets to manage in a mobile specific style sheet, and more importantly, that your pages will adapt more easily to a larger range of different screen sizes thus improving CSS compatibility.

Using a CSS Gradient to Replace Static Width Image Buttons

In case you wish to add a gradient to a button to tie it into your design, an image or a CSS sprite might work well for desktop; however, with so many screen sizes and variations in CSS, supporting a statically sized image button with a CSS controlled rollover becomes a very complex solution which does not degrade very well as CSS support and screen sizes fall away.

The use of CSS3 gradients allows for complex styling, with a complex rollover, while letting the button degrade gracefully. It is also possible to use a variable width for a button using a percentage value based on the screen size without sacrificing quality and usability/readability as you would with an image button.

The following tool can be used to quickly create any gradient you want: http://gradients.glrzad.com

Using “border-radius” to Eliminate the Need for Complex Background Images

Similarly to the gradient effect, in this scenario, what was once too risky to do with CSS (due to browser compatibility issues) or too complicated to do without it, has become very simple to accomplish on modern smart phones, while degrading gracefully on older or non-WebKit devices.

Border radius replaces the need for multiple divs and background images to achieve rounded corners on an element. The Rube Goldeberg-esque combination of elements that made up older attempts at rounded corners have the potential to break a small section of a site on a modern phone, or in the worst case scenario destroy the look and usability of a site when it is rendered on an older phone.

Another advantage is that border radius allows you to adjust the roundness of corners on any element, not only div elements. That means you can safely apply custom styling to something like a button element and achieve a rounded look. This is something that would have previously taken a static image to achieve.

How To Do it:
http://www.css3.info/preview/rounded-border/

Something We Expect to See in the Future

Staying on the topic of making a mobile site look good without using images, something that we expect to see become more and more compatible in the future is the use of text-shadow: while this does work in the latest WebKit browsers, it does not have a lot of backward compatibility, so we suggest staying away from using it as a significant band-aid to help readability. Instead use it to enhance the experience for your users with compatible phones. We have begun using this on sites with great success.

Learn more:
http://www.css3.info/preview/text-shadow/

Example:
m.makeuseof.com

Important Closing Thoughts

While working on mobile, keeping things simple is paramount to a successful design. “Less is more” applies in all aspects, right down to CSS and the number of moving parts on the site. The fewer moving parts you have, the less possibility there is for an older browser to destroy the user’s entire experience!

In their new report, Nielsen has surveyed 4,200 people in the US who have downloaded an app on their smartphone in the last 30 days. Games were the most popular category with social networking, news, weather, and navigation trailing not far behind.

21% of American wireless subscribers have a smartphone at Q4 2009, up from 19% in the previous quarter and significantly higher than the 14% at the end of 2008

With smartphone use on the rise, we expect mobile browsing traffic numbers to grow as well. While native applications are experiencing high download rates, mobile web is picking up steam across many fronts, notably m-commerce.

Past 30 Day App Downloaders

Past 30 Day App Downloaders

Facebook App leads the popularity charts across all platforms except Android where it got overtaken by Google Maps.

Past 30 Day App Downloaders

Past 30 Day App Downloaders