Getting started with jQuery Mobile

Note: You can follow the tutorial with any version of Dreamweaver or a text editor.

You probably have one in your pocket, or you may be talking to it, or you may be playing games on it—it's a smartphone. The category of smartphone seems to be quite broad—is it an Android phone, Apple iOS device, BlackBerry phone or something else? To give you a taste, here is a list of some mobile devices that are in the smartphone category:

• Apple iPhone/iPod Touch
• Google Android
• RIM BlackBerry/Playbook OS
• Nokia Symbian (retired, but still with over 1 billion users worldwide)
• HP/Palm WebOS
• Microsoft Window Phone 7

The challenge you have with such a vast number of different systems is fragmented support for standards. For example, Apple's latest iPhone has amazing support for HTML5 standards, whereas Symbian and Microsoft Phone Series currently have little to none. To allow you to effectively create websites for mobile devices, the jQuery community has been working on a framework you can leverage called jQuery Mobile. This article will introduce you to this new framework, which is still in alpha, and help you jumpstart your jQuery Mobile development skills.

Developing mobile websites is no longer a wish list item for the web design team—it's a reality. The adoption of mobile devices is growing at a rapid pace. According to a recent Gartner study, within the next two years you may well see more people coming to your website on a phone or tablet instead of using a traditional computer, with a potential 1.82 billion mobile devices in use by 2013.

The goal of jQuery Mobile is to allow the framework to run on as many mobile devices as possible. In the United States we have a primary focus on iOS and Android smartphones. However, outside of the United States, other carriers, such as Nokia, are dominant. To this end, jQuery Mobile will work on a broad set of devices. At the launch of jQuery Mobile, in September 2010, John Resig, the author of jQuery, revealed a chart that listed the most popular mobile operating systems (see Figure 1). For each system he assigned an A, B, or C, the letters determining if the importance of supporting the OS was High (A), Medium (B) or Low (C).

As an indication of how rapidly the mobile world is changing, this whole matrix will likely now be redrawn due to one radical change: Nokia is killing the Symbian Platform and replacing it with Windows Mobile Phone 7. In one move, Windows Mobile Phone 7 has gone from being irrelevant to a High (A) status.

To support your mobile development needs, jQuery Mobile employs a philosophy called progressive enhancement. At its roots, progressive enhancement means this: Start with static semantic HTML markup, which should work in every browser. Then add your behaviors and enhancements (bells and whistles) on top of that. This ensures that the content of your page and basic HTML functionality is still accessible to less capable browsers.

The challenge with mobile browsers is a real issue. On the one hand you have feature-rich browsers (such as Android web browsers, BlackBerry 6, and iOS Mobile Safari) that are all running variations of WebKit—a rendering engine that powers many web browsers such as Google Chrome and the desktop version of Apple's Safari. (WebKit knows nothing about loading things off of a network. It knows nothing about native OS events. It knows nothing about scrolling. Every OS, browser, or device vendor, needs to build a browser on top of this engine to provide these things.) Then you have the millions of phones running Nokia's Symbian or Windows Mobile 6 and earlier that have fragmented support web standards. To add to the challenge is that there are different versions of WebKit used in the different mobile OSes. The bottom line is that progressive enhancement is a model that allows your content to display on any of the supported mobile devices.

The first step to getting started using jQuery Mobile is to set up a web page. Inside of the HEAD element you will want to reference the jQuery Mobile CSS and JavaScript files:

As you can see from the script source files, jQuery Mobile is extending the core jQuery library. For you resource watchers out there, the current minified file size for jQuery Mobile is 12 Kb.

The links above point to the live CDN versions hosted on the jQuery servers. The CSS link also contains references to the graphic files you need. If you want to download and host the files locally you will need to go to the following Web address:
http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.zip

Download and expand the ZIP file. Within the file you will find compressed and uncompressed versions of the CSS and JavaScript files along with a subfolder containing ten images used by the CSS document.

You will need to use three basic areas of content on your web page when building your first jQuery Mobile site. The following is a suggested boilerplate markup you you can use for future projects:

A couple of things are worth pointing out in this template. The first is the use of the DIV element. With HTML5 so prevalent on Mobile devices why not use the newer HEADER, ARTICLE, SECTION, or FOOTER elements? Older Smartphone browsers do not understand the new HTML5 elements. In some cases, such as older versions of Internet Explorer on Windows Phones, there is a bug that requires you first to programmatically create a non-HTML element in the tag before it can be styled with CSS. The DIV tag is, however, universally supported.

You can save the Web page and test it in your web browser. The code is HTML and will work on your desktop. I recommend using Chrome to run your local testing when you want to validate that the HTML/JavaScript works correctly. For real quality testing you will need to run your mobile web pages on different mobile devices.

Creating pages in your mobile site using links

A difference between standard web pages and mobile web pages is the amount of content you can place on the screen. Yes, you can load the New York Times website onto your iPhone, but you need to pinch and zoom to read the content. A better solution is to reduce the clutter of the page down to the content you want to present.

A traditional website would have you create many different web pages with a small amount of content on each one. But when you are using jQuery here, you can tackle the problem of micro-content more efficiently.

Above you saw how you can create boilerplate page for jQuery Mobile. Let's take this a step further and create "pages" of content. A page can be structured as a DIV block in jQuery Mobile. Remove the content inside of the BODY elements using the boilerplate template above. You are going to add a menu that links to four different pages. The first page is a menu page with links (see Figure 3):

The important part of this block of HTML is the first DIV. Within the element are an ID and data-role properties:

The data-role defines the content within the DIV element as a "page." The term is slightly misleading as the "page" is really a panel or screen in the HTML code and not a separate page. data-role="page" instructs jQuery Mobile to build the visible content on the screen around the DIV elements. The ID allows you to link up to section using HREF links.

The menu page is the first page and will then be presented first in the browser. There are three additional "pages" you can add. They each have a different ID: Cars, Planes, Trains.

Test the page on your Android or iOS device. When you load the web page you will get three things:

• The menu loads as its own page (you can try to scroll up and down but you will not see anything else).
• When you select a link, the page will transition with an animation sequence as it moves to the new section.
• When you move away from the menu page a back button automatically appears in the top header DIV section.

Each of these DIV elements will load inside of the web browser and look like separate web pages. The movement between screens is fluid.

The recommendation of creating multiple screens of content on one page allows you to reduce the page load times that cause many mobile devices to appear slow. You can link to external web pages, however, with the following caveat: Links in jQuery Mobile are treated as Ajax calls. Links within a jQuery Mobile page take advantage of CSS Transitions to change the screens. When you want to link to a page outside of the application you are in you need to create a forcing action that creates a new document and replaces the current jQuery Mobile files. This is demonstrated with the following example:

You need to include the rel="external" property and value. This allows you to link to a web page outside of the local page links you have been using up to this point. However, jQuery Mobile goes one extra step. Instead of just treating external links as a link outside of your site, jQuery Mobile will apply the page transition animation. What this gives you is a unique one-up over other popular mobile frameworks. Instead of having all of your website content in one page, you can split up the content over several pages allowing you to build larger solutions.

Of course, links and pages are just one part of mobile web design. A second challenge many mobile web developers face is the explosion of apps. Unlike web pages, apps for Android, iOS, and other systems are built with complex technologies such as Objective-C, Java, and C#. These technologies allow developers to easily add menu tools, unique list and other controls, and components not found natively in HTML.

jQuery Mobile is currently shipping with a selection of components. The following components are included in the current alpha version:

• Pages
• Dialog boxes
• Toolbars
• Buttons
• Content formatting
• Form elements
• List views

Adding and changing a component is not too hard. If you know a little HTML, then you are good to go. Let's look at the page component as an example.

Adding headers and footers to the page

The boilerplate example above demonstrates how you can easily add toolbars such as headers and footers to your page. Toolbars are often the hardest to control when creating content for different screens. The challenge comes in placing content that dynamically scales to different screen sizes. For example, a header toolbar can contain both the header and a button (such as back button). Using jQuery Mobile, the header toolbar will allow you to add a title that stays in the center with a button always staying to the left or right side of the page no matter how large the screen.

The following snippet creates a header toolbar with two buttons (see Figure 4):

The position of the buttons is defined by the order of the content. The result is Mobile Web page with a centralized title and buttons on the left and right hand side that looks and works consistently across devices.

Headers and footers can also be customized into navigation tools. Interactive buttons can be added to a footer that will take you to sections of the screen. This is accomplished with a "navbar" data role. Below is the code for a navbar:

Again, as you can see with most of the jQuery Mobile code, the navbar is constructed of a simple HTML List wrapped in a DIV tag. Properties, such as the ui-btn-active can be set to identify a button that should be selected.

When you select a button and go to a second screen within the same page, jQuery Mobile is smart enough to automatically add a back button to the header. For example, the following HTML adds three screens in one HTML page. You have the main screen and two sample screens you can link to from the navbar. Add the code and see how the navigation automatically adds back buttons.

Remember to add the SCRIPT and CSS references for jQuery Mobile.

Making footers and headers persistent

A common user interface design technique is to keep the header at the top of the screen and footer at the bottom. You can use jQuery Mobile to accomplish this by simply adding data-position="fixed" to the header or footer. This will force the header to be flush with the top and the footer to be flush with the bottom, as in the following example (see Figure 5):

Now, without using custom Objective-C you can add fixed headers and footers to your pages.

Working with dialog boxes

The Page component also allows you to add custom CSS pop-up dialog boxes using the data-rel property. For example, the following will load a web page into pop-up dialog box:

Using this method allows you to load any custom message into your dialog box. You do need two sections to a dialog box when posting a dialog box in the same page. Interestingly, a dialog box is no different to a screen in jQuery Mobile. With this knowledge, you can add any type of HTML into a dialog box. The first section displays a link to the dialog box, as shown here:

You can see in the HREF for the "Open Dialog" button that there is a link to a local section. The following is a markup that will appear in the dialog box:

The inclusion of the footer is optional, but you must include the header. Without the header, the automatic inclusion of a close button will not appear.

Working with lists

There is a lot of data on the Web. Reams of it. Lists are effective tools you can use to manage large amounts of data. You have already used lists in a couple of the examples above but now it's time to get down dirty with them.

Here is a simple list using standard HTML:

In jQuery Mobile you can convert this simple list into a gorgeous, APP-like list by adding a listview role to the open UL tag. The data-role attribute will tell jQuery Mobile to redraw the list to look like and perform as if it were a native app:

That's it, just 20 characters and you have a formatted list.

Outside of the basic list, jQuery gives you the option to extend the core list. For example, the following will add dividers to the lists (see Figure 7):

You can add dividers by including the attribute data-divider to the opening LI element and including a special list item where you want your divider to appear (<li data-role="list-divider">Royal Family </li> ).

Data bubbles can also be added to each list item. In the following example the reign of each member of the British Royal Family is added to a bubble (see Figure 8):

An additional list type is a complex list where you can add links, images, and text within an list (LI) element. Here is an example:

This type of list is useful when you need to convey a lot of rich data. For instance, you may want to list of students in a class with their name, photo and GPA. The end result is that you have a scrolling list that looks complicated created only with HTML.

When you have completed developing your jQuery Mobile site you are left with one final task: deploying the files for the world to see.

At the end of the day, jQuery Mobile is only a collection of HTML, CSS, and JavaScript files. Deploying it is no different than deploying your standard HTML/CSS site. Using FTP or your preferred website management solution (such as Dreamweaver) you post the files to your web server. Be sure you post all of the supporting JavaScript, CSS, and image files.

When the files are on your server you can visit the site using a mobile device such as a BlackBerry, iPhone, Android, or Windows Phone.

Using the jQuery Mobile approach is making the assertion that the site will target smartphones. You may want to consider creating a completely separate mobile identity for your jQuery Mobile site if it is a secondary site to your main website. For example, your main site might be www.companyname.com whereas your jQuery Mobile site may be m.companyname.com.

There is no clear right or wrong way in how to differentiate a website that targets desktops versus a mobile site. The only right decision is to make sure you do have a mobile website to support your customers viewing experience.

A lot of work has clearly gone into the current alpha version of jQuery Mobile. If you have been waiting to jump into the mobile web design world then your wait is over. jQuery Mobile gives you a framework that would otherwise make mobile web development very difficult.

For more information about using jQuery Mobile, refer to the following:

• Explore how to use jQuery to make designing for mobile more efficient
• Using and customizing jQuery Mobile themes