HTML5 Wrapper Mobile Apps

Case Study: Facebook

Facebook tried the HTML5 Wrapper App approach until giving up and launching their native apps in Ausgust of 2012. At TechCrunch Disrupt San Fran 9/11/12 Mark Zuckerburg claimed betting on HTML5 for the last 2 years was company’s biggest mistake. 
Their key complaints were:
  1. Performance. However, Sencha claimed that this was due to implementation and wrote Fastbook as a demonstration which displayed dramatically increased performance.
  2. Browser Fragmentation. Makes dev a nightmare, since they were constantly unsure which HTML5 elements are compatible with which. They wound up creating Ringmark, a visual demonstration that shows how well a given mobile device and mobile browser combo performs. Ringmark runs the device quickly through a series of tests and shows how many “rings” or levels of tests the device/browser was able to jump through. (Cnet article)


Case Study: LinkedIn’s iPad App 
  • Only 5% native, all one screen. Rest is HTML5. via VentureBeat 5/2/12
  • Heavily used Node.js, a server-side JavaScript development technology (another VentureBeat article that goes into more detail (great beginner’s guide)
  • Lot of performance enhancements came from removing unnecessary design elemeents — the rounded corners, the omnipresent gradients. By making things simple, clean, modern, flat, and even print magazine-like, the LinkedIn app only got faster and better.
Getting into iTunes
Great article on Adobe.com on Apple’s policy on wrapper apps specifically PhoneGap (10/29/12):
In addition to the iOS User Interface Guidelines, Apple’s “App Store Review Guidelines” has additional tips for getting your apps approved. Many relate to HTML-based experiences, including the following tips:
  • “2.12: Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected”
  • “10.3: Apps that do not use system provided items, such as buttons and icons, correctly and as described in the Apple iOS Human Interface Guidelines may be rejected”
  • “10.6: Apple and our customers place a high value on simple, refined, creative, well thought through interfaces. They take more work but are worth it. Apple sets a high bar. If your user interface is complex or less than very good, it may be rejected”
  • “12.3: Apps that are simply web clippings, content aggregators, or a collection of links, may be rejected”
As mentioned earlier, Adobe does not know all of Apple’s rules or processes, but the following indicators can result in rejections:
  • If your app is just a web site wrapped in PhoneGap, it will likely get rejected. There are exceptions to this case, but do not expect that wrapping a web site in a web view will get you into the App Store.
  • If your app requires the user to pinch/zoom/pan to view content (like a web site), it will probably get rejected.  Your apps need to feel like apps and be immediately intuitive.  Don’t make the user work to find how the app functions, and don’t make them navigate past navigational content just to get to something useful.
  • If your app just looks like text on a page with hyperlinks, and has no native-like styles, it will probably get rejected.

HTML5 Wrapper App Creators: