If you are reading this book, you are probably a web designer or a web developer, maybe a jQuery fan or a webapp developer. Before coding, we need to address the mobile ecosystem and where jQuery Mobile fits into it. Let’s do it.
The first question that you should be asking yourself is why does jQuery Mobile exist? Why do we need something special for mobile devices if there are plenty of mobile browsers rendering standard desktop websites?
To answer these questions, let me copy and paste some extracts from my other book Programming the Mobile Web (O’Reilly). By the way, I asked for permission from myself for doing that.
As the Web has moved onto mobile devices, developers have told themselves a lot of stories about what this means for their work. While some of those stories are true, others are misleading, confusing, or even dangerous.
I’ve heard this many times in the last few years, and it’s true. It’s really the same Web. Think about your life. You don’t have another email account just for your mobile. (Okay, I know some guys who do, but I don’t believe that’s typical.)
You read about the latest NBA game on your favorite site, perhaps ESPN; you don’t have a desktop news source and a different mobile news source. You really don’t want another social network for your mobile; you want to use the same Facebook or Twitter account as the one you used on your desktop. It was painful enough creating your friends list on your desktop, you’ve already ignored many people…you don’t want to have to do all that work again on your mobile.
So, yes…it’s the same Web. However, when developing for the mobile web we are targeting very, very different devices. The most obvious difference is the screen size, and yes, that will be our first problem. But there are many other not-so-obvious differences. One issue is that the contexts in which we use our mobile devices are often extremely different from where and how we use our comfortable desktops or even our laptops and netbooks.
Don’t get me wrong—this doesn’t mean that, as developers, we need to create two, three, or dozens of versions duplicating our work. This is where jQuery Mobile comes to the rescue.
Almost every smartphone on the market today—for example, the iPhone and Android-based devices—can read and display full desktop websites. Yes, this is true. Users want the same experience on the mobile web as they have on their desktops. Yes, this is also true. Some statistics even indicate that users tend to choose web versions over mobile versions when using a smartphone. However, is this because we really love zooming in and out, scrolling and crawling around for the information we want, or is it because the mobile versions are really awful and don’t offer the right user experience? I’ve seen a lot of mobile sites consisting of nothing but a logo and a couple of text links. My smartphone wants more!
As we will see, there are techniques that allow us to create only one file but still provide different experiences on a variety of devices, including desktop, mobile, TV, and game consoles. This vision is called “One Web.” Today, there are a lot of mobile devices with very low connection speeds and limited resources—non-smartphones—that, in theory, can read and parse any file, but will not provide the best user experience and will have compatibility and performance problems if we deliver the same document we would for the desktop. Therefore, One Web remains a goal for the future. A little additional work is still required to provide the right user experience for each mobile device, but there are techniques that can be applied to reduce the work required and avoid code and data duplication.
This is the other fast-food way to think about the mobile web. Today, there are more than 3,000 mobile devices on the market, with almost 50 different browsers (actually, more than 500 different browsers if we separate them by version number). Creating one HTML file as your mobile website will be a very unsuccessful project. In addition, doing so contributes to the belief that the mobile web is not useful.
Frequently mobile webapps also make use of HTML5 features, such as offline or geolocation access, to provide a better experience. Geolocation is not an official part of the HTML5 specification, but a W3C API of its own; however, it is often mentioned under the HTML5 umbrella.
A webapp can be implemented in many ways (as shown in Figure 1-1) including:
Accessed from the browser
Installed as a full-screen webapp
As an installed webapp via a package officially implemented by vendors (sometimes called widgets)
As an installed webapp embedded in a native application, commonly known as hybrid
We will cover how to create these webapps in the rest of the book. For more in-depth information, just cross the street to my other book: Programming the Mobile Web (O’Reilly).
A webapp typically generates new challenges for web designers and developers, such as loading views instead of pages, maintaining a two-way navigation between views, and creating rich controls specifically for touch devices.
If you read the last few pages (and I’m pretty confident you did), you are aware that mobile web design and development presents new challenges for us. We need to create webapps that are more than simple websites; there are too many devices out there with different browser compatibilities; and there are also too many libraries trying to solve the same problem with mixed community and device support.
That is why jQuery Mobile was created: to help designers and developers create mobile web experiences easily, and for those experiences to be multiplatform, customizable, and with unobtrusive code.
The extensive worldwide jQuery community also provides a great opportunity for the framework’s future.
The framework has received official sponsorship and support from many of the biggest companies in this area, including the following:
According to an official note at http://www.jquerymobile.com:
jQuery Mobile is a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
To understand jQuery Mobile, it is very important to know what it is not.
To use jQuery Mobile, you need to include the typical jQuery framework. It is not a replacement; it is a UI layer on top of jQuery.
You can create the whole mobile experience with jQuery Mobile but you will need some additional work to compile it as native apps. We will see how, why, and when to do this in the next chapters.
However, it covers solutions for most of them. For the others, well…I have to convince you to read my other book somehow.
jQuery Mobile is a framework that delivers webapp experiences to mobile and tablet devices, mainly with touch interfaces, effortlessly, across multiple platforms, and using only HTML5 standard code. A jQuery Mobile app looks like Figure 1-2.
jQuery Mobile is comparable to jQuery UI on the desktop side: it’s just a UI framework. The name (without any UI inside) leaves you to wonder whether it’s a core framework; but I believe the decision was made to take advantage of the power of the jQuery trademark inside the designer and developer world.
If you want to participate in the development, you can provide patches, fix bugs, participate in the discussion, and work over the active live code on http://jquerymobile.com/contribute.
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.
Low-end mobile devices
Mid- and high-end mobile devices, also known as social devices
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 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.
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.
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:
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.
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:
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.
|Operating system||Creator||Browser included||Other browsers|
Opera Mini and pseudo-browsers
Firefox, Opera Mini, Amazon Silk, Opera Mobile
Opera Mini, Opera Mobile
webOS / Open webOS
HP (formerly Palm)
Micro Browser/Nokia Browser
Tablet OS 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 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:
Safari for iPhone, iPod Touch, and iPad from iOS 3.2
Android Browser phones and tablets
BlackBerry Browser for smartphones from 5.0 and for tablets
Nokia Browser for touch devices
webOS Browser from webOS 1.4
Micro Browser and Nokia Browser (included in Nokia N9)
Internet Explorer from Windows Phone/Mobile 6.5 and Windows Phone 7.0
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
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.
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.
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/.
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.
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.
Browser has an enhanced experience but without AJAX navigation features.
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.
I know most web designers and developers panic about HTML5 and CSS3. Before saying anything about it: don’t worry, jQuery Mobile will make everything for you. Therefore, you don’t need to know HTML5 or CSS3 to work with this framework. I encourage you to learn them regardless. You will be able to accomplish much more knowing these new standards, but that is for a later discussion.
This book is not intended to teach you HTML5 or CSS3, but it is important to understand some things about them. Many mobile browsers, mainly inside smartphones and tablets, support HTML5, CSS3, and other APIs.
I can talk for hours about HTML5, including its history and what it has to offer to the mobile space.
jQuery Mobile uses many of HTML5 features to provide a great and fast experience on mobile browsers. That does not mean that the browser needs to support HTML5 as a whole. In fact, many old browsers still support some HTML5 markup even without knowing its existence. jQuery Mobile uses CSS3 a lot, when possible, for animations, gradients, effects, and UI rendering.
To further arouse your curiosity, with HTML5, CSS3, and other modern techniques, you can provide, with or without a jQuery Mobile experience, the following features:
Accelerometer and gyroscope support
2D and 3D transformations
Gradients and visual effects
Viewport management (for zooming support inside the browser)
Webapp installation metadata
Integration with native applications
Graphic drawing (vector and bitmap)
Custom font support
There are several samples and links regarding these features on my blog, http://www.mobilexweb.com/.
Cross platform, cross device, and cross browser
UI optimized for touch devices
Themeable and customizable design
AJAX calls automatically to load dynamic content
Built on the well-known and supported jQuery core
Lightweight size, 12Kb compressed
We’ve already discussed some of these features. Let’s deeply analyze others.
I know you are hungry: you need to see some code. Here you have it. jQuery Mobile creates webapps from standard and semantic HTML5, perfectly suitable for search engine optimization (SEO) and web performance optimization (WPO) purposes:
Be patient, we will start analyzing the jQuery code in the following chapters.
Progressive enhancement is a simple but very powerful technique used in web design that defines layers of compatibility that allow any user to access the basic content, services, and functionality of a website, while providing an enhanced experience for browsers with better support of standards. jQuery Mobile is totally built using this technique.
The term progressive enhancement was coined by Steven Champeon in 2003 (http://www.hesketh.com), and while this approach wasn’t defined for the mobile web specifically, it is perfect for mobile web design.
Progressive enhancement has the following core principles:
Basic content is accessible to all browsers.
Basic functionality is accessible to all browsers.
Semantic markup contains all content.
Enhanced layout is provided by externally linked CSS.
End user browser preferences are respected.
Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed, and edited, all users can have equal access to information and functionality.
Web accessibility inside mobile browsers has just begun; however, jQuery Mobile is now fully compatible with W3C’s WAI-ARIA specification on compatible browsers (http://www.w3.org/TR/wai-aria/). At the time of this writing, only iOS 4.0 or higher is compatible with this specification with the feature called VoiceOver.
We have already mentioned that a jQuery Mobile webapp will work on almost every modern desktop browser. However, it would be better if we could test them in a more accurate environment (see Figure 1-8).
To test the mobile webapp in different environments, we can use:
Lot of friends
The most useful tools for our work will be emulators and simulators. Generally speaking, an emulator is a piece of software that translates compiled code from an original architecture to the platform where it is running. It allows us to run an operating system and applications on another operating system. In the mobile development world, an emulator is a desktop application that emulates mobile device hardware and operating systems, allowing us to test and debug our applications and see how they are working. The browser, and even the operating system, is not aware that it is running on an emulator, so we can execute the same code as on the real device.
We should also add to our mobile development environment classic tools for project and configuration management, such as bug tracking, version control, and project management tools. Figure 1-8 shows how you can test jQuery Mobile accessibility from an iPhone, iPod, or iPad with iOS 4.0 or higher. Go to Settings → General → Accessibility and activate VoiceOver. Now close your eyes and browse your website using your fingers and ears.
Figure 1-9 shows how an Android Emulator provides a full Android OS on your desktop with images for different devices including tablets, such as Galaxy Tab or Nook Color.
Emulators are created by manufacturers and offered to developers for free, either standalone or bundled with the Software Development Kit (SDK) for native development.
There are also operating system emulators that don’t represent any real device hardware but rather the operating system as a whole. These exist for Windows Mobile and Android.
On the other hand, a simulator is a less complex application that simulates some of the behavior of a device, but does not emulate hardware and does not work over the real operating system. These tools are simpler and less useful than emulators. A simulator may be created by the device manufacturer or by some other company offering a simulation environment for developers. In mobile browsing, there are simulators with pixel-level simulation, and others that neither create a skin over a typical desktop browser (e.g., Firefox or Safari) with real typography nor render engine simulation. Figure 1-10 shows how the iOS Simulator provides you with an iPad for free inside your Mac. The same can happen for other tablets, also with Windows or Linux desktop machines.
Even with emulators, the final rendering and performance will not be exactly the same as in the real device. Therefore, real device testing is a good practice, even if we are going to do it only on some key devices.
For mobile web development, we will find emulators from Nokia, Symbian, BlackBerry, Android, webOS, and Windows Mobile and simulators from Apple for the iPhone and iPad (though only for Mac OS X).
Some browser-based emulators (that finally work on many different platforms), like the Opera Mobile emulator, are also available.
Table 1-2 shows the available emulators and simulators for download.
Android Browser and downloadable
HP webOS Emulator
Nokia Symbian Emulators
Internal Browser and downloadable
Windows Phone Emulator
Nokia Series 40 Emulators
S40, Ovi Browser, Opera Mini
BB Browser, downloadable
BlackBerry PlayBook Simulator
Opera Mobile Emulator
Opera Mini Simulator
Online Browser Emulator
Adobe Device Central
An up-to-date list of emulator download URLs can be found at http://www.mobilexweb.com/emulators.
A remote lab is a web service that allows us to use a real device remotely without being physically in the same place. It is a simple but very powerful solution that gives us access to thousands of real devices, connected to real networks all over the world, with a single click. You can think of it as a remote desktop for mobile phones.
The most useful services on the market are the following:
For updated information on this topic, go to http://www.mobilexweb.com/go/labs.