You are previewing Programming the Mobile Web, 2nd Edition.

Programming the Mobile Web, 2nd Edition

Cover of Programming the Mobile Web, 2nd Edition by Maximiliano Firtman Published by O'Reilly Media, Inc.
  1. Preface
    1. Who This Book Is For
    2. Who This Book Is Not For
    3. What You’ll Learn
    4. Other Options
    5. If You Like (or Don’t Like) This Book
    6. Conventions Used in This Book
    7. Using Code Examples
    8. How to Contact Us
    9. Safari® Books Online
    10. Acknowledgments
  2. 1. The Mobile Jungle
    1. The Mobile Ecosystem
      1. What Is a Mobile Device?
      2. Mobile Device Categories
    2. Brands, Models, and Platforms
      1. Apple iOS
      2. Android
      3. Windows
      4. Nokia
      5. BlackBerry
      6. Samsung
      7. Sony Mobile
      8. Motorola Mobililty
      9. Amazon
      10. LG Mobile
      11. HTC
      12. HP and Palm
      13. Firefox OS
      14. Ubuntu for phones
      15. Chinese platforms
      16. Other Platforms
      17. Smart TV Platforms
    3. Technical Information
  3. 2. Understanding mobile web
    1. Myths of the Mobile Web
      1. It’s Not the Mobile Web; It’s Just the Web!
      2. You Don’t Need to Do Anything Special About Your Desktop Website
      3. One Website Should Work for All Devices (Desktop, Mobile, TV, etc.)
      4. Just Create an HTML File with a Width of 320 Pixels, and You Have a Mobile Website
      5. Native Mobile Applications Will Kill the Mobile Web
      6. People Are Not Using Their Mobile Browsers
    2. What is the mobile web?
      1. Differences
    3. Mobile Web Eras
      1. WAP 1
      2. WAP 2.0
    4. The Mobile Browsing Experience
      1. Browsing Types
      2. Zoom Experience
      3. Reflow Layout Engines
      4. Direct Versus Cloud-based Browsers
      5. Multipage Experience
      6. Web Engines
    5. Fragmentation
      1. Display
    6. Market Statistics
  4. 3. Browsers and Web Platforms
    1. Web platforms that are not browsers
      1. HTML5 Webapps
      2. Web Views
      3. Pseudo-browsers
      4. Native Web apps, packaged apps and hybrids
      5. Ebooks
    2. Mobile Browsers
      1. Preinstalled Browsers
      2. User-Installable Browsers
      3. Browser Overview
  5. 4. Tools for mobile web development
    1. Working with Code
      1. Adobe Dreamweaver
      2. Adobe Edge Tools
      3. Microsoft Visual Studio and WebMatrix
      4. Eclipse
      5. Native web IDEs
    2. Testing
      1. Emulators and Simulators
      2. Real devices testing
      3. Remote Labs
    3. Production Environment
      1. Web Hosting
      2. Domain
      3. Error Management
      4. Statistics
  6. 5. Architecture and Design
    1. Mobile Strategy
      1. When to get out of the browser
      2. Context
      3. Server Side Adaptation
      4. Progressive Enhancement
      5. Responsive Web Design
      6. RESS
    2. Navigation
    3. Design and User Experience
      1. Touch Design Patterns
      2. Tablet Patterns
      3. Official UI Guidelines
      4. What not to do
  7. 6. Markups and Standards
    1. First, the very Old Ones
      1. WML
    2. Current Standards
      1. Politics of the Mobile Web
      2. Delivering Markup
    3. XHTML Mobile Profile and Basic
      1. Available Tags
      2. Official Noncompatible Features
      3. Creating Our First Compatible Template
      4. Markup Additions
    4. Mobile HTML5
      1. Creating our first HTML5 template
      2. Syntax Rules
      3. New elements
    5. CSS for Mobile
      1. WCSS Extensions
      2. CSS 3
    6. HTML5 Compatibility levels
      1. Testing your browser
    7. Confusion
  8. 7. Basics of Mobile HTML5
    1. Heading Structure
      1. Title
      2. Website icon
      3. Home Screen icons
      4. The viewport
      5. Changing the navigation method
      6. Removing automatic links
      7. Meta data for sharing
      8. Hiding URL address bar
      9. Native app integration
    2. The Document Body
      1. Main Structure
    3. HTML5 Mobile Boilerplate
    4. The content
      1. Block Elements
      2. Lists
      3. Tables
      4. Frames
      5. Links
      6. Accessibility
  9. 8. HTML5 Forms
    1. Form design
    2. Form elements
      1. Select lists
      2. Radio buttons and checkboxes
      3. Buttons
      4. Hidden fields
      5. Text input fields
      6. Range slider field
      7. Date input fields
      8. File selection fields
      9. Non-interactive form elements
    3. Form Control Attributes
      1. Placeholder
      2. Auto focus
      3. Autocomplete
      4. Validation input attributes
      5. Read only
      6. Safari extensions
      7. Firefox extensions
      8. XHTML mobile <code xmlns="" xmlns:epub="" xmlns:m="" xmlns:pls="" xmlns:ssml="" xmlns:svg="" class="literal">inputmode</code>
      9. Additional form attributes
    4. Form validation
      1. HTML5 validation
      2. WAP CSS validation
  10. 9. Feature and device detection
    1. Possible problems
      1. Possible solutions
    2. Informational websites
      1. Can I use
      3. Web Platform
    3. Client-side detection
      1. HTML Fallbacks
      2. CSS Fallbacks
      3. Vendor Prefixes
      4. JavaScript fallbacks
      5. Modernizr
      6. Polyfills
      7. Platform detection
    4. Server-side detection
      1. HTTP
      2. Detecting the Context
      3. Cloud-based browsers
      4. Mobile detection
      5. Transcoders
      6. Device Libraries
  11. 10. Images and Media
    1. Images
      1. Image formats
      2. Using the img element
      3. Responsive Images
      4. Local pictograms
    2. Multiple density screens
      1. Using vector-based solutions
      2. Providing one single image
      3. Providing image alternatives
      4. SVG
      5. Canvas
    3. Adobe Flash
    4. Video
      1. Containers and Codecs
      2. Delivering video
      3. HTML5 video element
      4. Streaming
      5. Object embedding
      6. Video compatibility
    5. Audio
      1. Invisible audio player
      2. Web Audio API
      3. Audio Compatibility
  12. 11. CSS for Mobile Browsers
    1. Where to Insert the CSS
    2. Media Queries
      1. CSS3 Media Queries
    3. Selectors
    4. CSS Techniques
      1. Reset CSS Files
      2. Text Format
    5. Common Patterns
      1. Display Properties
      2. Rounded corners
      3. Border Image
      4. Pseudoclasses
      5. Backgrounds
      6. Scrollable areas
      7. Content
      8. Opacity
      9. Cursor management
      10. Selection management
      11. Touch Callout
      12. Highlight color
      13. Appearance override
    6. CSS Sprites
      1. Samples and Compatibility
      2. CSS Sprites Alternatives
      3. CSS3 Modules
      4. Gradients
      5. Reflection
      6. Masks
      7. Transforms
      8. Transitions
      9. Animations
      10. CSS Filter Effects
      11. CSS Regions and Exclusions
      12. CSS New Values and Units
  13. 12. JavaScript Mobile
    1. Coding for Mobile Browsers
      1. HTML5 script extensions
      2. Code Execution
      3. Cloud-based browsers
      4. JavaScript debugging and profiling
      5. Battery consumption
    2. Background execution
      1. Status detection
      2. Background tab notification trick
      3. Background execution compatibility
      4. Push notifications
    3. Supported Technologies
      1. Document Object Model
      2. Selectors API
      3. JSON
      4. Binary Data
      5. Web Workers
      6. HTML5 APIs
      7. Native webapp APIs
    4. Standard JavaScript behavior
      1. Standard dialogs
      2. History and URL management
      3. Manipulating windows
      4. Focus and scroll management
      5. Timers
      6. Changing the title
      7. Cookie management
      8. Event Handling
    5. JavaScript Libraries
      1. Mobile Libraries
    6. UI Frameworks
      1. Sencha Touch
      2. jQuery Mobile
      3. Enyo
      4. Montage
      5. iUI
      6. jQTouch
      7. JavaScript Mobile UI Patterns
  14. 13. Offline, Storage and Network
    1. Offline webapps
      1. The manifest file
      2. Reusing the manifest
      3. Accessing online resources
      4. Updating the package
      5. Deleting the package
      6. JavaScript API
      7. Compatibility and limits
    2. Client-side Storage
      1. Web Storage
      2. Web SQL Database API
      3. Indexed Database API
      4. FileSystem API
      5. User’s power
      6. Debugging storages
    3. Network communication
      1. Ajax
      2. Server Sent Events
      3. Web Sockets
  15. 14. Geolocation and Maps
    1. Location Techniques
      1. Accuracy
      2. Indoor Location
      3. Client Techniques
      4. Server Techniques
      5. Asking the User
    2. Detecting the Location
      1. W3C Geolocation API
      2. Carrier network location APIs
      3. IP Geolocation
    3. Maps and Navigation app integration
      1. Google Maps for Android
      2. iOS Maps
      3. Bing Maps
    4. Showing a Map
      1. Google Maps API v3
      2. Google Maps Static API
      3. Nokia Here
  16. 15. Device Interaction
    1. Mobile-specific URIs
      1. Making a call
      2. Sending email
      3. Sending an SMS
      4. Other communication apps
      5. Adding a contact to the phonebook
      6. Integrating with other applications
    2. JavaScript APIs
      1. Touch
      2. Gestures
      3. Sensors
      4. Network Information
      5. File Management
      6. Full Screen
      7. Web Notifications
      8. Camera
      9. Battery
      10. Vibration
      11. Other APIs
  17. 16. Native and installed Webapps
      1. Pros and Cons
      2. Architecture
    2. Standards
      1. Packaging and Configuration Standards
    3. Official platforms
      1. iOS Web apps
      2. Symbian standalone webapps
      3. Windows 8 Store apps
      4. Mozilla Open Web Apps
      5. Chrome apps
      6. Samsung Web apps
      7. BlackBerry WebWorks
      8. Nokia S40 webapps
      9. Nokia Symbian webapps
    4. Apache Cordova / PhoneGap
      1. Template creation
      2. Cordova WebView
      3. CordovaJS
      4. Plugins
    5. Distribution
      1. iOS AppStore
      2. Android stores
      3. BlackBerry AppWorld
      4. Microsoft Windows Store
      5. Microsoft Windows Phone Store
    6. Full screen apps Patterns
      1. Multiple Views
      2. Layout
      3. Input Method
      4. One-View Widget
      5. Dynamic Application Engine
      6. Reload my webapp
  18. 17. Content Delivery
    1. MIME Types
      1. Static definition
      2. Dynamic definition
    2. File Delivery
      1. Direct linking
      2. Delayed linking
      3. OMA Download
    3. Application and Games Delivery
      1. iOS applications
      2. Android applications
      3. Windows applications
      4. Java ME
  19. 18. Debugging and Performance
    1. Debugging
      1. Server-Side Debugging
      2. Markup Debugging
      3. Client-Side Debugging
    2. Performance Optimization
      1. Measurement
      2. Best Practices
  20. 19. Distribution and Social Web 2.0
    1. Mobile SEO
      1. Spiders and Discoverability
      2. How Users Find You
      3. User Fidelizing
    2. Mobile Web Statistics
      1. Google Analytics for Mobile
      2. Yahoo! Web Analytics
      3. Mobilytics
    3. Monetizing your website
      1. Mobile Advertisement
    4. Mobile Web Social Features
      1. Authentication and sharing APIs
      2. Share Content
  21. A. MIME Types for Mobile Content
    1. Markup and Script MIME Types
    2. Image MIME Types
    3. Mobile Content MIME Types
    4. Audio and Video MIME Types
    5. Webapp MIME Types
  22. Index
  23. About the Author
  24. Colophon
  25. Copyright

Chapter 1. The Mobile Jungle

Everyone wants mobile today. There are several reasons, such as having more than 70% of the world population with an active mobile device, being really the first personal device (really personal), reading user’s context all the time always and everywhere.

Then what’s the problem? Well, as I always say, “Mobile is a minefield”. With that I’m saying that everyone trying to enter in the mobile world feels himself in a minefield. We feel that every step can be the right one or can be the one that will make us waste our time.

Should we create native apps? Should we go with jQuery Mobile? Should we create a special version for tablets? Should we target feature phones?

We have lot of questions and sometimes it’s difficult to find answers. Every step doesn’t feel right enough. That’s the “minefield sensation”.

Mobile web appears as a solution to some of the problems that the mobile space may have. This book is about trying to get an idea of what we can do, how and what are the main problems.

The Mobile Ecosystem

If you are coming from the desktop web world, you are probably not aware of the complete mobile ecosystem. Maybe you have read a lot about mobile, but I can assure you that it will be more complex that you think. Let’s review the current state of affairs, so we can be sure we have all the knowledge we need to create the best solutions.

What Is a Mobile Device?

It’s really difficult to categorize every mobile device. Is it a smartphone? Is it a handheld? Is it a netbook? Is it a music player?

First, when is a device considered a mobile one?

For the purposes of this book, a mobile device has the following features:

  • It’s portable.

  • It’s personal.

  • It’s with you almost all the time.

  • It’s easy and fast to use.

  • It has some kind of network connection.


A mobile device has to be portable, meaning that we can carry it without any special considerations. We can take it to the gym, to the university, to work; we can carry it with us everywhere, all the time.


We’ve all heard it: “Don’t touch my phone!” A mobile device is absolutely personal. My mobile is mine; it’s not property of the family, nor is it property of my company. I choose the ringtone, the visual theme, the games and applications installed, and which calls I should accept. My wife has her own mobile device, and so do my kids. This personal feature will be very important in our projects. You can browse a desktop website from any computer—your familiar home PC, your computer at work, or even a desktop at a hotel or Internet café—and numerous people may have access to those machines. However, you will almost always browse a mobile website from the same device, and you are likely to be the only person who uses that device.


Do a test: go now and ask some friends or colleagues to allow you to view your email or your Facebook account using their mobile devices. Pay attention to their faces. They don’t want to! You will log them out from their accounts, you will use their phone lines, and you will touch their devices. It’s like a privacy violation.


Your mobile device can be with you anytime! Even in the bathroom, you probably have your mobile phone with you. You may forget to take lots of things with you from your home in the morning, but you won’t forget your wallet, your keys, and your mobile device. The opportunity to be with the user all the time, everywhere, is really amazing.

Easy usage

A notebook (or even a netbook) is portable; it can be with you at any time and it has a network connection, but if you want to use it, you need to sit down and perhaps find a table. Therefore, it’s not a mobile device for the purposes of this book.

A mobile device needs to be easy and quick to use. I don’t want to wait for the operating system to start; I don’t want to sit down. If I’m walking downtown, I want to be able to find out when the next train will be departing without having to stop.

Connected device

A mobile device should be able to connect to the Internet when you need it to. This can be a little difficult sometimes, so we will differentiate between fully connected devices that can connect any time in a couple of seconds and limited connected devices that usually can connect to the network but sometimes cannot.

A classic iPod (non-Touch) doesn’t have a network connection, so it’s out of our list too, like the notebooks.


Where do tablets, like the iPad, fit in? They are not so personal (will you have one tablet per member of the family?), and they may not be so portable. But, as they generally use mobile instead of desktop operating systems, as well as mobile browser, so they are more mobile than notebooks or netbooks. So, I don’t have the final answer but they are considered mobile devices in this book.

Mobile Device Categories

When thinking about mobile devices, we need to take the “phone” concept out of our minds. We are not talking about simply a phone for making calls. A voice call is just one possible feature of a mobile device.

With this in mind, we can try to categorize mobile devices.

Mobile phones

OK, we still have mobile phones in some markets. These are phones with call and SMS support. They don’t have web browsers or connectivity, and they don’t have any installation possibilities. These phones don’t really interest us; we can’t do anything for them.

In a couple of years, because of device recycling, such phones will probably not be on the market anymore. The Nokia 1100 (see Figure 1-1) is currently the most widely distributed device in the world, with over 200 million sold since its launch in 2003. In terms of features, it offers nothing but an inbuilt flashlight. The problem is that we can’t create web content for it. Some companies may continue to make very low-end entry devices in the future, but hopefully Nokia and most other vendors will stop creating this kind of device. Even newer, cheaper mobile devices now have inbuilt browser support. This is because the mobile ecosystem (vendors, carriers, integrators, and developers) wants to offer services to users, and a browser is the entry point.

For example, Nokia offers Nokia Mail, an email service for non-Internet users in emerging markets. Thanks to this service, many, many people who have never before had access to email can gain that access, with a mobile device costing less than $40. This widespread solution meets a real need for many people in emerging markets, like some countries in Africa and Latin America.

Feature Phones

Feature Phones, also known low-end mobile devices, have a great advantage: they have web support. They typically have only a very basic browser, but this is the gross market. People who buy these kinds of devices don’t tend to be heavy Internet users, but this may change quickly with the advent of social networks and Web 2.0 services. If your friends can post pictures from their mobile devices, you’ll probably want to do the same, so you may upgrade your phone whenever you can.

Nokia, Motorola, Kyocera, LG, Samsung, and Sony Mobile have devices for this market. They do not have touch support, have limited memory, and include only a very basic camera and a basic music player. We can find phones in this category from $40 on sale all over the world.

Just to give you an idea of how big this market is: during 2011 70% of the total phone sales worldwide was in the feature phone category (source: However, these users are usually phone and messaging users only, so they rarely consume web content.

250 million devices worldwide sounds very attractive but this device (Nokia 1100) is out of our scope because it doesn’t have a web browser.
Figure 1-1. 250 million devices worldwide sounds very attractive but this device (Nokia 1100) is out of our scope because it doesn’t have a web browser.

Social Phones

Social Phones are also known as mid-end and/or high-end mobile devices. The difference is that they are prepared for social users: apps such as Facebook, Twitter, WhatsApp are always pre-installed and a minimum data plan is also usually included with the contract.

This is the mass-market option for a good mobile web experience. Mid-end devices maintain the balance between a good user experience and moderate cost. From $150, we can find a lot of devices in this market sector. In this category, devices typically offer a medium-sized screen, basic HTML-browser support, sometimes 3G, a decent camera, a music player, games, and application support.

One of the key features of mid-end devices is the operating system (OS). They don’t have a well-known OS; they have a proprietary one without any portability across vendors. Native applications generally aren’t available publicly and some runtime, like Java ME, is the preferred way to develop installed applications.

The same vendors develop these devices as the low-end devices.

Originally the same category as smartphones, high-end devices are generally non-multitouch but have advanced features (like an accelerometer, a good camera, and Bluetooth) and good web support (but not the best in the market). They are better than mid-end devices but not on a par with smartphones. The enhanced user experience on smartphones is one of the key differences. The other difference is that high-end devices generally are not sold with flat Internet rates. The user can get a flat-rate plan, but he’ll have to go out and find it himself.


You will find different mobile categories defined in different sources. There isn’t only one de facto categorization. The one used here is based on mobile web compatibility today.


This is the most difficult category to define. Why aren’t some social devices considered “smart” enough to be in this category? The definition of smart evolves every year. Even the simplest mobile device on the market today would have been considered very smart 10 years ago.

A device in this category can cost upwards of $400. You can probably get one at half that price from a carrier; the devices are often subsidized because when you buy them you sign up for a one- or two-year contract with a flat-rate data plan (hopefully). This is great for us as users, because we don’t care too much about the cost of bytes transferred via the Web.

A smartphone, as defined today, has a multitasking operating system, a full desktop browser, Wireless LAN (WLAN, also known as WiFi) and 3G/4G connections, a music player, and several of the following features:

  • GPS (Global Positioning System) or A-GPS (Assisted Global Positioning System)

  • Digital compass

  • Video-capable camera

  • Bluetooth

  • Touch support

  • 3D video acceleration

  • Accelerometer

  • Gyroscope

  • Magnetometer

Currently, this category includes the Apple iPhone, every Android device (including the Samsung Galaxy series and the Sony Xperia series), the Nokia Lumia 920, and later BlackBerrys.


The discussion about smartphones is always floating in the market. For example, BlackBerry believes that every device they’ve been manufacturing is a smartphone even if they are not touch and doesn’t have WiFi. On the other hand, Nokia has the Asha series (in the Social Phone category) with touch and WiFi connection support so they claim to be smartphones.

If you are still confused about the models, brands, and operating systems, don’t worry, it will become clearer. Some confusion is normal, and I will help you to understand the mobile web ecosystem in the following pages.


A tablet is a flat device that usually doesn’t fit on our pockets and with a touch screen from 7 to 11 inches. Sometimes it uses a mobile operating system (such as iOS instead of Mac OS) and sometimes it uses a touch-optimized version of a desktop operating system (such as Windows for tablets instead of Windows Phone).

They have the same functionalities as the smartphones, including multitasking operating system, application installation and full modern web browsers. Every tablet has Wi-Fi support and there are some of them with 3G or 4G connection.

Some devices are even difficult to categorize, for example the Samsung Galaxy Note is a 4G phone with a touch 5.3” pointer- and finger-based screen that can be also included in the tablet category.


There is an informal concept known as phablet -a portmanteau of the words phone and tablet- describing phones with very large screens −5 to 7 inches- such as the Samsung Galaxy Note phone series.

Non-phone mobile devices

This may sound a bit strange. Non-phone mobile pocket devices? Indeed, there are some mobile devices that have all the features we’ve mentioned and have a size similar to a phone, but without voice support using the normal carrier services.

For example, Apple’s iPod Touch is a device in this category. They aren’t phones, but they can be personal, are portable and easy to use, can be kept with you most of the time, and have WiFi connections, so they fall into the category of limited connected devices. They can have a great mobile browser so they will be in our list of devices to be considered for development.

We can also consider some of the new ebook readers. I have an Amazon Kindle ebook reader with data connection support (both Wi-Fi and 3G). The Kindle has a great web browser if you can get used to e-ink refresh delays. Ebook readers aren’t phones, but they conform to all our other guidelines for mobile devices.

At the time of this writing Google is working on a project called Google Glass, which is a connected Android-based pair of augmented reality glasses. We may be delivering services and widgets to our eyes in the near future with these new devices.

The Amazon Kindle can be considered a mobile web device because of its network connection and web browser.
Figure 1-2. The Amazon Kindle can be considered a mobile web device because of its network connection and web browser.


These devices have at minimum a nine-inch display, and they are more like desktops than mobile devices. Some have desktop operating systems and desktop browsers, while others, have a reduced web-based operating system, such as the Chromebooks including Chrome OS.

If a device has a full operating system, you will need to install antivirus protection and a firewall on it, so it won’t meet the easy usage criterion for a mobile device. Also remember that you can’t use a netbook while walking and that’s one of the key differences of mobile devices.

Brands, Models, and Platforms

Now that we have established a set of categories in the mobile world, let’s talk about the difficult part: the brands and models on the market. We are not going to talk about every model available, and we don’t need to know about all of them. We only need to be aware of some information that will be useful for making decisions in the future.

Writing a book about brands and models is very difficult. The market changes a lot every year. In fact, during the months while I was writing this book, I had to update the information several times. That is why I will be general and aim to show you how to understand any new device that could appear on the market.

Apple iOS

We are going to start with Apple, not because its devices are the best or because it has the greatest market share, but because Apple has caused a revolution in the market. It changed the way users see mobile devices and mobile web browsing, and it is the reason why many developers (web or not) have turned their attention to the mobile world.

Apple, a well-known desktop computer company, entered the mobile world with a revolutionary device: the iPhone. The iPod Touch continued the iPhone revolution with a similar device without a phone. Luckily for us, all of Apple’s small mobile devices are quite similar. They have a multitouch screen, a 3.5” screen size (with medium or ultra high resolution) or a 4” screen size with ultra high resolution, WiFi connections, and Safari on iOS (formerly Mobile Safari) as the browser. The iPad series added a 9.7” screen size (medium and high resolution) with almost the same other features than the iPod Touch and iPhone.


As of June 2012, Apple has sold 400 million iOS devices including iPhone, iPod Touch and iPad.

Apple’s devices have a great feature: an operating system called iOS (formerly iPhone OS) that is based on Mac OS X (a Unix-based desktop OS). Usually, the last hardware versions of the iPhone can be upgraded to the latest operating system version. By default, the iPhone, iPad and iPod Touch are charged using USB; when you charge your device, iTunes (the Apple software for managing your device’s content and music) will detect automatically if an OS update is available for your device, and you can install the update in minutes without any technical skill needed. Starting with iOS 5.0, the device can upgrade itself Over the Air, just using your wireless connection.

We can find iPod Touch and iPhone devices with a 3.5” or 4” screen. In the later case, with a larger screen. In this case, the iPhone 4S and iPhone 5.
Figure 1-3. We can find iPod Touch and iPhone devices with a 3.5” or 4” screen. In the later case, with a larger screen. In this case, the iPhone 4S and iPhone 5.

That is why today, for a mobile web developer, it’s more important to know what OS version an Apple device has installed than which device it is. For those of us whose aim is to create great web experiences for the iPhone, it doesn’t matter if the device is an iPhone (the original phone), an iPhone 4S (S for speed, a device with more power and speed), an iPhone 5 or an iPod Touch (like the iPhone without the phone). Even within each device type, we have many generations. The same idea applies to the iPad.


The Apple iPad is a 9.7” tablet running iOS. It includes the same functionality and browser as the iPhone, with minor differences because of the larger screen, which has a 768×1024 resolution on the first two generations and 1536×2048 on the third generation. Apple has sold more than 84 million iPads in just the first two years and a half.

The important thing is to know which OS version a device that accesses your website is running. It may be iOS 1.0, 2.2, 3.0, 3.2, 4.0, 5.0, 6.0 or newer (although versions 1.0 to 3.2 are rarely seen on devices in use today, so we can safely work with versions 4.0 and beyond). Up to version 4.0, iOS was called iPhone OS. Every version has upgrades in the browser and is backward compatible. For example, the Gmail version for the iPhone is different if you have an iPhone running OS 2.2, or 6.0.

Table 1-1. List of iOS versions and devices supported per version

iOS version

Devices added

Highest version for

Released on

1.0 to 1.1.5

iPhone 1st gen.

iPod Touch 1st gen.


2Q 2007 – 3Q 2008

2.0 to 2.2.1

iPhone 3G

iPod Touch 2nd gen.


3Q 2008 – 1Q 2009

3.0 to 3.1.3

iPhone 3GS

iPod Touch 3rd gen.

iPhone 1st gen.

iPod Touch 1st gen.

2Q 2009

3.2 to 3.2.2

iPad 1st gen. (only)


2Q 2010

4.0 to 4.2.1

iPhone 4

iPod Touch 4th gen.

iPhone 3G

iPod Touch 2nd gen.

2Q 2010 – 4Q 2010

4.3 to 4.3.5

iPad 2


1Q 2011 – 3Q 2011

5.0 to 5.1.1

iPhone 4S

iPad 3rd generation

iPod Touch 3rd gen.

iPad 1st gen.

4Q 2011 – 2Q 2012


iPhone 5

iPod Touch 5th gen.

iPad Mini 1st generation

iPad 4th generation


3Q 2012 - 4Q 2012

You can see sample screens in Figure 1-4.

This is the same Gmail account accessed from an iPhone running OS 2.0 and one running 6.0. The latter provides a more rich and contextual experience for the user.
Figure 1-4. This is the same Gmail account accessed from an iPhone running OS 2.0 and one running 6.0. The latter provides a more rich and contextual experience for the user.

Today, we can develop applications for iOS devices on only two platforms: using mobile web techniques, and using the native Cocoa Touch framework built on Objective-C. There are other non-official platforms that can also compile iOS native applications, such as Adobe AIR, Corona or Appcelerator Titanium.


It’s not widely known today that Apple, creator of the iPod and iPhone, was really one of the pioneers in the mobile device market. The Apple Newton was on the market from 1990 to 1998. And Apple also has released the ROKR E1 in conjunction with Motorola in 2005, the first phone connected with Apple’s services including iTunes. The phone was not a great success from Apple’s perspective and that was one of the reasons of the company to start the iPhone project.

Every iOS device has the AppStore, the famous store for selling and distributing free native apps for iPhone, iPod touch and iPad.


Later in this book, we are going to talk about how to detect the OS and use all the features available only in Safari on iOS. We will also talk about the App Store and how to distribute our mobile web applications via this store.


This platform we are covering isn’t a manufacturer. Therefore, it may not seem to fit in this list. It does, though—if we are developing a website for an Android device, we don’t need to bother too much about who the manufacturer is. This is because the Android platform is powerful enough to leave the brand and model in a second place when we are talking about developer features.

Android is an open source, Linux-based operating system created and maintained by a group of software and hardware companies and operators called the Open Handset Alliance. Google mainly maintains it, so it is sometimes known as the “Google Mobile Operating System.” As with any open source software, any manufacturer could theoretically remove all the Google-specific stuff from the operating system before installing it on their devices. However, as of this writing no vendor has done this, which is why every Android device is very “Google friendly.”


According to official Google data, in July 2012 there were 400 million Android devices in use and 1 million new devices activating every day.

Android is a software stack including a Linux-core, multitasking operating system based on the concept of a virtual machine that executes bytecode, similar to .NET or JVM (Java Virtual Machine). Google chose Java as the main language to compile (not compatible with Java ME) with Web users in mind. Android includes a bunch of Google services, such as Google Maps, Google Calendar, Gmail and an email client and provide connections to many free Google web services. It’s not an obligation, but as of today every Android device is touch-based, and many of them have a QWERTY physical keyboard, GPS, a digital compass, and an accelerometer.


Android is the mobile platform with more choices when talking about mobile browsers. From the default Android Browser available before Android 4.1, to Firefox, Google Chrome, Opera Mobile, Opera Mini, UCWeb and many others are available to download and install for free.

Today, HTC, Motorola, Samsung, LG, Acer, Asus, and Sony Ericsson make Android devices. There are also some non-phone devices, such as tablets, that use Android. There are even some personal video playing glasses using Android and Google TV – an interactive television platform- is based on this mobile operating system.

An android device usually comes with Google Play Store –previously known as Android Market-, the official platform store for Android apps, music, books and other multimedia content. Some Android-based vendors replace or add their own stores, such as Amazon AppStore or Samsung Apps.


Android 3.0 was the first version supporting large screens and tablets. However, you can find lots of 7” tablets –such as the first generation of Samsung Galaxy Tab- and some 10” tablets from low budget manufacturers using Android 2.2 and Android 2.3 sold before 2012.


As of the writing of this book, the Android OS comes in different versions and a device usually can update to one or two big updates because every manufacturer and sometimes a carrier need to create their own version of Android from Google’s source code. That means that on the market we usually have 3 main versions that will not receive an update.

Knowing the OS version will be very useful to determine what browser features are available. Unfortunately, the documentation about the Android browser features is not complete and we will see in next chapter that Google Chrome has appeared to solve some of these problems for the future.

Galaxy from Samsung and RZR from Motorola are the most famous Android device series. In this case, the Galaxy SIII and the RZR M.
Figure 1-5. Galaxy from Samsung and RZR from Motorola are the most famous Android device series. In this case, the Galaxy SIII and the RZR M.

Every Android version is known by its number and also by a codename that is always a dessert with every letter of the alphabet. In Table 1-2 you will see Android versions published or to be published at the time of this writing. Google also maintains a website were you can see every version market share in the last 14 days with updated information on

Table 1-2. List of Android versions and code names

Android version


Released on

Optimized for

1.0 & 1.1


2008, 2009

Smartphones (deprecated)



1Q 2009

Smartphones (deprecated)



3Q 2009

Smartphones (deprecated)

2.0 & 2.1


4Q 2009




2Q 2010




4Q 2010


3.0, 3.1 & 3.2





Ice Cream Sandwich (ICS)

4Q 2011

Smartphones & tablets

4.1 & 4.2

Jelly Bean (JB)

2Q 2012

Smartphones & tablets

Not confirmed

Key Lime Pie (KLP)


Smartphones & tablets

Google’s Nexus devices

In 2011 Google acquired Motorola Mobility, the well-known mobile device manufacturer. This means that Google is now a device manufacturer –which includes the well-known tablet Motorola Xoom and the Motorola Droid series- and at the time of this writing Motorola continues with its own name and working as a separate company. While Google promised that Android will continue its current open source iniciative and Motorola will not have special treatment other competitors working closely with Android –such as Samsung and HTC- are looking for alternate operating system if the current status changes in the future.


A rumor says that Google will deliver a new phone under this new ecosystem after this book was published, under the codename XPhone. To get updates on new devices and platforms after this writing, check

Despite the Motorola’s devices, Google has some devices as key devices –examples of the best hardware for every Android version-. Different vendors –such as HTC, Asus and Samsung-, manufacture these devices without any customization –pure Android- and are usually very high-end devices mostly acquired by developers. These Google key devices are under the Nexus series name, including Nexus One, Nexus S, Galaxy Nexus and the multimedia home player Nexus Q. From 2012, Google is offering different sizes for a Nexus experience such as in the smartphone Nexus 4 and the tablets Nexus 7 and Nexus 10.


One of the big problems of Android from a developer’s perspective is its fragmentation. With fragmentation we mean the diversity of manufactures and devices on the market, from very low-end cheap hardware to very expensive high-end hardware, from really small screens and resolution to hi definition devices with large screens. Compared to iOS where every device is basically the same with hardware improvements the difference is huge.

The openness of Android makes it the perfect platform for customization. That is how you will find lot of Android devices with a different UI, even with a different mobile browser. For example, Samsung adds its own UI layer to the basic Android interface on some devices and there are also some tablets with a complete layer over Android UI. Amazon has released tablets under the series name Kindle Fire that are Android devices with a different user interface; Barnes & Noble did a similar job with Android and the Nook series.


Microsoft has tried to enter the mobile space as a big player for years. Windows Mobile was its main platform until they’ve decided to start from scratch and Windows Phone was the result leading to Windows 8 on the desktop and tablets later. A new mobile operating system, developed from the ground, with a unique user interface –originally called Metro- that provides a different experience than the other main platforms. Both Windows Phone and Windows tablet and desktop –from version 8- includes Marketplace the store for application and content.

Windows Phone

Microsoft started launched the new operating system with some companies such as HTC, LG and Samsung but it didn’t get too much market share after a while. A special agreement with Nokia changed this vision providing more Windows Phone distribution worldwide starting in 2012. Most independent annalists conclude that in the following years it’s possible to see iOS, Android and Windows Phone as the main three platforms in the market.

The first version of this OS was 7.0 –following numbers from Windows Mobile 6.5- followed by the first big step: Windows Phone 7.5 also known as Mango, supporting multitasking and HTML5 on Internet Explorer 9. The operating system has the same restrictions as iOS when dealing with the leverage of providing an easy to use platform and hiding some low-level stuff such as the file system, app installation from unknown sources or real multitasking. Applications on Windows Phone devices can only be installed through the official store.

Windows Phone devices include Microsoft-related services and applications, such as Office, Internet Explorer and Bing services.

The second generation of this platform, known as Windows Phone 8, is not compatible with devices sold with 7.x, although these devices were upgraded to Windows Phone 7.8, including some of the new features of the second-generation platform, such as a new home tiles screen. Windows Phone 8 includes a new architecture and an optimized UI for better customization, including a Kid’s corner, a worry-free way for your kids to play with your phone.

All Windows Phone devices include the Windows Phone Store, formerly known as Windows Marketplace, for native app distribution.

Windows 8 and Windows Phone include a new user interface, originally called Metro. In this case, the Nokia Lumia 820 with Windows Phone 8.
Figure 1-6. Windows 8 and Windows Phone include a new user interface, originally called Metro. In this case, the Nokia Lumia 820 with Windows Phone 8.

Windows 8

Windows Phone is not intended for tablets because Windows 8 –the big version- is prepared for bigger touch devices. Windows 8 includes the same user interface -formerly known as Metro- that appeared first in the Phone version of the Microsoft’s mobile operating system.

Windows 8 is included in many tablets on the market – including different vendors and Microsoft with its own devices– and every version supports Windows 8 store apps –full screen applications created with HTML5 or .NET-. The operating system includes an official Windows Store for the first time in the main operating system for app distribution.

This operating system is optimized for desktop, notebooks and tablet devices and, for tablets, it is available as two main versions: Windows 8 Pro and Windows 8 RT. The first version is the “classic” Intel chipset-based compatible version and it supports every Windows Vista or legacy Windows XP application in a “Desktop Mode”.

Windows 8 RT is a version optimized for ARM-based devices, usually more common on tablets than the more powerful version of the operating system. This version has a limited desktop mode that works with Microsoft apps and it can’t run any classic Windows application, just Windows Store certified apps.


Microsoft originally named the Windows Phone and Windows 8 user interface as Metro. A trademark dispute has forced Microsoft to drop this name and it was replaced by just Windows 8 style UI or Windows Store UI.

Microsoft has also released their own tablets using Windows 8 under the series known as Microsoft Surface. Two main tablet categories are offered, with Windows 8 RT and Windows 8 Pro being the first one the cheaper one. One of the big advantages of the Surface against other tablets in the market today is the ability to use the cover as a keyboard - available as a touch surface or a physical keyboard version.

Windows Mobile and Embedded Compact

One of the older mobile operating systems on the market is Windows Mobile (formerly Windows CE for PocketPC and Smartphones). For many years, its market included the well-known PocketPCs as Personal Digital Assistants (PDAs) without phone features. The “mobile revolution” pushed Microsoft to create a smartphone version of its mobile operating system, called Windows Mobile, which was available in two flavors: the Professional (formerly Pocket PC) and Smartphone editions.

Today Windows Mobile doesn’t have too much market share and it was totally replaced by Windows Phone on the consumer-side, but it is still well received in the some industries for specific-purposes devices.

Almost every mobile device with Windows Mobile that has launched since 2003 has .NET Compact Framework support. This means you can develop native applications using C# or Visual Basic with a reduced .NET Framework.

For industrial and corporate users, Windows Mobile continued as a separate mobile operating system with the Windows CE codebase, called Windows Embedded Compact. This operating system has released a 7.0 version in March 2011 almost at the same time as Windows Phone 7. However, it’s not intended for the mass market and only for embedded systems. In early 2013, Microsoft has released Windows Embedded 8 in different versions: standard, plus, pro, industry, handheld and automotive for vertical markets.

Table 1-3. List of Windows versions and code names for mobile web development


Version and codenames

Released on

Optimized for

Windows Phone 7

7.0 (Metro)


Smartphones (deprecated)

Windows Embedded Compact


1Q 2011

Enterprise, Industrial and Consumer Electronics

Windows Phone 7.5

7.1 (Mango)

3Q 2011


Windows Phone 7.5 Refresh

7.1.x (Tango)

2Q 2012


Windows Phone 7.8

7.x (Apollo)

4Q 2012


Windows Phone 8

8.0 (Apollo)

4Q 2012


Windows 8


4Q 2012

Tablets and desktop

Windows Embedded 8


1Q 2013 - 2Q 2013

Enterprise, Industrial, Consumer Electronics and Automotive


Nokia had the largest market share in mobile devices and smartphones worldwide for years (but not necessarily in specific markets, like the U.S.). Nokia has devices in all the mobile categories, from very low-end devices to very high-end smartphones.

I’ve been one of the Nokia Developer Champions (a worldwide recognition program for top mobile developers) since 2006, and I know that Nokia really cares about the developer community though the website Nokia Developers (

The bad news for developers is that hundreds of different Nokia devices are available today. The good news is that they are very well organized by platform into different series, making it easier for us to develop, test, and port our web applications to most of them.

All Nokia devices –except for Windows-based- support Nokia Store, formerly Ovi Store, for application distribution for all the supported platforms.

Windows Phone

Starting in late 2011, Nokia is using Windows Phone as the main smartphone platform with devices under the marketing series name Lumia. These devices are replacing Symbian as the main Nokia’s high-end platform and will co-exist with them for a couple of years.

Nokia Lumia phones have Windows Phone 7.x, 8.0 or later, including Microsoft and Nokia software –such as Internet Explorer, Bing, Nokia Maps, Nokia Drive and Windows Store.

For most of the web development work we will follow Microsoft directives, tools and documentation, as there is no specific work to do on Nokia Windows Phone devices in terms of mobile web development. The only exception can be a Nokia Xpress Browser that Nokia offers to their users are we are going to cover later in this book.


At the time of this writing there is a confirmation that Nokia will create tablets using Windows 8 RT as its operating system.

Series 40

Nokia’s Series 40 (S40) consists of low- and mid-end devices (both feature phones and social phones) using a proprietary Nokia OS focused on the mass market. The devices in this series first appeared in 2003, and today they are separated into different editions and even small update packages (called Feature Packs) that will help us to understand the abilities of each mobile device in this series. Some series with the “Lite” suffix means low-end limited devices.

From 2003 lots of series were developed from 1st edition to 3rd edition feature pack 3 that right now can be considered legacy platforms as there are no new devices on the market since end of 2007.

Starting in 2012 this series is called Nokia Asha on marketing purposes and it includes touch devices, with 3G and Wi-Fi connection.

At the time of writing, Series 40 includes different versions, listed on Table 1-4.

Table 1-4. List of Nokia S40 versions, release dates and device types since 2007

Version Name

Release dates

Device type


5th edition and 5th edition FP 1

2Q 2007 to 4Q 2009

Medium feature phones

Numeric keypad, 240×320 screen

5th edition Lite and 5th edition FP1 Lite

2Q 2007 to 4Q 2009

Feature phones

Numeric keypad, 128×160 screen

6th edition and 6th edition FP1

2Q 2009 to 3Q 2011

Feature and social phones

Numeric keypad, QWERTY keyboard and some small touch screens and some with WiFi support

6th edition Lite

2Q 2010 to 2Q 2012

Feature phones

Numeric keypad, 128×160 screen

Developer Platform 1.x

2Q 2010 to 1Q 2012

Social phones

Numeric keypad or QWERTY keyboard, WiFi

Developer Platform 2.0

From 2Q 2012

Social phones

Full touch devices, WiFi

Every edition has between 5 and 40 devices on the market today and we can safely work with 5th edition and beyond. The best part is that Nokia guarantees us that development for each device in one series is the same.

All the Series 40 devices have a mobile browser and Java ME (Micro Edition)—formerly known as J2ME (Java 2 Micro Edition)—support. From the 3rd edition, they also support different versions of Adobe Flash Lite.

Latest Series 40 devices includes a full 3” touch screen, Wi-Fi access, video streaming and web browsing in the social phone market. In this case the Nokia Asha 306.
Figure 1-7. Latest Series 40 devices includes a full 3” touch screen, Wi-Fi access, video streaming and web browsing in the social phone market. In this case the Nokia Asha 306.

The platform now has an application store (Nokia Store) and it has a modern web browser. We can also create HTML5 native webapps for these devices as we are going to see later in this book.


Series 60 (S60) began as the smartphone line from Nokia using Symbian as the operating system. Today these devices are closer to the high-end category, but the limit is not clear. The Symbian company was formed by a group of manufacturers including Nokia, Ericsson, and Motorola. Later, Samsung and Sony Ericsson were added to the member list. For many years Nokia has been the leading company using the Symbian platform, but there was some Samsung, Sony Ericsson, and Motorola Symbian-based devices on the market.

This is history, though. In 2008, after the launching of Android as an open source operating system, Nokia made a decision: it bought 100% of Symbian, Ltd. from all the other manufacturers and created the Symbian Foundation to migrate the Symbian operating system to open source. At the end of 2010, Nokia decided to close the Foundation and now Symbian is 100% property of Nokia. A few months later and after lot of criticism of how Symbian was evolving to compete with Android and iOS, Nokia did a 360 degree turn making an arrangement with Microsoft to use Windows Phone as the main smartphone platform for Nokia’s future devices replacing Symbian in a couple of years.

In 2012 Nokia is delivering both Symbian and Windows Phone devices and in the following years it’s unclear if Symbian is going to exist or not. The fact is that today there are millions of Symbian devices on the market right now and –even if their market share is decreasing- we will have Symbian for a couple of years. If you are in United States, maybe you are thinking I’m crazy. In the US, Symbian was never a massive platform, but a very different perspective you can see in Europe, Asia and Latin America.

Talking about Symbian devices from Nokia, the platform was divided into different editions under the name S60, from 1st edition to 5th edition. After that, the platform was renamed to Symbian platform and Nokia did not use the S60 name anymore. Today in the market, we can found Symbian devices under the version listed in Table 1-5.

Table 1-5. List of Symbian smartphone platform versions available since 2008

Version Name

Released on

Input type

Update ability

S60 3rd edition FP2

1Q 2008 – 2Q 2011

Numeric Keypad and QWERTY keyboard, no touch devices

No updates

S60 5th edition

4Q 2008 – 3Q 2011

Full touch devices, no keyboard

No updates


2Q 2010

Full touch devices with optional QWERTY keyboard

No updates

Symbian Anna

2Q 2011

Full touch devices with optional QWERTY keyboard

From Symbian^3

Symbian Belle

3Q 2011

Full touch devices with optional QWERTY keyboard

From Symbian^3 and Anna

Symbian Belle FP1

1Q 2012

Full touch devices with optional QWERTY keyboard

Only for some devices

Symbian Belle Refresh

3Q 2012

Full touch devices with optional QWERTY keyboard

Only for some devices


There isn’t a 4th edition in Nokia’s Series 40. Why is this? Nokia has a lot of market share in Asia, and in China, 4 is considered a bad-luck number (like the number 13 in the Western world) because it is pronounced “si,” similar to “death” in Chinese.

All Symbian devices include a camera, a mobile browser, multitasking support, and a numeric or QWERTY keyboard. From 5th edition and all the newer devices has touch support and the ability to upgrade to newer versions of the operating system. For example, the Nokia N8 came originally in 2010 with Symbian^3 and it has received free Over-the-Air upgrades to Symbian Anna in 2011 and to Symbian Belle in 2012.

Every Symbian device has a WebKit-based browser that allows the devices to browse almost any website on the Internet, including Flash-based sites like YouTube thanks to Flash Lite.


Nokia had created a new platform to replace Symbian, called Maemo. It’s a Linux-based operating system designed for small netbooks or devices with full web browsing support. In 2010, Nokia’s Maemo merged with Intel’s Moblin OS, creating the MeeGo OS. While Nokia was working in MeeGo as the replacement for smartphones, they’ve moved to Windows Phone so the MeeGo smartphones project was cancelled inside Nokia.

Before that, one device was released to the market, the Nokia N9 –sold in Europe and Latin America at the end of 2011- being the first and last device of its kind. To be honest, I have a Nokia N9 and the Linux-based operating system looks really great and Nokia has received mixed criticism about discarding this great platform.

After Nokia discarding MeeGo on its roadmap, Intel was looking for a new partner to continue the project and it seems that Samsung was the first interested and they have both created a new project called Tizen as the evolution of some parts of MeeGo in conjunction with other projects from Samsung.

At the same time, a new company appeared in Finland formed by ex-Nokia employees with the goal of continuing MeeGo devices. The company is called Jolla and their version of the MeeGo operating system is called SailFish OS. More information available at


Research in Motion (RIM) is the Canadian manufacturer of the BlackBerry devices, mobile devices focused on being “always connected” with push technologies that were primarily used by corporate users who need to remain connected to intranets and corporate networks and then appeared in new markets, such as teenagers and instant messaging fans. RIM calls all its devices “smartphones” but some of them are not always being considered in that category on some analysis.


In following chapters, we will cover all the tools, SDKs, and emulators available from each manufacturer to make our lives as web developers easier.

For years, RIM had few devices aimed at the mass market, so most of them have QWERTY keyboards and were not designed for gaming originally. Many of them have proprietary input devices, like a scroll wheel or a touchpad; some touch-enabled devices have also been launched in the last few years giving users more multimedia and gaming support. All BlackBerry smartphones until 2012 had the BlackBerry OS, a proprietary operating system compatible with Java ME with extensions, and, of course, a mobile browser. We can categorize the devices by operating system version. The versions available on the market at 2012 are 4.7, 5.0, 6.0, 7.0, 7.1 and the new BB10 platform. 4.7 and 5.0 should be considered legacy platforms; however there are still some old devices on some markets working with these more than three years old versions.

All the BlackBerry devices supports AppWorld, the application store.

The PlayBook tablet

In 2011 RIM has released its first tablet, the BlackBerry PlayBook, a 7” device with a new operating system, Tablet OS, derived from QNX, a Unix-based real time operating system. This new operating system was prepared from the ground to compete with iOS and Android with new and modern features, including multitouch, a modern web browser, multitasking and even Flash Player and AIR support.

In 2012, Tablet OS 2.0 appeared on the market and every device is upgradable to the latest BB10 operating system. In 2012, a 4G tablet version was also released.

The distribution has never reached iPad or Android tablet levels and the future of the platform is still uncertain.

The BlackBerry PlayBook, including the Tablet OS was the origin of the new BB10 platform coming also to smartphones.
Figure 1-8. The BlackBerry PlayBook, including the Tablet OS was the origin of the new BB10 platform coming also to smartphones.

BlackBerry 10: the reborn

Starting in 2013 RIM is changing fully its smartphone platform in favor of the same PlayBook QNX-based operating system, adapted to the phone layout. This new platform is called BlackBerry 10 (BB10) and will include both the phones and the tablets from RIM. BB10 is not compatible with the previous RIM OS versions –until version 7.1- and all the native applications must be developed using HTML5 or C++ using the Qt framework and a UI layer called Cascades. Adobe AIR (Flash) and Android Java applications are also compatible. Yes, it’s not a mistake. Tablet OS 2.0 on the PlayBook and BB10 on both tablets and phones support Android Java applications through an invisible virtual machine.

BlackBerry 10 platforms starts with full-touch devices known as Z10, followed by a square-screen device with QWERTY keyboard known as X10.


Samsung has many devices on the market, most of which are divided into three different series: feature phones with a proprietary operating system, social devices with Bada and smartphones with Android. From 2013, Samsung is also delivering devices with the new Linux-based Tizen operating system (partially based on MeeGo with Intel support).

Samsung’s native devices are low- and mid-end mobile devices with a proprietary OS including a browser and Java ME support, and typically a camera and a music player.

Bada is a mobile operating system managed completely by Android released in 2010 optimized for mid-end devices to offer a touch interface without the need of hi-end hardware. It includes a modern browser and native application installation support through its store: Samsung Apps.

On the smartphone layer, Samsung is offering Android- and Windows Phone-based devices at the time of this writing, and Tizen-based devices from 2013.


Samsung Tizen-based devices support first class citizen HTML5 apps and Android apps through an application compatibility layer.

Prior to 2010, the smartphones and high-end devices were divided into two categories by operating system—Symbian and Windows Mobile—each having its own set of features. While delivering some Windows Phone devices using mostly the Omnia series, Samsung committed its smartphone and tablet platform to Android and it has created different series, including the Galaxy Series, with devices such as Galaxy SIII or Galaxy Tab 10.1. Some of Android-based devices from Samsung include a UI-layer called TouchWiz providing a different experience from other vendor Android-based devices.

Android devices from Samsung support both the Google Play Store and the Samsung Apps store for application distribution.

Sony Mobile

Ericsson built many mobile phones in the 1990s, and in 2001 it merged with Sony and created the Sony Ericsson company. Sony Ericsson produced a range of low- and mid-end devices and a couple of smartphones including the Xperia series. In 2012 Sony became the complete owner of the company and Ericsson was removed from the name, converting the company into Sony Mobile.

Sony Mobile, like Samsung, has decided to offer devices with different operating systems. It offers low- and mid-end devices using a proprietary operating system, as well as Windows Phone devices and Android devices. Before 2010, Sony Ericsson also delivered some Symbian and Windows Mobile devices to the market.

In the smartphone categories, both Android and Windows Phone devices are supported and the high-end series using Android is called Xperia, including Xperia Play a PlayStation-certified phone optimized for gaming. Sony has also entered the tablet market with the Android-based devices Sony Tablet S and Sony Tablet P.

Motorola Mobililty

For many years, Motorola has been a leading manufacturer of low- and mid-end devices. Motorola’s devices were the first mobile devices on the market, and the company pioneered the clamshell design with the classic Motorola StarTac. Motorola’s mobile devices have traditionally used either a proprietary operating system (like the well-known Motorola v3), Symbian, Windows Mobile, or a Linux-based operating system the company created for its devices.

This situation created a very fragmented market for developers. Fortunately today,Motorola has changed its vision and has focused on a single solution for phones and tablets: Android. Motorola has also created some non-expensive mid-end devices with Android that can even be considered social devices instead of smartphones because the screen size, the hardware capabilities and performance are not enough to be compared with other smartphones.

Google acquired Motorola in 2011 and at the time of this writing it continues operations under the Motorola name and as a separate company.

Motorola is the company behind some successful Android-based series, such as the Droid series (known as Milestone outside the US) and the Xoom tablet.


It’s strange to see an online seller as Amazon in this list. Well, Amazon has become a mobile device manufacturer with its first Kindle e-book reader. Latest versions of the e-ink reader include a web browser and –while its not one of the most used browsers in the world- most users will use it as a backup browser.

However, Amazon appeared in the mobile market not with his book reader but with Kindle Fire, the first tablet from the company. The first edition is a 7” tablet with a full touch screen (not e-ink) using a customized version of Android and its own mobile browser. Kindle Fire hit the market in November, 2011 with a new price point for tablets: 199 US dollars, less than half of the iPad –or even other 7” Android-based tablets- price at the time.

While it’s difficult to know how many Kindle Fires are out there, Amazon reported millions of sales on the first weeks that can be more quantity than other non-iPad tablets reported.

In September, 2012 Amazon released the second generation of Kindle Fire tablets –known as Kindle Fire HD-, including a Wi-Fi and a 4G-enabled 8.9” screen version.


Barnes and Noble –the bookseller- has also released it’s own e-reader and tablet called Nook. The Nook Color and Nook Tablet are Android-based devices with its own UI and browser layer.

LG Mobile

LG Mobile has many feature phones, social devices and smartphones on the market today. Most are based on a proprietary OS with Java ME, Flash, and web support. However, LG also has devices with Android and Windows Phone on the market.


LG Mobile has released one of the first auto-stereoscopic 3D devices on the market, the LG Optimus 3D: an Android device with a 3D screen without the need of using glasses. While there is an SDK that works with the Android SDK there is no special 3D behavior that can be applied on webpages yet.


HTC has become very popular in the mobile market since it created the first and second Android devices in the world and the first Google phone, the Nexus One. But HTC doesn’t only create Android devices; it also produces a lot of Windows Phone ones. We can think of HTC devices as either Android devices or Windows devices; that’s the only distinction that’s needed.

HP and Palm

My first mobile was a Palm III, back in 1998. At that time, it was a great device for me. It was touch-enabled (used with a stylus), black and white, and very small. It was a revolution for me: I could install applications, read newspapers, and even program directly on the device with a Pascal for Palm interpreter. OK, the programming wasn’t the best experience, but the concept was really powerful.

USRobotics bought Palm Computing Inc. in 1995. At the time, it was the pioneer launching PDA devices. USRobotics later merged with 3Com, and as 3Com was dedicated to network cards and accessories, Palm Inc was created as a subsidiary. Palm Inc. was very successful, and other manufacturers (including IBM) created other devices licensing its Palm OS. In 1998, a couple of Palm’s directors left to create another company, HandSpring, which releases the Treo devices to the market. Half PDA and half mobile phone, they can be considered the first smartphones on the market.

A few years later, Palm decided to divide the company into a hardware manufacturer, palmOne, and an operating system developer, PalmSource. This idea didn’t work out: customers didn’t accept the palmOne trademark, so the company again acquired the Palm trademark and the operating system became the Garnet OS. In the meantime, Palm acquired HandSpring, so now we have Palm Treo devices.

In 2005, ACCESS (who also had other mobile technologies) acquired PalmSource and the operating system. Suddenly, the new-old Palm company made a difficult decision: it started to manufacture Treo devices with Windows Mobile, killing all hopes for the future of the Garnet OS (formerly Palm OS).

The Treo series was the only type of Palm device that survived in the mobile world, and BlackBerrys, the Nokia E Series, and other devices soon pushed Palm to the bottom of the market. In response, Palm created another operating system for mobile devices, aimed at being a web-oriented platform for iPhone-killer devices. webOS came to the market in 2009 with the first device, the Palm Pre. Other devices, such as the Palm Pixi, followed. Figure 1-11 shows the progression.

The company didn’t go so-well in the market, so in 2010, Palm was acquired by HP, who promised evolution of webOS and it even delivered in 2011 new smartphones, such as the HP Pre 3, the HP Veer and a new tablet, the HP TouchPad.

All this history, to tell you that in 2011 the TouchPad tablet sale was not a good deal for the company and HP after that decided to conclude its phone and tablet production and webOS became an obsolete mobile operating system. Beginning in 2012, HP had decided to open source webOS becoming Open webOS and at the time of this writing there is no indication of who is going to use this operating system in the future. webOS is a powerful mobile operating system so as an open source solution it’s not too far from truth to believe that some tablets, smartphones or book readers will use this platform in the near future.

Firefox OS

Mozilla Foundation appeared later on the mobile world. Firefox started in the big market in 2011 for Android and MeeGo devices and it doesn’t have too much market share as today. However, they didn’t give up and they have created a new project originally called Boot2Gecko rebranded as Firefox OS on mid-2012 as a new web-based operating system for smartphones.

This new platform is an open source Android-kernel based platform based on the Gecko engine (the same that powers Firefox browser) optimized for mid-range hardware delivering HTML5 and web experiences with lots of rich APIs. The first agreement that leads this software project to a real implementation was with Telefónica.

Telefónica is the company behind many carriers in the world, including Movistar in Spain and dozens of countries in Latin America and O2 in United Kingdom and Germany. Telefónica has committed to create and deliver devices using Firefox OS called Open Web Devices. We can read more about this project in

Following Telefónica, Deutsche Telekom, Etisalat, Smart, Sprint, Telecom Italia and Telenor has announced the entrance to the Firefox OS project.

The idea is to offer non-expensive devices compared to iOS, Android and Windows Phone with a rich user interface and with an HTML5-based development platform.

Ubuntu for phones

Ubuntu for phones is a Linux-based mobile operating system presented at the beginning of 2013 with planned devices in 2014 based on the popular Ubuntu linux distribution and created by Canonical, the company behind Ubuntu support. The platform will support HTML5 and Qt native apps and includes a heavy gesture-based UI. You can find more information about this platform at

Chinese platforms

China usually has it’s own mobile platforms usually based on Android. We can mention here Baidu Yi, an Android-powered operating system for the chinese market and OPhone, a Linux-based operating system based on the original Android (even before Google bought it) used by the operator China Mobile.

Other Platforms

We’ve already covered almost 98% of the market. There are many other manufacturers, like Sanyo, Alcatel, Kyocera, ZTE, but they don’t have visible market share, and many of them produce devices based on platforms we’ve already discussed, like Windows Phone or Android. With the information I’ve shared with you in the last pages, I think you will be capable of understanding any new platform you can find on the market.

Smart TV Platforms

I know what you are thinking: my TV is not too mobile. Well, you are right. We are not going to talk too much about TVs in this book but it’s important to give them a mention. Why? Because interactive TV systems are using web technologies and most of them are imported from mobile operating systems. While TVs are not mobile they usually have similar web browsers and engines as mobile devices have. And mobile web developers usually are the first group of professional to call when a company needs a TV-based application.

At the time of this writing interactive TV platforms are divided in native platforms and set-top box platforms. The first group includes companies that are delivering the interactive platform with the TV itself and the last group is just a set-top box you can buy and attach to any HDMI-based TV.

As with smartphones and tablets, we can found low-end TVs and high-end TVs on the market changing radically the engine behind.

Interactive TV platforms include typically a web browser and native web or widget apps that can be attached to the TV home screen or even to a live channel to follow the video streaming. On the market we can find Android-based, Opera-based and custom-based TV platforms.


Some console platforms such as PlayStation 3 or Wii includes a web browser and they should be somehow considered if we are creating a website for TV.

If you want more information about smart TV web platforms, you can look at the following websites for developers:

Google TV:
Samsung Smart TV:
Philips NetTV:
LG NetCast:
Panasonic Viera Connect:
Opera TV platform:

While Apple has the Apple TV platform based on iOS, at the time of this writing there is no web browser and no application installation process on this platform.

Technical Information

After reading the previous section, you may be wondering where you will find information about all the individual devices on the market. What operating system does the Nokia Lumia 900 use? Does the BlackBerry PlayBook use the same browser as the smartphones? Which HTC devices use Android 4.0?

To get you closer to these answers, Table 1-6 lists the developer sites of all the major device manufacturers and platforms. Everyone has one, and almost all of them list the technical specifications of each of their devices. You can usually filter the devices by any characteristic, such as screen size, platform, operating system, or browser version. Sony Mobile’s developer site is shown in Figure 1-9.

Almost every manufacturer website for developers allows you to filter the devices by features, such as the browser used. This is the Sony Mobile Phone Gallery.
Figure 1-9. Almost every manufacturer website for developers allows you to filter the devices by features, such as the browser used. This is the Sony Mobile Phone Gallery.


If you are new to the mobile development ecosystem, it’s a good idea to register on all the developer websites—even operators’ ones, if they have one. You will receive updates about tools, documentation, and news. You will also have access to download tools and emulators.

The best content for your career. Discover unlimited learning on demand for around $1/day.