Phonegap Development a Quick guide.

Over the years I have made a number of apps for various platforms. Something that has rubbed me up the wrong way for a long time is how little you can reuse the code between different platforms. What with a burgeoning family and having crossed the forty year old barrier, my capacity for development has been somewhat diminished. Recently I have turned to phonegap to leverage my many years in html development and reduce the time converting between platforms.

In this post I will list all of my handy html5 tips that I have scoured the web for, in the hope that it may save you all some time.

I hear you! ‘HTML5 is rubbish, that’s why Facebook dumped it’ well as my wife often tells me, I’m not listening, so I’ll give it a spin anyhow.

Both Newspeye and Pinadays apps are HTML5 and both run pretty damn close to native speeds. But it took some time to get it that way, especially on the Android platform.

Tips:

Try writing a HTML5 app for Windows 8. Windows 8 is very forgiving if your HTML5 code is a little sloppy, which my first attempt was! cough… It still ran like a dream on windows 8 thanks to Microsoft’s fast browser, with direct X.

For animations use CSS3 transitions and transforms. In Newspeye I used two simple classes for a simple slide in settings bar, using javascript was very jumpy.

 

.SlideRight{
       		-webkit-transition: all .5s ease-in-out;
		-webkit-transform:translate(200px,0);

	}
.SlideLeft{
		-webkit-transition: all .5s ease-in-out;
		-webkit-transform:

The next issue for HTML5 apps is the click delay. There seems to be a 300ms delay while the browser is waiting for a second click or gesture. This is easily removed using FastClick and it instantly transforms the feel of the app.

Remove the horrid tap highlight when you click on any link or button use

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-ms-touch-action: none; //for IE10
<meta name="msapplication-tap-highlight" content="no">//IE10

Manage the viewport. There is a great guide here

Control the layout on orientation using @media, again there is a great guide here

 

Check out this book it’s full of great tips for HTML 5 Development it’s sure to help, its helped me a bunch.

 

Sire

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>