Anatomy of a Native Feeling HTML5 iOS App
justinvincent.com
Anatomy of a Native Feeling HTML5 iOS App
1–10 of 61 posts
Re: Anatomy of a Native Feeling HTML5 iOS App
#2Downloaded the app, and it is quite smooth. Only lags when the ads are changing...
I wonder if that would be any different if it were native?
Re: Anatomy of a Native Feeling HTML5 iOS App
#3Interesting, though using "position: absolute" for everything would be a problem on varying screen sizes (or for a more complex UI). The CSS3 flexibox module can accomplish a lot of "app" layouts pretty easily, however (and you can mix and match!).
Re: Anatomy of a Native Feeling HTML5 iOS App
#4> Although the app is small, it’s easy to imagine that a larger app made of multiple components such as this could also be made to feel just as native.
It's easy to imagine, but in my experience, doesn't match reality. Unless things have changed drastically in iOS 6, CSS can be incredibly redundant. Imagine that you have a feed with a lot of drop shadows + gradients on, say, comment buttons on each feed item. Even though the dimensions and styles are the same, for each DOM element, it's going to recalculate layout and re-rasterize the graphics. So while things may be snappy in a mockup, with real data, often times HTML5 (really the CSS) will be exceedingly memory hungry and slow to initialize, thereby killing the experience.
Re: Anatomy of a Native Feeling HTML5 iOS App
#5The animations are smooth and I wouldn't be able to tell if it was native or not based on what the app can do.
The problem is, the app doesn't DO anything. There's no scrolling. There's no loading anything from the web (except for the blurry non-retina ads). There isn't anything in this app that makes it a candidate for an app (vs a website) in the first place.
Re: Anatomy of a Native Feeling HTML5 iOS App
#6> Although the app is small, it’s easy to imagine that a larger app made of multiple components such as this could also be made to feel just as native. It's easy to imagine, but in my experience, doesn't match reality. Unless things have changed drastically in iOS 6, CSS can be incredibly redundant. Imagine that you have a feed with a lot of drop shadows + gradients on, say, comment buttons on each feed item. Even th…
The way to get around that is to remove drop shadows as scrolling starts. When the scrolling is complete add the drop shadows back again.
Drop shadows and alphas are the main issue, just need to manage them.
It's easy to do with a single css class added to the main body tag (i.e .isScrolling).
Then in the CSS use .isScrolling .myDiv { / no shadows / }
// On scroll start $('body').addClass('isScrolling');
// On scroll stop $('body').removeClass('isScrolling');
Works a charm!
Re: Anatomy of a Native Feeling HTML5 iOS App
#7The animations are smooth and I wouldn't be able to tell if it was native or not based on what the app can do. The problem is, the app doesn't DO anything. There's no scrolling. There's no loading anything from the web (except for the blurry non-retina ads). There isn't anything in this app that makes it a candidate for an app (vs a website) in the first place.
Scrolling feels 100% native using -webkit-overflow-scrolling: touch;
I am currently working on the next (more complicated) app for UberMedia that has all of those components and works very nicely. It will be one month or so before it is ready for release.
Re: Anatomy of a Native Feeling HTML5 iOS App
#8Nice, thanks for the breakdown on what you did on each section.
Re: Anatomy of a Native Feeling HTML5 iOS App
#9I just recently completed a mobile web app for my start-up and was pleasantly surprise with what I was able to achieve.
If I was to share anything from my recent experience these would be my main points: - use the correct HTML5 elements for input (eg: "number" brings up the keyboard with numbers already selected, "date" brings up a native datepicker (iOS5+))
- Use lightweight javascript frameworks, or write your own. I tried JQueryMobile and performance was terrible with just a simple list(on iPhone 4). Used XUIJS instead and rolled my own framework on top to manage views etc. Performance is great.
- Use graphics only when needed, gradients, shadows, should all be css.
- If you must use graphics, be sure to support high res screens with alternative resolution images. I found the best way is to use the 'background-image' css property with pixel ratio css media queries to differentiate between different resolutions.
- Set the correct metadata values so you can add your web app to the homescreen to run full screen.
One problem I had was a lack of access to Android devices for testing, but I used this site http://www.manymo.com/ and found it invaluable.
Re: Anatomy of a Native Feeling HTML5 iOS App
#10In 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.
1. http://callingvault.com 2. http://m.callingvault.com 3. @media all and (-webkit-transform-3d) {} 4. http://api.jquery.com/animate/