In my (very recent) experience building a relatively complex [1] mobile web app [2] as a first-time web-app-for-mobile developer, I learned a few important rules, so to speak, about how to make the app feel as native as possible. (If you check it out, let me know at frank at callingvault dot com if you have any issues. We're in beta, and we love when tech savvy folks test.)
The rules:
- Most of the browsers on Android (Chrome's good, but it's not available on anything less than 4.0) suck pretty hard, and you'll almost definitely have to do a few weird hacks to get everything to work well (read: at all, sometimes).
- Use transform-3d for any animations in browsers that support it. No JS required for detection – you can use media queries [3]. For browsers that don't support it, you can fall back to jQuery's animate method [4] or standard CSS transitions.
- Avoid using fixed positioning in your CSS unless it's absolutely (no pun intended) necessary. It's not well supported in many mobile browsers, and you might end up creating more work for yourself down the line (i.e., hacking for Android and older versions of iOS). If you can figure out how to use absolute positioning instead without completely fubaring your layout, do it.
- If you're using divs that don't move (i.e., fixed- or absolute- positioned ones), use -webkit-overflow-scrolling: touch; to enable inertial scrolling within them in iOS and other browsers that support it. If browsers don't support scrolling at all, you'll have to either implement your own scrolling solution from scratch or use one of the many decent ones available on the interwebs.
- Try the simplest solution you can think of first and go from there. Sometimes it'll work better than you'd expect.
For my latest project I've did all that. Here are somethings I've learned:
I've discovered that chrome has a problem with zoom levels (Nexus 4), while my older Desire's browser worked well.
Overlaying text over images is a royal pain in the ass for all mobile browsers. (Your standard position:fixed and position: relative thing won't work well unless you write media queries for every single goddamn fucking resolution)
Chrome lags with JQuery animation and that's an issue I'm looking to fix (since I am using Bootstrap's carousel)
Media queries are fucking amazing. Javascript support on most mobile browsers are quite terrible, and even lags (I'm using an iPod touch to test my webapp)
The rules:
- Most of the browsers on Android (Chrome's good, but it's not available on anything less than 4.0) suck pretty hard, and you'll almost definitely have to do a few weird hacks to get everything to work well (read: at all, sometimes).
- Use transform-3d for any animations in browsers that support it. No JS required for detection – you can use media queries [3]. For browsers that don't support it, you can fall back to jQuery's animate method [4] or standard CSS transitions.
- Avoid using fixed positioning in your CSS unless it's absolutely (no pun intended) necessary. It's not well supported in many mobile browsers, and you might end up creating more work for yourself down the line (i.e., hacking for Android and older versions of iOS). If you can figure out how to use absolute positioning instead without completely fubaring your layout, do it.
- If you're using divs that don't move (i.e., fixed- or absolute- positioned ones), use -webkit-overflow-scrolling: touch; to enable inertial scrolling within them in iOS and other browsers that support it. If browsers don't support scrolling at all, you'll have to either implement your own scrolling solution from scratch or use one of the many decent ones available on the interwebs.
- Try the simplest solution you can think of first and go from there. Sometimes it'll work better than you'd expect.
1. http://callingvault.com 2. http://m.callingvault.com 3. @media all and (-webkit-transform-3d) {} 4. http://api.jquery.com/animate/