Overview
This guide covers how to create a simple mobile-phone site using basic web-publishing tools. The guide assumes some basic knowledge of HTML, JavaScript and Cascading Style Sheets (CSS), but does not get so complex that in-depth knowledge of these platforms is required. It is based on the work done by Johnathan Stark (Building iPhone apps with HTML, CSS, and JavaScript), and David Kaneda who wrote jQTouch with Johnathan (http://jqtouch.com). There are other options including IUI that accomplish similar goals. This tutorial is a great place to come after you have looked at the above resources and have the question ‘now what?’
The sample app that we will be working with includes three types of interactions: 1) List-based information such as contact information, 2) Links to external web-sites and 3) dynamically inserted data pulled from simple API calls or from locally hosted rss feeds.
A preview of the site is available at http://erikmitchell.info/lita_mobile/static_site/.
Create your site structure
First we need to download the site an examine the structure of the HTML page some. Once you have downloaded the site from github, open index.html and browse through it. The first few lines of the file includes the JavaScript and CSS include files. The only two files you need to worry about here are the files local.js and mobilesite.css. These two files contain local customizations and functions that extend the other javascript and css files.
The first <div> on this page is what shows when the page loads. They key elements are the class designation “current” on this div (which indicates that this div content shows on load, the class “toolbar” which is used to show the toolbar on a page view and the classes “forward” and “rounded” which control the look and behavior of the <li> elements.
The section that includes anchor references (#Contact, #Hours) to other <di< elements sets up the menu system. These div elements are located further down on the page.
You can modify the available menus and pages by editing the content of these elements. Note that the div elements are inserted as a placeholder to add footer content to the individual pages. At the moment there is only a bit of configuration in mobilesite.css for this.
Setting up the What’s New section
On this version of the site, the What’s New section uses some JavaScript located in the local.js file to load rss data from files located in the same directory as the index.html file. In order to add another ‘What’s New’ section, simply add an <li> element in the unordered list with the id “feeditems.” For each li element that you add, add a new div whose id matches the id referenced in the anchor tab. Look for the div sections with the class “testfeed” and copy the entire div element.
Now, simply locate the rss feed in the same directory as your index.html file. You can easily extend the functionality of this by 1) using relative URLs that point to live rss feeds or 2) using a php, perl or other scripting language to proxy live rss feeds from other sites. For an example of this, see the advanced mobile site tutorial based on python/Django.
Modify your catalog search
The catalog search simply redirects search contents to a catalog. To make the search work for your site, simply create a URL that works for your catalog. Locate the portion of the querystring that includes your searchterms and put that element at the end of your querystring (for example in the screenshot below the element is “lookfor=”
Some JavaScript in local.js combines your search terms and the querystring and redirects the webpage to the catalog. For a more advanced version of catalog search, see the tutorial on dynamic mobile sites.
Filesystem structure
Here is the filesystem structure of the site as it exists using the setup detailed so far.
Making your app work “offline”
One of the fun features of HTML5 enabled browsers (e.g. Safari & Chrome) is the ability to cache websites for off-line use. This allows your site (or portions of it) to be cached on your mobile device for faster access. Some great instructions for this can be found in the book Building iPhone apps with HTML, CSS, and JavaScript.
In short, you create a file called library.manifest (or demo.manifest or site.manifest) and put it into the root of your site folder. In that file you include each file that you want to list. An easy way to get this listing on a linux or OSX system is “find ./ -true”.
You then include the name of this file in the html element declaration as manifest=”library.manifest.” Finally, tell your webserver how to serve up manifest files either by creating a file called .htaccess in your site directory with the line “AddType text/cache-manifest .manifest” or by modifying your webserver config files.