MW: jQuery Mobile – What You Need to Know

jQuery Mobile version 1.0 finally launched this past November. Don’t know if you heard about it, but if you are planning to do any mobile app or website development, it’s better to get started with it right now.

I’m sure you’ve heard about jQuery. So, its mobile version is pretty close to what you already are used to, but with a lot of enhancements for mobile screen events (like touching instead of click, and there is no hover) and browsers (this one is tricky since there are plenty of browsers and devices out there) and capabilities (pluggable components).

The crazy thing is how simple it is to initiate and build a fully working mobile site. Actually, we’ll be talking about concepts, tips, codes, and in the meantime you can build your own app, in no more than one hour. Yeah, noob to ninja in one hour, this is what you’ll get here :)

So, let’s rock!

jQuery Mobile’s Main Concept

Cross browsing, a nightmare that was coming back

Those who used to code anything between 2001 and 2008 (while < IE6 was pretty huge, and Firefox / Chrome were just the new kids on the browser block) faced the nightmare of cross-browser issues. I mean, if you think that putting a vendor prefix before CSS code is cross-browser, try to get things working well on IE5.5, IE6, Opera and Firefox without CSS / JS hacks.

That, dear Padawan, was crazy.

Back to 2010, mobile was getting bigger and bigger. So were the types of browsers out there. Each smart phone and tablet has its own capabilities and its own particularities. Try mixing that with touch oriented screens and a huge range of screen sizes. Sound familiar?

Then, the hero arrives

Credits: bizior (photo) & Rochester Oliveira (edit)

jQuery Mobile comes with a huge compatibility table, with lots of devices and platforms well covered. All you’ve got to do is include their libraries, and try to stop your jaw from hitting the floor when you see the amazing features.

Oh, and it’s not just about cross browsing. It also covers a lot of UI elements that are already standards out there. And if you want a little more customized look you can easily change that, without messing up functionality.

Awesomeness proven, let’s code!

Ok, now you know why this project is so great, let’s take a look at some of the overall effects, components, good practices and code that you may want to use.

Basic structure

Just to get started, let’s grab our files from jQuery’s CDN. We’ll need just 3 files:

jQuery Mobile stylesheet
jQuery JS
jQuery Mobile JS

So your code will look like:

 <!DOCTYPE html> <html> <head>         <title>Starter page</title>         <meta charset="utf-8" />     <meta name="viewport" content="width=device-width, initial-scale=1" />     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body>         <div data-role="page" id="home">                 <div data-role="header">                         <h1>Header</h1>                 </div>                 <div data-role="content">                         <p>Lorem ipsum</p>                 </div>                 <div data-role="footer">                         <h4>Footer</h4>                 </div>         </div> </body> </html>

As you may notice it uses HTML5 markup and data-* attributes to get things working. This snippet will output this (all tests done with iOS 5.0.1 @ iPod):

Important note, any “traditional” jQuery call should be placed before the call for mobile framework.

Basic UI components

jQuery Mobile uses data-* attributes to define UI components. Actually you just saw 4 of them above. Let’s see a small list of them and their correspondent data attribute:

data-role=”page” : you can set divs inside your HTML page to behave as pages. SO what we’ve done above is to create a page “home” inside our file
data-role=”header”: used to mark divs as top toolbars. You can set up data-position=”fixed” as well so it’ll behave as fixed toolbar
data-role=”content”: the main part of your website / app. Images, buttons, actions and all the magic happens here!
data-role=”footer”: defines a toolbar at the bottom of current page. May use data-position=”fixed” too so it’ll force to stay at the bottom of the screen
data-role=”button”: it’ll be useful together with elements. You may use also data-transition to define how it’ll load next page. Options: slide, slideup, slidedown, pop, fade, flip. Another cool thing is data-icon, which gives you a lot of default icons. You may also reduce its size using data-inline=”true”.
data-theme=”a/b/c/d/e”: Define color scheme used for elements.

Let’s wrap up all those attributes in a simple 2-page linking. Output:

Second page:

Code:

 <!DOCTYPE html> <html> <head>         <title>Starter page</title>         <meta charset="utf-8" />     <meta name="viewport" content="width=device-width, initial-scale=1" />     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body>         <div data-role="page" id="home" data-theme="b">                 <div data-role="header">                         <h1>Header</h1>                 </div>                 <div data-role="content">                         <p>Lorem ipsum</p>                          <p><a href="#second" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right">Second page</a></p>                 </div>                 <div data-role="footer">                         <h4>Footer</h4>                 </div>         </div>         <div data-role="page" id="second">                 <div data-role="header">                         <h1>Header second page</h1>                 </div>                 <div data-role="content">                         <p>I'm second page!</p>                 </div>                 <div data-role="footer">                         <h4>Footer second page</h4>                 </div>         </div> </body> </html>

Navigation, Lists, Form & Dialog Components

Then we have a bunch of other default components that are easily implemented with jQuery Mobile:

data-role=”navbar”: Used to create menus. Then you should place a ul item with li’s and a’s (BTW, that’s the way you should create menus, always)
data-role=”listview” + data-filter=”true” : Awesomely easy way to create searchable lists. Really useful!
data-role=”fieldcontain”: This is a container for form elements
select data-native-menu=”false”: creates a cool select element as “floating” element instead of default select which stole half of screen area
select data-role=”slider”: Creates a “on / off” slider, useful for options pages
input type=email, tel, number, url..: accepts any HTML5 data format, and adjust keyboard to better fit data type
input type=range: same as before, but this one uses new HTML format and creates an actual slider, good for numbers range inputs
data-rel=”dialog”: is an anchor attribute that makes target page opens as dialog box.
data-add-back-btn=”true”: add this attribute to your page and you’ll have a “back” button. Cool, huh?

Now we’ll edit our demo file a little bit. It’ll be 4 pages now:

Home screen will have a dialog box
Form elements page will use all we have mentioned
List page will have a searchable list so you can try it
Alert page has target content when user clicks the alert link

Previews:

Alert page:

Form page:

Lists page:

 <!DOCTYPE html> <html> <head>         <title>Starter page - 1stWebDesigner.com</title>         <meta charset="utf-8" />     <meta name="viewport" content="width=device-width, initial-scale=1" />     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>         <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body>         <div data-role="page" id="home" data-add-back-btn="true">                 <div data-role="header">                         <h1>Alert element</h1>                 </div>                 <div data-role="content">                         <p><a href="#alert" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-theme="b" data-rel="dialog">Open alert</a></p>                 </div>                 <div data-role="footer">                         <div data-role="navbar">                                 <ul>                                         <li><a href="#form" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Form Elements</a></li>                                         <li><a href="#list" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">List element</a></li>                                 </ul>                         </div>                 </div>         </div>         <div data-role="page" id="form" data-add-back-btn="true">                 <div data-role="header">                         <h1>Form elements</h1>                 </div>                 <div data-role="content">                         <div data-role="fieldcontain">                                 <label for="name" class="select">Choose:</label>                                 <select id="name" name="select" data-native-menu="false">                                         <option value="value1">option1</option>                                         <option value="value2">option2</option>                                         <option value="value3">option3</option>                                 </select>                                  <label for="slider">Select slider:</label>                                 <select name="slider" id="slider" data-role="slider">                                         <option value="off">Off</option>                                         <option value="on">On</option>                                 </select>                                  <label for="slider">Input slider:</label>                                 <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />                                  <label for="email">Email Input:</label>                                 <input type="email" id="email" name="email" value=""  />                                  <label for="num">Number Input:</label>                                 <input type="number" id="num" name="num" value=""  />                         </div>                 </div>                 <div data-role="footer">                         <div data-role="navbar">                                 <ul>                                         <li><a href="#home" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Home</a></li>                                         <li><a href="#list" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">List element</a></li>                                 </ul>                         </div>                 </div>         </div>         <div data-role="page" id="list" data-add-back-btn="true">                 <div data-role="header">                         <h1>This is a list</h1>                 </div>                 <div data-role="content">                         <ul data-role="listview" data-filter="true">                                 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>                                 <li>Aliquam vitae leo metus, quis suscipit nulla.</li>                                 <li>Maecenas accumsan urna sit amet justo commodo accumsan.</li>                                 <li>Nulla vitae lacus augue, vel eleifend tellus.</li>                                 <li>Integer at ligula turpis, at fermentum nisl.</li>                                 <li>Nam dapibus risus at massa sagittis egestas.</li>                                 <li>Praesent hendrerit purus vitae enim faucibus tincidunt.</li>                                 <li>Curabitur sit amet lectus neque, id facilisis elit.</li>                         </ul>                 </div>                 <div data-role="footer">                         <div data-role="navbar">                                 <ul>                                         <li><a href="#home" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Home</a></li>                                         <li><a href="#form" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Form element</a></li>                                 </ul>                         </div>                 </div>         </div>         <div data-role="page" id="alert" data-add-back-btn="true">                 <div data-role="header">                         <h1>Alert!</h1>                 </div>                 <div data-role="content">                         <p>I'm alert page!</p>                 </div>         </div> </body> </html>

Custom font embedding

Probably no method will beat @font-face. So I suggest you go to Font Squirrel and generate your font files.

Compress images

You should do this all the time, actually. But when you are designing for the mobile world, even a few kb’s makes big difference. So save your user’s bandwidth and compress not only your code, but all your images.

JPEG mini has the best compressing service I’ve ever seen, and it’s quite easy to use, you should give it a try!