Creating a Website Using JQuery Mobile, Part 1

In this tutorial I will show you how to build a website with JQuery Mobile. In this first part of the tutorial I will explain the site’s characteristics, and I will implement the home page of the site.

Event Website Home

The Event Website

The website will advertise a fictional event, and it will consist of four distinct pages:

  • Home
  • Speakers
  • Schedule
  • Information

The site’s map would be something like this:

Let’s take a look at the wireframes for each page.

The Event’s Home Page

The Home page will have a toolbar, a banner and four buttons linking to different areas of the site.

The Speakers, Schedule and Information buttons are pretty self-explanatory. I will leave the implementation of the registration page as an exercise for you.

The Speakers Page

This page will host the list of speakers participating in the event. Each item of the list will display the speaker’s name, picture and short bio.

This page will also host a “Home” button linking back to the Home page.

The Schedule Page

The Schedule page will contain the list of event sessions. Each list item will display the session’s name, time, location, description and a picture of the speaker.

Along with a button linking to the Home page, the page’s toolbar will contain a set of buttons representing each of the event’s days. Pushing any of these buttons will display the sessions for the selected day.

The Information Page

The last page of the site is the Information page. This page will display a picture and a description of the venue, along with a list of hotels, their descriptions and rates.

How JQuery Mobile Pages Work

JQuery Mobile’s site explains in detail the anatomy of a JQuery Mobile page. It is recommended that you start your pages with a boilerplate template like this:

<!DOCTYPE html>
<html>
	<head>
	<title>Page Title</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
	<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>

<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><!-- /header -->
</div><!-- /page -->

</body>
</html>

The data-role=”page” attribute on the outer div element designates that div as a mobile page. Similarly, the “header”, “content” and “footer” data roles designate the header, content and footer areas of the page respectively.

To build your mobile sites using JQuery Mobile you can use one or multiple html files, each containing one or more mobile “pages”.

jquery-mobile-pagesl As you already know, for this tutorial I will take the multiple files approach, with each html file will hosting a single mobile page.

Creating the Home Page

Now that you have an idea of how things are going to look, let’s build the Home page.

Using the boilerplate page template, I first need to include the JQuery and JQuery Mobile  resources at the top of the file like so:

<head>

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

Notice that I also included event.css, which is the file where I will put the styles for the site.

In the body of the html file I will create a single mobile “page” containing the header, banner and buttons like so:

    <div data-role="page">
        <div data-role="header">
            <h1>
                Welcome!</h1>
        </div>
        <div data-role="content">
            <div id="banner">
                <h2>
                    Mobile Dev 2011</h2>
            </div>
            <p>
                The best mobile development conference is here!</p>
            <p>
                Learn how to build productivity, utility and immersive mobile applications.</p>
            <p>
                Use web-based and native platforms to create amazing applications for mobile devices.
            </p>
            <ul data-role="listview" data-inset="true">
                <li><a href="./register.html">Register</a></li>
                <li><a href="./speakers.html">Speakers</a></li>
                <li><a href="./schedule.html">Schedule</a></li>
                <li><a href="./information.html">Information</a></li>
            </ul>
        </div>
    </div>

This is how the page looks:

event-website-home-actual

Following JQuery Mobile’s conventions, inside the body tag I identified the mobile “page” using a div element with the data-role=”page” attribute. The div with data role of “header” will be the header of the page. And adding the data role “listview” to the ul element will cause each li element containing a link to behave like a button:

event-website-home-listview

Next Steps

We now have the Home page ready. In the next installment of this series I will build the Speakers page. Sounds good?

Want To Learn More?

Check out my How to Build a jQuery Mobile Application EBook. It teaches you how jQuery Mobile works by guiding you, step by step, through the process of building an application. It even explains how to keep application data synchronized with a server.

Comments

  1. says

    This is a very helpful tutorial. I found it well written and very understandable. Thanks for the post I will be visiting your site in the future.

  2. siva says

    This is very useful tutorial. Very easy to understand as well as implement. Thank you for your post.
    When will be the next post.

  3. Usman Sharif says

    can you please tell me how to get event.css file or can you plz send me complete zip package with all the files for ‘creating-a-website-using-jquery-mobile-part1′ and ‘creating-a-website-using-jquery-mobile-part2′

  4. Kelvin says

    Hello, your tutorial is extremely useful.

    Alas I’m making a website with media queries to detect and redisplay contents in desktop, tablet and mobile, what do you think is the best approach to marry media queries and jquery mobile together?

    Would I need two sets contents (one for desktop and the other for mobile) on each page?
    I’m just wondering if the data-role would affect any of the jquery that is already built on the site.

  5. Koen says

    Hi Jorge,

    Great stuff! The only thing I don’t understand: how to make a site that seperates a mobile version (using jquery mobile) and a regular theme?

    An explanation would be very helpful… thanks in advance!

    • says

      Koen, you can do that on the server side. You have can have a script that detects the browser making the request and redirects to the correct version of the site.

  6. Majid says

    Hi,
    I like this tutorial, in one of your replies you said server said, and in lot of other jQueryMobile tutorials, they put php or grails as server side with the application.
    My question is :
    when you finish an application using jquermobile with a server side technology, how will you deploy it in a device (phone or tablet), I am confused, do we have to have php installed in phones too. ?
    thanks
    Your help is appreciated.
    Majid

  7. Prodyot says

    I came across your this tutorial more than a year after you posted it.
    In the past two months i have been hunting the net for a quality step-by-step hands on tutorial on jquery mobile.
    Had I discovered your tutorial much earlier than I could have saved myself a lot of pain.
    But, it is never late to begin.
    Wonderful tutorial.
    Thanks for this installment.
    I am heading to your next installment of the tutorial from here with a confident smile :)

  8. Abubakr says

    can you please tell me how to get event.css file or can you plz send me complete zip package with all the files for ‘creating-a-website-using-jquery-mobile-part1′ and ‘creating-a-website-using-jquery-mobile-part2′

  9. Ara says

    Thanks for this tutorial. I did enjoy reading through it. But will like to know which framework did you use in building. I tried your example without any framework and the css styling goes off on my blackberry mobile phone

  10. says

    Hi…
    Thank you for making the only actual tutorial that I’ve been able to find. Other ‘tutorials’ haven’a actually explained how to do things, but you did so, very clearly…
    Thanks,.

  11. Danny says

    Great tutorial! Quick question, lets say after you build the web app using jquery mobile, how do you go about actually linking it with your domain so when a user goes to your website on their mobile device it will go to the mobile version of the site rather than the full website?

    • says

      There are may ways you can do this. One of the is to write a server script that detects the type of browser the user is hitting your site with. If it’s a mobile browser, you redirect to the mobile app.

  12. smalliao says

    Hi, I have some question. I’m wandering the difference between jquery mobile website and app. In your tutorial, I see that it’s two very different framework, The website is just like the usual website that contrains html, js, css ect. But the app is the same as sencha framework to some extent which is defficult to learn. So I want to know what should I use. Look froward to your apply.

  13. Fergal says

    jQuery: 102KB
    jQuery Mobile CSS: 93KB
    jQuery Mobile JS: 142KB
    Total: 337KB

    I can’t get my head around why we need JavaScript frameworks to create mobile sites that could be easily created using standard HTML5, CSS3 and a bit of JS on top for extras.

  14. irshad says

    gud , can you send mail some helpfull links of tutorial , which are usefull in most of the application web, basic and advced. thanks.

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *