Mobile Web App Checklist

[linkeex]

Great list!

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!

[matthijs_]

I really like the mobile app you posted here, very slick and fast!

[taylorfausak]

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/

[coderzach]

That's a great writeup. I went by Apple's documentation, which I guess was a bad idea. Thanks for pointing this out.

[bsimpson]

> 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.

WHAT'S THE TAG?!

[coderzach]

From this video: http://youtu.be/3Bq521dIjCM?t=23m50s

<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

Also, I'll add it to the post.

[sebular]

They like momentum scrolling so much that they put it on the checklist twice :)

[matthijs_]

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.

[michaelmior]

If the OP is here, great list! Also, this section is repeated: "Always use momentum scrolling"

[quaz3l]

Also in the section "Don't resize images clientside" a whole paragraph is repeated.

[dude3]

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.

[coderzach]

That's really interesting, I wonder why that is? Is the decode step is that much faster?

[ollyfg]

But IE6 will break! :O

[thomasfl]

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.

[thoughtpalette]

ionic is great. Make sure you're aware of the browser support limitations when using it for a mobile web-app though. http://ionicframework.com/docs/overview/#browser-support

[maxmzd_]

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.

[huskyr]

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!

[sethbannon]

Really great list. I hope you keep updating this as the mobile web app development landscape changes.

[nolanl]

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.

[elwell]

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.

[rickharrison]

Does android support the -webkit-overflow-scrolling: touch; property?

[bsimpson]

I think defaulting to janky scrolling is a uniquely iOS problem. I doubt overflow-scrolling is needed at all in Chrome.

[untog]

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.

[lbearl]

Sorry to nitpick, but "cache evacuation" really ought to be "cache eviction." (But at least I'm not complaining about the back button not working).

[coderzach]

Good catch, thanks.

[mjgoeke]

Looks nice. Not to nitpick - the 1st and 3rd paragraphs are duplicates under the section "Don't resize images clientside"

[EGreg]

Really excellent! I was glad to see that our platform does almost all of these out of the box by default.

[rvanmil]

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.

[Acen]

Your impulse library works terribly on Windows Phone.

[rahilsondhi]

This is fantastic. Thank you!