
Mobile Web App Checklist - coderzach
http://www.luster.io/blog/9-29-14-mobile-web-checklist.html
======
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/#/](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/](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](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.

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

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

------
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](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/](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.

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

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

~~~
jbish
Something like this.
[http://codepen.io/jx2150/pen/DBmjz/](http://codepen.io/jx2150/pen/DBmjz/)

