I love the development we're seeing in modern mobile web apps.
The web is definitely ready but still everybody around me seems to think that when you're the owner of a business then you should also provide your users with a special app on Android and iOS and a web site.
For example: A nightclub in a nearby provincial town as an iOS App for announcing new parties.
I think that you only should consider creating an app as a business if you're doing more than providing your customers with information.
This is a great list! I have to nit pick the touch icon and splash screen sections, though. It's a lot more complicated than that. You need at least 8 <link> tags for touch icons and 7 for splash screens, just to support iOS <= 7. http://taylor.fausak.me/2013/11/01/ios-7-web-apps/
> This may change as mobile browsers are improved and optimized. In the newest versions of Chrome for Android, if you specify a special meta tag, you can animate a lot of formerly slow properties at 60fps.
That looks like a must-watch video. Nat's stuff is always good anyway, and it never hurts to have a refresher on why mobile rendering is slow/what you can do about it.
I often tap the top status bar in iOS to scroll to the top of the page. Not sure about other users, but that shouldn't be something a developer is 'breaking' to provide a truly fixed header bar. Love the idea of a truly fixed header bar though, so I'd love to see a different solution to this problem.
One thing to add. If using iOS, use png backgrounds and images vs jpg. Even though they have a larger file size, you will see a MASSIVE performance increase on iPhone (night and day on old iphone 4's and 4s). You can even use PNG 24 but preferably PNG 8.
Great list. The next time l make a mobile website, I would definitely consider using ionic. It's actually a css and javascript library for creating apps for ios and android with phonegap/cordova, but it can also be used for mobile websites.
Awesome list! I used Zach's interaction library, Impulse, in a recent project and it's fantastic. http://impulse.luster.io/ This guy really knows his stuff.
Given the title i was expecting a list of obvious things like 'make sure you test your web app before deploying', but it's actually more like a giant list of frontend tricks for web apps. Awesome, and a lot more useful!
Great list, but one thing you're missing is to also specify the prefix-less CSS attributes for -webkit stuff. It only takes an extra line of code, and it future-proofs your app for Firefox OS and IE Mobile.
If you're able to, using a high-quality framework (e.g., Sencha Touch) will abstract out a lot these problems and provide other benefits that a team of people have been dedicated to implement.
No it doesn't, but overflow:auto will scroll fine. It's only iOS that has a weird scrolling-that-isn't-native-scrolling mode without the -webkit- property.
I don't understand why you would want to emulate a native experience within a web app. When I'm using a web app, I expect it to behave like a web app. I find it very annoying if it doesn't.
I love the development we're seeing in modern mobile web apps. The web is definitely ready but still everybody around me seems to think that when you're the owner of a business then you should also provide your users with a special app on Android and iOS and a web site.
For example: A nightclub in a nearby provincial town as an iOS App for announcing new parties.
I think that you only should consider creating an app as a business if you're doing more than providing your customers with information.
A great modern mobile web app I'm using a lot is: http://cheeaun.github.io/hackerweb/#/
If you save it to your homescreen on Android(Chrome), you will quickly forget that it's a web app.
Trust me and try it!