How to optimize your web based software application for the mobile web

August 10, 2011

The mobile web is where the action is in 2011.  We have all seen the polls and the statistics: people are spending more and more time accessing the web through their mobile smartphones and mobile tablet computers. The mobile Web grew 110 percent in the U.S. last year and 148 percent worldwide as measured by growth in pageviews.

Including devices such as the Kindle, the iPhone and other smartphones, web-enabled tablets, GPS systems, video games and wireless home appliances, the growth of the mobile web has been exponential — and we’re still just at the beginning of this cycle. Morgan Stanley’s analysts believe that, based on the current rate of change and adoption, the mobile web will be bigger than desktop Internet use by 2015. The proliferation of better devices and the availability of better data coverage are two trends driving growth; having better services and smaller, cheaper devices has led to a huge explosion in mobile technology that far outpaces the growth of any other computing cycle.

Global 3G penetration is expected to hit 21% this year. In Japan, where the U.S. looks to find its mobile roadmap for the future, 96% of mobile subscribers already have 3G coverage. In Western Europe, the penetration is around 54%, just slightly above 46% in the U.S. In developing and/or economically depressed areas, including the Middle East, Africa, parts of Asia, Eastern Europe and South America, 3G penetration is still in the single digits. 3G access is a key point in the success of the mobile web, providing very usable surfing speeds for mobile web usage.

In addition, mobile e-commerce is ramping up faster than online e-commerce, now making up 4% of total retail sales. In certain categories, such as computers, consumer electronics, music, movies, tickets, video games and books, online sales account for between 45% and 20% of the total retail market. Japan’s Rakuten shows how the mobile share of e-commerce is growing as well, from 10% of e-commerce in 2006 to nearly 20% now.

Video now accounts for 69% of mobile data traffic, and the overlap between mobile users and social web users continues to grow; more and more users are accessing the social web from a mobile device. Real-time technology and location-based services are expected to drive mobile retail, and a very interesting fact is that the average iPhone user only spends 45% of his on-device time making voice calls.

Some more mobile web usage statistics and facts:

  • More people have mobile phones than Internet-connected PCs (4 billion)
  • SMS penetration ~50% and fully mainstream (82% of users <24 y.o.)
  • 82 million Americans can recall seeing advertising on their phone over last 3 mos. (approx. 30% of 270m adult phone users)
  • 25% of phone users (65 mm) are accessing the mobile web but 80% of iPhone users are
  • 40% of Twitter users use the Internet on their phones (76% if you include WiFi) (Pew)
  • Internet Advertising Bureau survey found that 62 percent of agencies, media planners and advertisers believe mobile ad spending will continue to grow and emerge in marketing budgets
  • Mobile device is increasingly becoming small, portable PC experience with an Internet browser experience similar to that of 2000/2001 (just diff’t form factor)
  • In 2007, eMarketer reports that US advertisers spent $900 million on mobile, and double in 2008 to $1.7 billion
  • 21 million iPhones + ~20 million iPod Touches = 40-45million iPod-like devices
  • 50,000 apps from iTunes App Store and Nokia, RIM, MSFT and others now w app stores; 1 billion+ app downloads to date
  • 70% of people sleep with their mobile phones (Zumobi)
  • More than 60 million mobile views per month for New York Times; one of 4 apps pre-loaded on the Palm Pre
  • Joseph Porus of Harris Interactive: “”Mobility could be recession-proof and be one of the strongest ways of effectively marketing in tough economic times”
  • 35% of mobile advertising campaigns cost less than $10,000 (Forrester)

Mobile Device Product Categories & Feature Sets

There are four primary mobile device product categories in widespread use today, and each of these four mobile device product categories is typically configured by the device manufacturers with a certain base set of features and functionality. The four mobile device product categories, listed with their typical bandwidth usage per month, are:

  1. Feature Phones:  Feature Phones such as the Motorola Razr are used primarily to make calls, and they consume little bandwidth even for web activities because they have stripped-down web browsers. Feature phones and their users tend to consume around 100 Megabytes of data downloads a month, using 4 MB of voice calls an hour, and 4 to 5 MB of web browsing per hour.
  2. Smartphones: Smartphones such as Research in Motion’s popular Blackberry are used for phone calls, email, and light web browsing. Smartphones and their users tend to consume around 185 Megabytes of total monthly data downloads, utilizing 4 MB per hour for voice calls, and 4 to 5 MB of web browsing.
  3. Superphones: Superphones are advanced smartphones, including Apple’s iPhone and Motorola’s Droid, that make it easy for people to surf the web and watch online videos, leading to much higher bandwidth use. Superphones and their users tend to consume around 560 Megabytes of total monthly data downloads, using 4 MB per hour for voice calls, 40 MB per hour for web browsing, 60 MB per hour for internet radio, and 200 MB per hour for YouTube videos.
  4. Tablet Computers: Tablet computers such as Apple’s newly unveiled iPad are likely to send data use even higher. The iPad will chew up even more bandwidth than the iPhone because of its larger screen. Tablet computer and iPad users tend to consume 800 to 1,000 Megabytes of total monthly data downloads, using 50 to 60 MB per hour for web browsing, 60 MB per hour for internet radio, and 300 to 400 MB per hour for YouTube videos.

If your web based application or site is not optimized for the mobile web, you are falling behind and losing out on transaction revenue, sales, data, customers: you name it.

There are many methods and techniques that can be used to optimize your web based application or site for the mobile web. In this article I will describe how I optimized a commercial b2c ecommerce application for the mobile web, and then I will go into more details as to how you can use the same techniques I used on the http://www.tshirtnow.net mobile site and also how you can use different techniques to optimize your own web-based mobile application or site.

For the tshirtnow.net mobile site, I utilized a technique to present a mobile-optimized version of the tshirtnow.net web site to mobile browser users such as those surfing the web site on an iPhone, iPad, or Android mobile phone, and the regular version of the tshirtnow.net web site to users who were accessing the web-based b2c tshirtnow.net ecommerce application from regular web browsers on a desktop or laptop computer with a browser like Google Chrome or Microsoft Internet Explorer.

But using a special CSS stylesheet that is optimized for mobile browsers, along with the reglar tshirtnow.net CSS stylesheet, we are able to automatically detect what type of mobile browser platform the user is currently accessing the tshirtnow.net web site with. Using the CSS information contained in the tshirtnow.net mobile cascading style sheet (CSS), we are able to render the exact same html content which represents the different pages on the site such as product detail pages, order status pages, and the home page with different formating and styles, and even content sections, all just by using CSS.

The advantages of this technique are rather obvious. First of all, there is no need to recreate dozens or even hundreds of static html content pages, as the exact same content and pages can be cleverly re-purposed simply by providing for planned degradation of the user’s web experience according to what type of mobile device and mobile browser platform they are currently using.

Secondly, the use of CSS to provide a mobile optimized experience allows for the use of special CSS tags and techniques which can provide iPhone and iPadiOS orientation (landscape or portrait) and touch detection, intelligent web page scaling, special mobile OS (iPhone, iPad iOS or Android, Blackberry, HPWebOS) controls and rich media player capabilities, and phone/web integrated telephony. I will go into much more detail about some of these advanced CSS capabilities and I will provide more information about them as well as links to more resources on the web later in this article.

I encourage readers of this article who have not already done so, to read my previous article, a Glossary of mobile Web Terminology, for references to some of the terms I will use throughout this article. Knowing mobile web terminology will also assist you in creating wireframes and mockups for mobile web applications, and will be a great boon to your mobile application software specifications as well.

 

Tags: , , , ,

Related posts

Written by Jo & Ray · Filed Under Technology 

Got something to say?

You must be logged in to post a comment.