My first experiments with mobile web development

Last updated on August 30th, 2019 at 07:22 am

I had to create a short website for an assignment, so rather than do simple HTML and CSS, I decided that I’d create both a regular version of the website and a mobile version.

My first attempt at a mobile version was to use Wapple. The tool seems to be designed to create very basic commercial mobile sites, with a couple of simple templates. Using their web interface, I tried to build the first screen on my site, but failed. I uploaded a graphic, but was not able to get the graphic to display in my site. After many attempts and many updates that were not successfully saved, I gave up.

My second attempt at a mobile version was to use MobileNation. I found their tool a lot more flexible, and somewhat similar to the interface for GUI creation provided in the Apple IOS Developers toolkit. However, MobileNation still has some work to do with their interface. It did not handle text well, and I found that I was limited in what I could do. I did find it helpful for doing some quick prototyping. Finally, I created a site using jQueryMobile.

Initially, I tried to use the same site for both the standard site and the mobile site; however, the HTML and CSS got too complex. Plus, all the extra code necessary for the two versions meant that the mobile site was much bigger than it needed to be. So, in the end, I created a separate site for standard web pages and a special site for mobile. I then added a little script to the standard site to redirect if the browser was less than 600 px wide. I’ve tested the sites on my iPod Touch, iPad, and Samsung Galaxy (Droid) phone. Everything works great on the iPod Touch (and my husband’s iPhone 4), the iPad screen is too wide so it doesn’t re-direct to the mobile site, and the jQueryMobile automatic back button doesn’t work properly on the Droid.

I’ve asked a few people to test them on Blackberrys, but sadly, I must report that neither the MobileNation nor then jQueryMobile sites work on the Blackberry.

So far, my preference is for jQueryMobile. It allowed me to do most of what I wanted very easily. It actually took me less time to write the site in jQueryMobile than it did in MobileNation. I’ll still need to make some updates to the site to get a semi-transparent back button that works properly on both the iPhone and Android, but that shouldn’t be too difficult. All three versions are available here.