Mobile Web App Checklist | Hacker News Reader

Mobile Web App Checklist

luster.io

138 pointscoderzach34 comments

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!

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

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/

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

> 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?!

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

Also, I'll add it to the post.

Thanks. =)

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.

aka "The Magic Viewport"

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

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.

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

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

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.

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

But IE6 will break! :O

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.

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

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!

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

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.

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

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

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.

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

Good catch, thanks.

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

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

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.

Your impulse library works terribly on Windows Phone.

This is fantastic. Thank you!

Can someone demo the 'Absolute position your fixed header' part, I can't seem to emulate the fixed functionality with absolute positioning.

Something like this. http://codepen.io/jx2150/pen/DBmjz/

Reply on news.ycombinator.com