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 re-size, and display, images based upon how big your site is. (at least not yet – larger images can be sized down, but it will take longer to load – see the next item.)
- You must be mindful of bandwidth – both speed and data limits of your users. So avoid unnecessary images, libraries. Especially images that are larger (retina ready anyone).
- 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?
- Can you use images to display your message easier?
- 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 many extra tags and 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 candidate 2 of version 1.1) to the HTML5 sample from the previous class work.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" />http://code.jquery.com/jquery-1.7.1.min.js">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. Go to the jQuery Mobile website to get the most recent versions of the documents.
Added Markup
Since jQuery Mobile works with the tags that all browsers support, it is easy to get your site loaded into a browser on almost any device. However, to stylize the look, it often adds lots of elements to the page dynamically. This can slow the responsiveness of your website, especially in an older browser.
The styles
The styles are automatically applied, you do not have to define the CSS styles. This makes development time a bit faster. These is through a process called themeing.
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.
I recommend you work with only 1 or 2 themes in your style sheet to keep the resources your user has to download to a minimum.
Differences to Remember
When compared to designing for a desktop browser, there are several things you MUST remember. For example. Flash won’t work. But also some of your navigation elements, like rollovers, and fly out menus. This is because there is no :hover equivalent on a touch device.
Instead, you will need to approach your design from that perspective. Keep your screen simple, and remember the important elements so your users can navigate quickly and easily through the mobile site.
A Basic Introduction to JQuery Mobile was originally found on Access 2 Learn
