5 ms·

Mobile Web App Checklist

138 points by coderzach 12y ago

sethbannon 12y ago
Really great list. I hope you keep updating this as the mobile web app development landscape changes.
EGreg 12y ago
Really excellent! I was glad to see that our platform does almost all of these out of the box by default.
thomasfl 12y ago
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 12y ago
  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
sebular 12y ago
They like momentum scrolling so much that they put it on the checklist twice :)
michaelmior 12y ago
If the OP is here, great list! Also, this section is repeated: "Always use momentum scrolling"
- quaz3l 12y ago
  Also in the section "Don't resize images clientside" a whole paragraph is repeated.
rickharrison 12y ago
Does android support the -webkit-overflow-scrolling: touch; property?
- bsimpson 12y ago
  I think defaulting to janky scrolling is a uniquely iOS problem. I doubt overflow-scrolling is needed at all in Chrome.
- untog 12y ago
  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.
rahilsondhi 12y ago
This is fantastic. Thank you!
bsimpson 12y ago
> 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 12y ago
  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 12y ago
    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.
  - jbish 12y ago
    aka "The Magic Viewport"
deleted 12y ago
[deleted]
ocfx 12y ago
Can someone demo the 'Absolute position your fixed header' part, I can't seem to emulate the fixed functionality with absolute positioning.
- jbish 12y ago
  Something like this. http://codepen.io/jx2150/pen/DBmjz/ http://codepen.io/jx2150/pen/DBmjz/
  - ocfx 12y ago
    Oh cool thanks, works like a charm
linkeex 12y ago
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_ 12y ago
  I really like the mobile app you posted here, very slick and fast!
taylorfausak 12y ago
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 12y ago
  That's a great writeup. I went by Apple's documentation, which I guess was a bad idea. Thanks for pointing this out.
huskyr 12y ago
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!
dude3 12y ago
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 12y ago
  That's really interesting, I wonder why that is? Is the decode step is that much faster?
- ollyfg 12y ago
  But IE6 will break! :O
maxmzd_ 12y ago
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.
matthijs_ 12y ago
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.
elwell 12y ago
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.
lbearl 12y ago
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 12y ago
  Good catch, thanks.
rvanmil 12y ago
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.
mjgoeke 12y ago
Looks nice. Not to nitpick - the 1st and 3rd paragraphs are duplicates under the section "Don't resize images clientside"
Acen 12y ago
Your impulse library works terribly on Windows Phone.
nolanl 12y ago
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.

138 points by coderzach 12y ago

sethbannon 12y ago

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

EGreg 12y ago

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

thomasfl 12y ago

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 12y ago
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

sebular 12y ago

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

michaelmior 12y ago

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

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

rickharrison 12y ago

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

bsimpson 12y ago
I think defaulting to janky scrolling is a uniquely iOS problem. I doubt overflow-scrolling is needed at all in Chrome.
untog 12y ago
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.

rahilsondhi 12y ago

This is fantastic. Thank you!

bsimpson 12y ago

> 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 12y ago
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 12y ago
  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.
- jbish 12y ago
  aka "The Magic Viewport"

deleted 12y ago

[deleted]

ocfx 12y ago

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

jbish 12y ago
Something like this. http://codepen.io/jx2150/pen/DBmjz/ http://codepen.io/jx2150/pen/DBmjz/
- ocfx 12y ago
  Oh cool thanks, works like a charm

linkeex 12y ago

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_ 12y ago
I really like the mobile app you posted here, very slick and fast!

taylorfausak 12y ago

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 12y ago
That's a great writeup. I went by Apple's documentation, which I guess was a bad idea. Thanks for pointing this out.

huskyr 12y ago

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!

dude3 12y ago

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 12y ago
That's really interesting, I wonder why that is? Is the decode step is that much faster?
ollyfg 12y ago
But IE6 will break! :O

maxmzd_ 12y ago

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.

matthijs_ 12y ago

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.

elwell 12y ago

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.

lbearl 12y ago

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 12y ago
Good catch, thanks.

rvanmil 12y ago

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.

mjgoeke 12y ago

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

Acen 12y ago

Your impulse library works terribly on Windows Phone.

nolanl 12y ago

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.