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.

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

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".

Inside that, we can further define the page layout.

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.

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

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

It then appears as:

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

Which appears as:

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 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 - deanhume.com/mobile.