O'Reilly logo

jQuery Mobile: Up and Running by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The Mobile and Tablet World

People do not browse the Web only from their desktop. Now we have very different devices with different screen sizes, input mechanisms, and even new features from old friends such as HTML, JavaScript, and CSS.

Mobile devices are here. There is no doubt—there are more than five billion devices worldwide and counting. Tablets are also coming in a big way, with millions in the market.

Device Categories

Right now, we can divide mobile devices into the following categories:

  • Mobile phones

  • Low-end mobile devices

  • Mid- and high-end mobile devices, also known as social devices

  • Smartphones

  • Tablets

Mobile phones

Okay, 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 right now.

In a couple of years, because of device recycling and evolving services provided by carriers and manufactures, such phones will probably not be on the market anymore.

Low-end mobile devices

Low-end mobile devices have a great advantage: they have web support. They typically have a very basic browser, but this is the gross market. Perhaps they aren’t the most heavy Internet users today, 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 Ericsson have devices for this market. They typically do not have touch support, have limited memory, and include only a very basic camera and a basic music player.

Mid-end/high-end mobile devices

This is the mass-market option for a decent mobile web experience. Mid-end devices maintain the balance between a good user experience and moderate cost. In recent years, this category was also known as social devices, meaning that the users access social sites, such as Facebook or Twitter via the mobile web.

In this category, devices typically offer a medium-sized screen, basic HTML-browser support, sometimes 3G, a decent camera, a music player, games, sometimes touch, and application support. The big difference between these and smartphones 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. Starting in 2011, many of these devices include WLAN (WiFi), as we can see in Figure 1-3.

The Nokia X3-02 Touch and Type: a mid-end touch device, with numeric keypad and WiFi

Figure 1-3. The Nokia X3-02 Touch and Type: a mid-end touch device, with numeric keypad and WiFi

Smartphones

There are dozens of smartphone devices on the market, including iPhone, Android-based devices, webOS, Symbian, BlackBerry, and Windows Phone (Figure 1-4). This is the most difficult category to define. Why aren’t some mid-end and high-end 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.

Typically when you buy a smartphone, you sign up for a one- or two-year contract with a flat-rate data plan. A smartphone, as defined today, has a multitasking identifiable operating system, a modern HTML5 browser, wireless LAN (WLAN, also known as WiFi) and 3G 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

  • TV out

  • Bluetooth

  • Touch support

  • 3D video acceleration

  • Accelerometer

A sampling of smartphone devices

Figure 1-4. A sampling of smartphone devices

Tip

Some multimedia devices qualify as smartphones for us web creators, but they don’t have a phone feature. On this list are the Apple iPod Touch and the Sony PlayStation Portable (PSP). The only difference from tablets is their screen size, less than three inches.

Tablets

A tablet is a device with a large screen (between 6 and 11 inches), a full HTML5 browser, WLAN connection (WiFi), sometimes 3G, touch support, and all the other features that we can find on a smartphone.

In this category, we can find many devices, including the following:

  • Apple iPad

  • Samsung Galaxy Tab

  • BlackBerry PlayBook

  • Barnes and Noble Nook Color

  • Motorola Xoom

  • LG Optimus Pad

  • Amazon Fire

  • Sony S1 and S2

Operating Systems and Browsers

This book is not intended to delve deeply into the mobile ecosystem. There is a detailed list of operating systems, platforms, and browsers in Programming the Mobile Web (O’Reilly). However, if we are going to create mobile web experiences, we need to at least know what we are talking about.

In the mobile world, we can divide the operating systems in two main groups: identifiable operating systems and proprietary ones. In the latter group, we will find mainly phones, low- and mid-end devices.

With the identifiable operating systems, we will be more interested in which OS a device has than its brand and model. I mean, we are not going to develop a webapp for the Samsung Galaxy; we are going to develop a webapp for Android devices. The iPhone may be an exception to this rule, because it is a platform of its own, having as of this writing only one device: the iPhone. (Different versions of the device are just that; for web developers there are no huge differences between an iPhone 4 and an iPhone 3GS.)

Table 1-1 lists the operating systems we can find on today’s market in smartphones and tablets.

Table 1-1. Operating systems and browsers available in smartphones, social devices, and tablets

Operating systemCreatorBrowser includedOther browsers

iOS

Apple

Safari

Opera Mini and pseudo-browsers

Android

Google

Android Browser

Firefox, Opera Mini, Amazon Silk, Opera Mobile

Symbian

Nokia

Symbian Browser

Opera Mini, Opera Mobile

webOS / Open webOS

HP (formerly Palm)

webOS Browser

Windows Phone

Microsoft

Internet Explorer

Windows Mobile

Microsoft

Internet Explorer

Opera Mobile

MeeGo

Nokia

Micro Browser/Nokia Browser

Firefox

BlackBerry OS

RIM

BlackBerry Browser

Opera Mini

Tablet OS

RIM

Tablet OS Browser

S40

Nokia

Nokia Browser

Bada

Samsung

Samsung Browser

Every operating system has different versions, and some allow the user to update to a newer one. Every OS comes with an installed browser, but the user can install and use an alternative browser. Sometimes the manufacturer or the operator from whom the user bought the device installs or replaces the default browser with an alternative, such as Opera Mobile.

If we expand our browser research to low- and mid-end devices, we will find more than 20 other new browsers, including Ovi Browser, NetFront Browser, and Phantom Browser from LG. But that is not the target of jQuery Mobile right now.

In Programming the Mobile Web, you will find 20 pages with detailed information about browser types and features of each one.

jQuery Mobile Compatibility

jQuery Mobile is a framework intended for touch devices, including smartphones, tablets, and multimedia devices. The compatible list will change with time and as the framework continues to evolve, so it is difficult to publish a complete list here.

The jQuery Mobile 1.0 version is compatible with the following by-default browsers:

iOS

Safari for iPhone, iPod Touch, and iPad from iOS 3.2

Android OS

Android Browser phones and tablets

BlackBerry OS

BlackBerry Browser for smartphones from 5.0 and for tablets

Symbian

Nokia Browser for touch devices

webOS

webOS Browser from webOS 1.4

Bada

Bada Browser

MeeGo

Micro Browser and Nokia Browser (included in Nokia N9)

Windows Phone

Internet Explorer from Windows Phone/Mobile 6.5 and Windows Phone 7.0

Kindle

Browser from Kindle 3

jQuery Mobile is also compatible with the following third-party browsers:

  • Opera Mini, fully supported from 5.0 on most devices

  • Opera Mobile, fully supported from 10.0 on most devices

  • Firefox Mobile

This compatibility list just gives you some information to start with. The compatibility is far more complex than this list because we can cross multiple operating system versions with multiple browser versions with different results. Even newer devices not listed here will be compatible with the library if they support the minimum features that the framework needs.

To simplify: jQuery Mobile will work on every browser with the capabilities to offer the experience that the framework provides. Any modern browser should be included in this list.

Tip

Many modern mobile browsers use a WebKit-based engine, like Safari or Chrome for desktop. Any modern WebKit-based mobile browser should be fully compatible with jQuery Mobile. Also Chrome, Firefox, Safari, Opera, and Internet Explorer for desktop are compatible with jQuery Mobile.

Mobile graded browser support

jQuery Mobile uses a table chart to define the compatibility of every device with this library (Figure 1-5). I would not try to enter in this categorization war if I were you. But you can check it if you want more information at http://jquerymobile.com/gbs/.

Tip

Many modern desktop browsers, such as Firefox, Google Chrome, Safari, or Internet Explorer, are compatible with jQuery Mobile too. Even if it is not intended for desktop applications, this ability will be useful for testing purposes. However, we will see later that installing an emulation environment will be useful.

I believe the compatibility is far more complex than this table, and for a typical web designer and developer it should be absolutely hidden. There are better ways to know if a feature is available in a mobile browser than trying to categorize each one of them. One solution is right in your hands: use jQuery Mobile.

jQuery Mobile maintains a list of browser compatibility on its website

Figure 1-5. jQuery Mobile maintains a list of browser compatibility on its website

GBS (Graded Browser Support) divides mobile browsers into three categories: A-grade, B-grade, and C-grade. In the jQuery Mobile world, here’s what these grades mean:

A-grade

A browser with CSS3 media queries capability. These browsers will be fully tested by the jQuery team. However, some features will be automatically disabled if the device does not support them. The framework provides a full experience with AJAX-based animations.

B-grade

Browser has an enhanced experience but without AJAX navigation features.

C-grade

A browser incompatible with jQuery Mobile. This browser will not receive any CSS or JavaScript code from the framework, so the user will see a plain HTML file with the content. We will see later in this book how to handle this situation.

PhoneGap and native development

If you look into the Mobile Graded Browser Support Table of jQuery Mobile, you will find PhoneGap as a browser. PhoneGap is not a browser; it’s a framework with which to create hybrids. That is: native applications with a webapp inside. PhoneGap is officially supported by jQuery in many platforms, such as iOS, Symbian, BlackBerry, Android, and webOS.

The great news is that you can use whatever hybrid framework you like; jQuery Mobile will work if it works for PhoneGap. That is because PhoneGap is not a browser by itself; it is just a framework using the native browser engine.

To make it simple: jQuery Mobile is compatible with the creation of native apps with HTML.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required