I need YOU for 2 minutes,

Some of you guys might not know that it is impossible to have a fixed toolbar in mobile webkit, this is because we can’t fix anything to the gridview webkit produce.

This is something we need if one day we really want to be a contender to replace native applications.

If you have 2 minute sign the petition by going to http://www.abettermobileweb.com and click on the big button at the bottom.

On a mobile device you scroll a window, not the site

When you scroll on a mobile device, you are not really scrolling the site, in fact if you zoom out completely you will see the entire page, you are only scrolling your “window” around the site. When you understand this, your fixed footer dream really shatter, unless you are willing to use complex methods..

iScroll

And there start your quest, on your way you will find iScroll 3.0. This little script create the illusion of a fixed footer, but the performance price is rather high. It emulates scrolling alright, but this is not quite as snappy as the real thing, a big problem if you consider that your users will have a feeling that something is not quite right.

See iScroll in video.

Pastry Kit

You will probably also discover that pastry kit, the Apple Javascript framework for webkit, is doing it quite well. I cannot really comment how Apple is replicating it, they probably use a complex mathematic method to emulate the scrolling. The thing that really sucks with PastryKit is that Apple as not released it officially (not yet anyway), there is no documentation on how to use it, and it seems to be used only internally.

More information on PastryKit.

There is no perfect solution

Personally, I do not see myself implementing these solutions. I, however, stumbled on an interesting solution, make the footer fade out when you scroll, and fade is when you stop. This is not perfect, far from it (it is to wonder why Apple is not implementing something themselves in Webkit..). But I found this was the best solution offered to me.

I am working on a plugin for the jQTouch moible framework, I will probably release it in the weeks to comes.

However, one thing I found it was missing, was some database api. In webkit you now have access to one database per website address. Think of it as a better cookie. You could for example easily create a To do list with this feature.

Webkit is touchy about its database

You don’t mess with the webkit database, if you do, there is a good chance it will crash. Building this script, I never saw so much crash in Safari! so be careful using it. This script creates an abstraction of the webkit database api, it will enable you to write faster and less bloated code. It makes it really easy to play with the database, look at the demo, the HTML5 database section is all loaded from the webkit database.

View demo
(The Demo works only on Safari and webkit devices)

It can really be beneficial performance wise to use the database as a cache, this loads a lot faster than ajax web page, but you need to be careful on how much information you load from it. The iPhone is not a power house, you will need to find a balance. Also, used with the offline mode, you can really create powerful app that can be used offline.

Update: Apple is also doing database cache with the iPhone web user guide, interestingly enough they cache 1.4mb, the entire guide in the database in one shot. I personally did not see great performance when adding thousands of rows in the database, I am currently looking at how the pastry kit deal with the database executions. A good solution would be to create the database on the web application loading screen(when the application is added at the home screen).

How to use it

In fact what you see in the demo runs with basically 7 lines of code. Here a typical use of the extension:

The API

Open database

jQT.dbOpen(“name”, “version”,”descriptione”, size);
This function is needed on every page where you use the webkit database, be careful with version and size. Set a bigger size that you think you need, trying to add space later could prompt users permission. Example:
jQT.dbOpen(“databaseTest”, “1.0″,”jqTouch web application database”, 200000);

Create Tables

jQT.dbCreateTables(json)
You would use this typically to create the basic structure of your database, I would store it in another file called dbstructure.js, or something like this, a quick reference to go to when you need to change something in the structure. It can also be used to simply add a table at a selected time.
An example of the json structure to follow:

Create Rows

jQT.dbInsertRows(json)
You would use this typically to add rows in your table.
An example of the json structure to follow:

Delete table

jQT.dbDropTable(“table”)
Delete a table with all its information

Basic Delete Row

jQT.dbDeleteRow(“table”,”key”,”value”)
Delete a row following the statement WHERE KEY = VALUE. An example : jQT.dbDeleteRow(“listRecipe”,”id”,”‘5′”)

Get all the content from a table

jQT.dbSelectAll(“table”, callback(result))
Get all the information from a specific table. An Example:

Custom query

jQT.dbExecuteQuery(“Query”,”Debug text”, callback(result))
You can create your custom query and get a callback with the result. you will probably not need the debug text. Example:

Debug mode

I added a debug mode that you can enable in the extension, change the variable debugging to true. It will add an overlay and tell you about every query executed in the script.

Still in a early stage

I consider this release as beta v0.1. It works pretty well for what it does, but it’s not optimized and it’s not thoroughly tested, so be careful and have fun.

Download the source code View demo

Tested on:
Safari 4
Iphone webkit

Version 0.1 Online
December 22, Initial release

You can see the Google announcement here.

What can I say, I am stunned at the work here, jQtouch should really be your framework for creating small mobile websites (assuming you want to support only mobile webkit, so iPhone and Android based phone).

Perfect for list and text pages

It is not surprising that if there is something this framework does well, its animation on the iPhone. Webkit integrated lot’s of animation goodies, and jQtouch make the best out of it. You add a specific class for each type of transition and it will automatically animate the transition between your 2 pages.

Simple AJAX

Ajax calls were made as painless as possible, you link to your next page in the href link, “et voila” it will consider it automatically as an AJAX call. A small warning, I had a strange bug where some calls went nowhere, the transport was just not returning anything. It seems webkit mobile or jQuery was the problem here.

I had to resort to a little trick, I created pages in my mobile folder that would link to the content needed in wordpress by using this little php script:

Not perfect, but effective.

A nice little touch, on the iPhone you can add an icon to your homepage as a bookmark, if you were to create a small web based app, you could create a nice icon and loading screen that would feel like a real app.

Conclusion, it rocks!

If you are thinking of doing a mobile web app for webkit based phone, you should definitely try this out. You get all your basic CSS layout and javascript interaction. It just create 70% of what you would have to figure out yourself.

“prettyMobile is an iPhone/iTouch website development toolkit. It provides you will all the basics you need to make a mobile version of your website. It makes extensive use of CSS transformations making sure the animations will be as smooth as they can be. Plus, it’s only 13kb gzipped and minified.”

You need Safari4 or an Iphone to look at the demo.

The project page.

# Opera Turbo: Advanced compression technology to speed up data transfer and to reduce the amount of data that needs to be downloaded.
# Opera Widgets: Small, handy standards-based Web applications that run locally on you phone, giving you one-click access to your favourite web services. (really cool)
# Opera Dragonfly: Open source cross-platform developer tool.

Head here for more information and download.

For all the details, head to the Choose Opera blog.