jQuery Mobile is an easy and efficient way to begin building mobile websites. A comprehensive knowledge of web design is not needed and the jQuery Mobile documentation is easy enough for even beginner web designers to understand.

The first step in building a basic mobile website with jquery mobile is to add the correct jQuery mobile style sheets and scripts in the head tag. The easiest way to do this is to simply link to the CDN using the following code. You could also build a custom bundle for better performance, you can do that here.

<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

Along with the jquery mobile references you also need to add a meta viewport tag into your head tag. The meta viewport tag tells the mobile browser how to display page zoom. Without the tag pages often zoom inadequately and your left with a hard to see and read page.
Below is the meta viewport code you will want to add into your head tag.

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

The next step in creating your jQuery mobile website is by adding a jQuery mobile page to your html document. Jquery mobile pages allow you to organize different views or “pages” within the html document using the AJAX system to load additional views. The following code will allow you to add a jquery mobile page,

<div id="page1" data-role="page"><!-- /Content Here  --></div>

If you would like to take your visitor to this page you simply have to set the href value of an a tag to that of the name of the pages id. This code should be added after the head tag in your html document.

Next we can add a header into our page using the following code

<div data-role="header">
<h1>Page Title</h1>
</div>

The code for the jQuery Mobile header should be included inside of your jQuery mobile page code.

Our full code looks like this so far

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
</div>

Add in space for content with

<div data-role="content">Content Here</div>

You can add in a footer using the below code.

<div data-role="footer">
<h4>Page Footer</h4>
</div>

Our page looks like this so far. I included a logo in the header by simply adding an image and setting the max-width to 100% that way it scales to fit the pages width.

Jquery Mobile website

Now that we have a basic page structure together we can finally add in some content! Since a lot of mobile users are in search of phone numbers let’s add a click to call button at the top. Add the following code below the header in the

to easily add a click to call button.

<a style="color: #ffdd00;" href="tel: 302-792-1200" data-role="button"> Call Us </a>

Now we have something that looks like the following.

jQuery Mobile Website

Looks like your jQuery mobile website is finally starting to come together. How about we add in a collapsible widget that expands to show an about us section, a services section and a specials section when clicked. Insert the following code into your page in the content div

<div data-role="collapsible-set">
<div data-role="collapsible">
<h4> About us</h4>
Hey we're a great company. We're way different then those other guys I promise.</div>
<div data-role="collapsible">
<h4> Services</h4>
We perform the following services
	<li> Service 1</li>
	<li> Service 2</li>
	<li> Service 3</li>
</div>
<div data-role="collapsible">
<h4>  Specials</h4>
This weeks specials include 25% of all purchases , free stuff and insert marketing gimmick here</div>
</div>

Here’s how each looks when collapsed and when expanded.

Jquery Mobile Website

jQuery Mobile Collapsible

Jquery Mobile Collapsibles

jquery Mobile

Finally we will add a contact form at the end for users to submit their phone numbers into.

<label for="tel">Have Us Call </label>
<input id="tel" type="tel" name="tel" value="" />

Here’s what the page looks like with the newly added form.

jQuery Mobile Form

Unfortunately, the form wont work until you add in the necessary code to receive the input and then tell what to do with it, but the aesthetics of the form are in place. The following design gives you a brief intro into the possibilities of mobile web design with jQuery mobile and illustrate how simple it is to get started with mobile website design. If you like you can download the source files from the button below.

. Hopefully you came away with some ideas on how to get started building mobile websites with jQuery mobile!

By |November 11th, 2013|Adaptive web design|0 Comments

Leave A Comment