Screen shot 2015 01 22 at 12.23.39 pm qaumiv

What is jQuery Mobile?

Share

Published

22 Jan 2015

Duration

8 minute read

Website owners today need to build sites that can easily adjust and adapt to the device screen that they're being viewed on. This is where jQuery Mobile comes to your rescue.

An Overview of jQuery Mobile

Let's face it! It's not surprising to see people believing in the misnomer that jQuery Mobile is a mobile version of jQuery. But that's a wrong notion, jQuery is just a framework that provides optimal web experiences to mobile devices, especially the ones having touch interface.

jQuery Mobile takes the jQuery: “write less, do more” approach to the next level; and rather than writing unique applications for different mobile device or operating system, jQuery mobile enable users to create a single application that can run on devices with different screen resolutions. The best part is that jQuery Mobile can be referred to as a HTML5 user interface that helps to build sites and apps – that can be accessed via mobile devices and desktops.

How Does jQuery Mobile Build Touch-friendly Websites?

There are five essential things through which jQuery Mobile let users build sites enriched with touch-friendly functionality, thereby making the site work across different browsers and devices:

1. Touch-friendly form elements

What if you tried to click a checkbox with your fingertip on a form via a mobile device that contains poorly designed elements, you'll probably have good idea of how frustrating it could be to “zoom in and out” to click on those form elements. You job doesn't end by creating a responsive form, it's also very important to ensure that all your form elements work fine with touch. 

jQuery Mobile is designed to provide optimal touch-first experience and enhances your forms automatically to make them touch-friendly. For instance, when designing a form using jQuery Mobile all your checkboxes are wrapped inside a large label to create a nice tap-zone, thereby making it easy to hit the targeted checkbox. Additionally, you might face problem if the textareas exceeds the allotted text space when accessed via mobile. But jQuery Mobile resolve such issue and expands the textareas automatically, so that users can have the same experience of viewing the content when it is being read via any device.

2. UI widgets

jQuery Mobile comes with tons of widgets such as buttons, checkboxes, grids, popup, and the new panels widget to name a few. You can use any of these widgets to add touch-friendly UI elements to your website or web app. New widgets keeps on getting added to each version of jQuery Mobile, so as to provide more touch-friendly UI elements that works well across all modern browsers and major devices.

3. Responsive design techniques and tools

With the release of 1.3 version more responsive web design features have been introduced, such as:

New Panel Widget: You must have seen navigation menus, or forms, etc. with sliding panels. You can add the similar functionality to your site or web app using jQuery: New Panel Widget.

Tables, Reflow: By adding table with reflow mode to your site design or application, you'll see blocks of label/data pairs in the stacked presentation style on all the devices with different screen widths.

Table, Column Toggle: This table mode helps auto-hides least important columns and provides a button to open a menu, allowing users to choose the columns they want to view.

Responsive grid: The responsive grids jQuery Mobile widget allows to create responsive CSS-based columns. 

4. Ajax-powered navigation system

jQuery mobile comes with an Ajax-powered navigation system, so as to provide support for animated page transitions. Often when loading such transitions page loads slowly, as the JavaScript and CSS requests are re-initialized on every page load. But when a page needs to be re-loaded, jQuery Mobile searches for links that are saved in your local domain your site is running on, and then fetches content for the new page with Ajax. Thus, when a user clicks on a website link, the new page contents are first loaded into a new div and then moved into the current viewport.

For example, let’s say you're on main.html (the file where all your major website content is added), and you then clicked page1.html link that has the following markup:

<a href="page1.html"

data-transition="slide">Link1</a>

The URL address in your current browser window will get updated to yourwebsitedomain.com/page1.html, as soon as the page finish sliding. jQuery Mobile makes sure that all your scripts and styles have already been initialized on your device, and thus saves you from re-initializing them again and again, when a page is being loaded.

The Ajax-based system by jQuery Mobile helps to load new pages lot more quickly compared to the traditional full page loads, by loading the HTML fragment that loads new pages instantaneously.

5. Builds customized themes with Themeroller

If you don't to stick to a default theme and want to customize it with ease, then jQuery Mobile enable you to customize your app with help of jQuery Mobile Themeroller. It helps to create customized theme colours as per your requirements, by simply dragging and dropping the colors directly onto the elements you're styling. Themeroller comes integrated with the Adobe’s Kuler tool, which help you access colour schemes that have received maximum ratings from users.

You can download your styled theme and even share it to other users.

Wrapping Up!

So, if you want to create a website or a web app with HTML5 that can be easily accessed across all devices and browsers, then jQuery Mobile can help you accomplish your aim. jQuery Mobile comes with several components that enables to add responsive form inputs and widgets; help customize themes and make them load quickly. Through this post, you'll learn about the basics of jQuery Mobile and what main elements it uses to enable users to build touch-friendly website or web application for all mobile and desktop devices.


Addison Cohen is an iOS app developer working with Appsted Ltd, a reputed iPhone application development company. He loves sharing tech information and ideas on application programming.




Want to become a junior developer? At Coder Academy we have Australia's first and only accredited fast-track coding bootcamp that will set you up for a new career in tech. Our immersive course helps students acquire in-demand skills through hands on, project-based training by industry experts over six months.

Now enrolling domestic & international students in Sydney, Melbourne & Brisbane! Study now, pay later with FEE-HELP! 

Are you a woman interested in coding? Check out our Women in Tech Scholarship!


BECOME A FULL STACK DEVELOPER IN 25 WEEKS OF STUDY

Seriously considering a coding bootcamp? Learn more about Australia's first accredited coding bootcamp.

Join our newsletter to find out about upcoming courses and events!