

Coding for the Mobile Web - daleharvey
http://arandomurl.com/2011/03/16/coding-for-the-mobile-web.html

======
samcollins
Your methods on fixing the click delay are interesting. What was your
resulting click time?

I'm not an expert on this but you seem to be using a lot of javascript for
your UI when most of it can be done with CSS and applying/removing classes.
The JS is fine for desktop browsers but it can be really laggy on mobile (even
3GS). I think that's one of the things about jquery mobile—it uses css where
possible. That said, it seemed a little unrefined for me too and I've always
left it out.

I did much the same stuff (ui-wise) as you very recently, but used -webkit-
animation to do most of the work which means you can also use -webkit-
animation-fill-mode <-totally awesome:
[http://developer.apple.com/library/safari/#documentation/app...](http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html)

Also, you should use the 3d versions of translate, scale, rotate like
translate3d(x,y,z) because it utilises hardware acceleration (on iOS at
least). Makes a massive difference. Put down the javascript stick. :-)

------
johnbender
Note: I'm a jQuery Mobile team member

Most of the functionality that the author has highlighted (footers, page
animations, intelligent click handling) is handled in a much more
comprehensive/robust fashion by jQuery Mobile despite its alpha state.

I would encourage readers to look into the phonegap/jqm combination when
building mobile applications with html and javascript if only because there
are a large number of problem areas with this approach that jqm will handle
for you.

[UPDATE]

Just thought I'd highlight that the click/tap support is extremely difficult
to get right. Kin Blas, the developer who's working on this in jqm has taken a
lot of pains to make sure that the click handling is fast and flexible in all
cases.

~~~
daleharvey
Sure, I checked out jquery mobile before starting with this and would suggest
everyone else does the same, actually a bit silly to leave that out of the
article.

I decided against using jquerymobile for 2 reasons,

1\. the page loading / transitions are extremely buggy for me, clicking a link
can cause 3/4 page flashes for me on the current online demo.

2\. having previously been burned by jquery ui, I love jquery because its a
tiny library I add that enforces nothing on me, jquery ui is large and its
quite hard to take a little bit out of it that you like, a lot of that is due
to its themeing library, jquery mobile felt more like jquery ui to me more
than jquery plain.

extracting the click / tap support into a plugin I could use with plain jquery
would be a massive win for me.

------
mrspeaker
I hope mobile web apps really take off - although Apple provides a fantastic
distribution mechanism, the restraints they put on developers are
unreasonable. Web apps let you (or your company) dictate the release cycles
and determine what is or isn't suitable for your customers.

The HTML5 apis (especially the offline cache manifest stuff - my favourite!
[http://www.mrspeaker.net/2011/03/17/generating-cache-
manifes...](http://www.mrspeaker.net/2011/03/17/generating-cache-manifest/) )
can let us do some pretty "native-esque" stuff: though it seems like every iOS
version something gets broken - multi-touch in 4.2, and the nitro bug in
4.3... Though I'm sure I'm ascribing to malice... ;)

------
phrotoma
This is the only thing that makes sense, I've turned down a couple contracts
now for people wanting me to develop and maintain code bases on three
different platforms for the same app. Until someone figures out a way around
the cross platform legal and technical issues this is the sanest way for indie
developers to compete.

