Hour 21. Introducing Mobile Website Development

Mobile devices are the fastest growing development platform. Much of that development is geared toward making websites mobile friendly. It is much easier to implement and maintain a mobile website than it is to maintain a mobile application.

In this hour, you jump in to learn how jQuery—and especially the jQuery Mobile library—can help you create some clean, cool mobile web pages.

Mobile device network speeds are very close to traditional PCs.

Many mobile screen sizes are much larger than they used to be, especially in tablets.

Mobile processors, disk IO, and available memory is no longer such a limiting factor.

There are more smart mobile devices in use than PCs.

Those factors have gotten rid of a lot of the old problems and requirements for mobile solutions. However, they have created a few new ones:

Mobile screen sizes vary wildly. You can’t just define a small mobile version of your website.

People are using mobile devices for many tasks, and they now expect the same level of features and performance as traditional apps and web pages. At the same time, they want the interfaces to their mobile tools to be clean and uncluttered.

With the wild popularity of social tools such as Twitter and Facebook, users expect their social world to follow along with them into as many places as possible.

People would often rather have mobile sites than mobile apps so that their links, profile information, and user experience remains consistent.

Based on those new problems, jQuery Mobile could become your new best friend in the upcoming shifts.

You can use the following JavaScript and regex statement to parse the navigator.userAgent value to determine whether a user is coming into your website on a mobile device:

Click here to view code image

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { }

That information is useful, but you also need to check the screen size of the device. Does it have a 3-inch, 4-inch, or 11-inch screen? There is a big difference. If you design your website for a 3- or 4-inch screen, but the user comes in on an 11-inch screen, it is awkward and frustrating. The same is true in reverse. A good idea is to get the screen size using screen.height and screen.width in JavaScript and then adjust your pages dynamically to support that size. For example:

Click here to view code image

$("#contentBody").width(screen.width).height(screen.height);

The network bandwidth is important because it may limit the amount of data you want to send. This is another situation where you can’t err on the side of caution. If you send low-resolution images to a device where the user expects high resolution, your website looks lousy. If you send high-res images to slow devices, your website is too slow. If you are working with large data sizes, it is a good idea to time some of the AJAX requests to the server and back to determine how fast the user’s device is.

Hiding some of the complexities of resizing page elements to a wide array of mobile devices.

Providing simple UI components with mobile event interactions already built in to them.

JavaScript and jQuery are common and well-developed languages that are based on proven concepts.

Developing a mobile web app, especially with jQuery Mobile, is so simple to do and does not require any installation on the user’s part. That is why they are becoming more and more popular.

When you download the jQuery Mobile library, you will get a zip. Inside the zip file are three main components that you need to put where they can be loaded by your mobile web pages. They are as follows:

js files—There will be a jquery.moble.###.js as well as a minified version. This is the main library file, and one of these needs to be placed in a location where you can add it to your project files in a <script> tag.

css files—There will be jquery.mobile.###.css, jquery.mobile.###.structure.css, and jquery.mobile.###.theme.css files, as well as their minified forms. This is all the styling code and should be placed in the same location as the jquery.moble.###.js file.

images folder—This folder contains the images and icons used by jQuery Mobile to style the elements. This should also be placed in the same location as the jquery.moble.###.js file.

After the library is downloaded, you can add it to your web pages in the header file by adding the <script> tag to load the JS file and a <link> tag to load the CSS file. For example, the following code loads the jQuery library first because it is required by jQuery Mobile and then loads the jQuery Mobile JS and CSS files:

Click here to view code image

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-custom.min.js"></script>
<link rel="stylesheet" href="../js/css/jquery.mobile-custom.min.css" />

To access the jQuery Mobile ThemeRoller, follow these steps:

1. Open the following URL in your browser:

http://jquerymobile.com/themeroller/

2. From the Global tab, shown in Figure 21.1, you can set the global values.

3. Select the theme letters to customize the alternative theme swatches.

4. When you are finished, click the Download Theme Zip File button. This takes you back to the main download page.

5. Click the Download button to download the customized jQuery Mobile files.

The way the jQuery Mobile builds on the HTML framework is by adding data attributes to the HTML elements. The data attributes all begin with data- and end with some slightly descriptive word of what the attribute means. As those attributes are processed by the jQuery Mobile library, additional methods, events, styles, and values that fit the mobile needs are attached to the element. You will see this extensively in the examples to come.

Table 21.1 lists many of the attributes along with some of the values that they support. The table is a good way to visualize how the data attribute method works and can act as a reference.

Click here to view code image

<div data-role="header" data-theme="b"><h1>Teach</h1></div>

For example, to add a tap handler to an element #myImage, you would use the following:

Click here to view code image

$("#myImage").on("tap", function() { });

Table 21.2 lists some of the mobile events and describes their purpose.

Specifically, you need to set the content="width=device-width, initial-scale=1" as shown next. These settings force the device’s browser to render the web page width at exactly the number of pixels available on the device.

Click here to view code image

<meta name="viewport" content="width=device-width, initial-scale=1">

Without specifying the viewport setting, the mobile page is at a much higher size than the screen width, making the page look very small. The user will still be able to zoom in on the web page.

Occasionally, you might want to override the default settings. To do this, you will need to add a mobileinit event handler to the document object before loading the jQuery mobile library, and then add your default override code in that handler function.

Use the mobileinit handler to change the default theme swatches because that can’t be done on-the-fly after the library has been loaded. The following code shows an example of setting the default header and footer themes:

Click here to view code image

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
  $(document).bind( "mobileinit", function () {
    $.mobile.page.prototype.options.headerTheme = "b";
    $.mobile.page.prototype.options.footerTheme = "b";
  });
</script>
<script type="text/javascript" src="../js/jquery.mobile-custom.min.js"></script>

Notice that the init <script> is placed after jQuery is loaded, but before jQuery Mobile is loaded.

A. Yes, using PhoneGap. The PhoneGap platform allows you to build native phone apps using HTML5, CSS jQuery, and JavaScript. PhoneGap packages the web pages to run as a native application within the UIwebView or WebView on mobile devices.

2. What is the purpose of the viewport <meta> tag?

3. What mobile event is triggered when the user slides a finger horizontally across the touch screen on a mobile device?

2. To set the initial size and zoom of the mobile web page to match the screen size of the device.

3. swipe, swipeleft, or swiperight.