Coding Tips & Tricks


Home>jQuery

jQuery Mobile - Optimizing your Website for Smartphone's and Tablets

As developers today, our websites are constantly being accessed from different forms of devices - PC's, Mac's, iPhones, Blackberry's, iPads - and the list goes on! Developing websites and content that conforms to all these standards can be a nightmare. Luckily, jQuery has just released a version of their library called jQuery Mobile. Not only does it provide sleek, clean and semantic HTML - but it is a unified JavaScript User Interface that works across the most-used Smartphone web browsers and tablets. What does this mean for us as developers? Well, it means that we now have a unified JavaScript library that we can use to write web-based applications that can be used by Smartphones & Tablets - plus it's really easy to use!

Let's take a look at a simple example using jQuery mobile. First off, you need to use the new HTML5 doctype in your page.

Html5 DocType

Next, include a reference to the jQuery Mobile library and stylesheets.

Jquery Mobile

Now, we are ready to get started. First off, let's start by defining the layout of the page. Each view or "page" on the mobile device is identified by an element with the data-role="page".

data-role=page

Inside that, we can further define the page layout.

data-role=page

That is all that is needed to start coding your site. It's that easy! There is also a boilerplate template that is available on the site.

http://jquerymobile.com/demos/1.0a1/#docs/pages/page-template.html

Okay, so now we have defined our page - let's start making it sexy. The library comes with themes that are even easier to use, plus they take advantage of CSS3 properties. Simply assign a data-theme attribute to the header or footer.

data-theme

The default theme currently contains five style and you simply define the swatch by the swatch letter.

data-theme

If we wanted to style a link as a button, add the data-role="button" attribute.

data-role=button

It then appears as

data-role=button

Let's say we wanted to add an icon to our button.

data-icon

Which appears as

data-icon

There are many more features available with the jQuery Mobile library, and I'm sure as it expands and progresses we will see a lot more from it! I've just touched on some of the great features that it currently offers, but for more information please check out http://jquerymobile.com

On this site, I already had a iPhone enabled version of my site - but it didn't quite work across all mobile devices. I decided that it was time to update the mobile site to make it available to more devices. Please check it out at - http://www.deanhume.com/mobile








Comments


Add your comment

300 Characters left


Please fill this in to confirm that you are human