Intro to jQuery Mobile
Things to consider
jQuery Mobile takes your (properly formatted) HTML5 document, and makes it work well on a mobile device. However, there are some things you must consider to have a well running mobile website.
- No library will dynamically resize, and display, images based upon how big your site is. (at least not yet)
- You still must be mindful of bandwidth - for both speed and limits of your users.
- Screen sizes vary. So what will look good on a tablet, but may not look good on a phone, and vice-a-versa.
- Screen sizes are small, so you have to be careful with what you display.
- Screen sizes are small, so people don't want to read too much on a page (can you split your content into multiple pages?)
- Screen sizes are small, but fingers are large. So make sure your navigation and links are easily "tappable".
Using jQuery Mobile
jQuery Mobile will apply numerous styles for you, so you don't have to spend all of your time determining a style. For complex pages, this can slow down the browser. It also requires a couple of things to make it run.
- You must use the data-role attributes correctly.
- You must load the jQuery library in the head
- You must load the jQuery Mobile library in the head.
Code to add (this is for release canidate 2 of version 1.1) to the HTML5 sample from last weeks class.
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script>
Once the code is added, you will automatically become styled.
The styles
The styles are automatically applied, you do not have to define the CSS styles. This makes development time a bit faster.
There are properties you can define, but they are optional. Most styles noticed are for obtaining form elements. Make sure your forms are small an easy to use, as they are harder to fill out on a mobile device compared to a computer.
Changing styles
You can use the data-theme="" attribute to change the color scheme. The default CSS file has 5 themes, a - e. You can use the theme-roller web tool to create your own themes, and you may have up to 26 themes in a CSS document. However, this can make your files large, so you may not want to theme quite so many of them.
The theme only affects certain areas like forms, headers, and footers. If you want to style specific areas, you may want to include another CSS document to set your personal styles.