HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript by Matt Might is fantastic. This this first.
Read A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App. Below is a summary from that article.
Native apps are very fast and have smooth animations. There are a few things you can do to make your website feel quicker and more app-like.
Links experience a 300ms delay (to make sure it is not a double-tap). To change that behavior, you need to
Add the touchstart event to all your links (which will trigger the CSS :active state).
document.addEventListener("touchstart", function(){}, true);
You may, if you wish, style the button and/or remove the default gray tap highlight.
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
To really make it do something quicker (step 1 is just eye candy) you need to respond to the touchend event instead of the click event. This is not quite so simple—read about Google’s FastButton or the fastclick code.
This is where scrollable containers can have smooth and momentum scrolling available.
-webkit-overflow-scrolling: touch;
There is one issue with this property, however. It will disable the ability to tap the status bar on the top of your iPhone to scroll back to the top of the page. This bug has been around for a while, and it doesn’t seem to be fixed even in the latest version of Mobile Safari on iOS 7.
One way to get around this is to create a class that adds overflow-scrolling: touch to the container and then use JavaScript to only apply that class when that container is visible.
We are talking about CSS Transitions and Animations. Check out the Effeckt.css work.
Hey man, let’s enable the use of swipes and pinch-zooms if it makes sense. Pull-to-refresh can be accomplished with Hook.
To remove the browser’s address bar, the site must be launched from a home screen icon. Make sure you create Apple icons.