Building Sites with jQuery Mobile

jQuery Mobile Development

Building Sites with the jQuery Mobile Framework

Who Am I?

Jacob Gable

Nice to meet you

Who Am I?

Jacob Gable

Obligatory employer shout out


Who Am I?

Jacob Gable

Don't worry, I don't write with a southern accent


Who Am I?

Jacob Gable

Check my geek cred


Who Am I?

Jacob Gable

Sleep deprived


Cutest. Baby. Ever.

Cutest. Baby. Ever.

The Plan

"Everyone has a plan 'til they get hit in the mouth" - Mike Tyson

  1. jQuery Mobile Overview
  2. Anatomy of a jQuery Mobile Page
  3. Walkthrough the default components
  4. Put together a jQuery Mobile Site for
  5. Advanced techniques with javascript

jQuery Mobile

Seriously, bro. What is it?

jQuery Mobile is a framework for creating mobile friendly sites that look decent on a variety of devices without too much extra fiddling.

Some useful getting started links to go through:

Anatomy of a jQuery Mobile Page

The Essentials

Every jQuery Mobile Site Needs:

Anatomy of a jQuery Mobile Page

Put it all together

The jQuery Mobile Page Template - jsFiddle Example

<!DOCTYPE html> 
    <title>Page Title</title> 	
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" 
          href="" />
    <script src="//"></script>
    <script src=""></script>

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->
    <div data-role="content">	
        <p>Page content goes here.</p>		
    </div><!-- /content -->
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->


Anatomy of a jQuery Mobile Page

How the Magic Happens

Here is a break down of what happens on a typical jQuery Mobile page load:

jQuery Mobile Controls

All the pretty things

jQuery Mobile provides a lot of familiar controls to use out of the box.

Hardcore Coding Action

Lets make a site

Make a jQuery Mobile Site

Questions / Comments

Hit me with your best shot

Contact me at