jQuery Mobile: Mobile Websites Made Easy

In case there was any doubt left in your mind, the 2011 Horizon Report declares that the time-to-adoption for mobile devices is one year or less (http://net.educause.edu/ir/library/pdf/HR2011.pdf, pg.12). I would say the time to adopt is actually already here and possibly past. While there is still quite a bit of debate over whether native apps or web apps are the way of the future, there is no doubt that your library should be doing something to address the experience of your mobile users (see this article for more on that debate).

As mobile devices become more ubiquitous, more tools are available to help you develop your mobile initiatives. For web apps (i.e. mobile websites), several mobile frameworks have emerged to ease the development process. As the phrase indicates, mobile frameworks provide the framework for building mobile websites, allowing you to focus on the content and navigation. Most mobile frameworks are built to work on a wide variety of devices and provide a similar look/feel to native apps (i.e. apps that are built for a specific device).

While there are many mobile frameworks available, I have found the jQuery Mobile Framework to be both easy to use and well-documented (very important!). Additionally, the jQuery framework is compatible with a wide variety of devices and degrades nicely for those devices that are not quite as smart (see a list of supported platforms here). One of the benefits to web apps is the ability to create one site that works for any mobile device. Thus, choosing a mobile framework that helps you accomplish this makes sense.

So what does jQuery Mobile do?

Before I get into that, it’s important to state that jQuery Mobile does not eliminate the need to know how to create a website using HTML. In fact, to use it most effectively, it helps to have a solid understanding of HTML, as well as web programming languages like PHP or Coldfusion. What it does do for you is turn your basic HTML code into a mobile-friendly user interface by providing pre-defined Javascript interactions and CSS styling. All you have to do is add a few hooks (that’s what I call them) so that jQuery Mobile knows what to do.

Unformatted hyperlink

So, by changing this line of code:

<a href=”http://www.google.com”>Google</a&gt;

into this:

<a href=”http://www.google.com&#8221; data-role=”button”>Google</a>

hyperlink with the data-role="button" code added

I turn a small unfriendly link (for a smartphone at least) into a graphical, user-friendly button that is consistent with the mobile interface experience to which your mobile users are accustomed.

Put it to the test

Using the jQuery Mobile Framework, I was able to turn my library’s basic text-based mobile website into a smartphone-friendly experience within a matter of hours: http://cooklibrary.towson.edu/m/smart.

Using jQuery Mobile I was able to turn our text-based mobile website into a smartphone-friendly site within a matter of days.

The documentation and demos that are provided on the site (http://jquerymobile.com/demos/1.0b1/) were extremely helpful for getting started.  They provide a basic template to start with, and there are plenty of tutorials and samples around the web as well. There are several different CSS themes to choose from, and, of course, you could always customize the themes to match your school colors, etc.

For anyone who relies on Dreamweaver for building web pages, it appears that the newest version of Dreamweaver (CS5.5) integrates the jQuery Mobile Framework (http://www.adobe.com/newsletters/edge/january2011/articles/article4/index.html), making it even easier to create mobile-friendly websites. (There really is no excuse not to have a mobile site now!)

If your library hasn’t yet ventured into the mobile frontier, or even if you already have a basic mobile site, save yourself some time and ensure that your mobile site is compatible with a variety of devices by using jQuery Mobile. If you’re not responsible for your mobile site or if someone else is doing the coding, suggest that they look into jQuery Mobile or one of the other mobile frameworks that are out there.

I’d be interested to hear how others are addressing their mobile presence. What frameworks are you using? Are you building native apps or web apps? Feel free to leave a comment below about what your library is doing.

---

Note: In order to make your site display correctly on an iPhone, you’ll need to add the following line of code inside the <head></head> tags of your pages:

<meta name=”viewport” content=”width=device-width,user-scalable=no” />

This takes away the ability to zoom in and out on a page, but will make your site more friendly to iPhones. (This took me awhile to figure out.)