29 October 2012
There have recently been some grumblings from the development community that Apple has rejected their PhoneGap apps for not being "native enough". By itself, this rejection isn’t that surprising. Apple has strict rules and guidelines on what they will and will not accept into the App Store. What did surprise me is that people were blaming PhoneGap as the reason. This accusation is not accurate, and this article attempts to clear things up.
Note: Not all of these apps mentioned use PhoneGap, but they do use HTML for the UI.
Apple rejects applications that do not:
This applies to all apps, not just apps developed using HTML for the UI. Adobe is not Apple, so we do not know the exact approval rules beyond the "App Review Guidelines" and "App Store Review Guidelines" provided by Apple. However, it is clear that approval largely comes down to the user experience: how the user interacts with the app and how it "feels" on the device.
The "iOS User Interface Guidelines" from Apple has a large amount of information about what is and what is not acceptable for Apple's ecosystem. In these UI Guidelines, Apple specifically addresses "web-based designs":
"Reconsider Web-Based Designs
If you're coming from the web, you need to make sure that you give people an iOS app experience, not a web experience. Remember, people can visit your website on their iOS-based devices using Safari on iOS."
Be sure to read the full iOS User Interface Guidelines for tips on creating a great “app” experience using HTML and related technologies.
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:
As mentioned earlier, Adobe does not know all of Apple's rules or processes, but the following indicators can result in rejections:
App store approval often seems like a blurry line and is particular to the individual apps that are being evaluated. Each app is considered on its own merit, functionality, and user experience. The iOS User Interface Guidelines and App Store Review Guidelines are also living documents – they may change as new OS versions are released or new app designs bring up new issues. Be sure to review the guidelines periodically.
Using PhoneGap does not absolve you from following Apple's rules/guidelines. PhoneGap applications are not going to be immediately accepted because the user interface is built with web technologies.
PhoneGap does not attempt to build your UI for you or to conform it to Apple's arbitrary guidelines. When building PhoneGap applications, the designer or developer controls the UI/UX and ensures it corresponds to guidelines for a particular platform or ecosystem. As you design and develop your PhoneGap applications, consider what makes an application “feel like an app” or “feel native.” Many of these considerations fall into one of the following categories.
First, consider the following questions with respect to your application:
Both of these images captured by the PhoneGap emulator were captured from the exact same application. The image on the left has HTML content but no CSS style sheet attached. If you compare the visual experience, the application on the left looks like web page content. There are no styles to give it the appearance that is expected of an application experience. Alternatively, the image on the right looks like an app: it has a header area that contains navigational elements, it has a scrollable content area, and each list item has UI elements that prompt the user to proceed through an experience or workflow.
First, it is just a web site (my weblog) wrapped in a web view. Apple frowns upon the practice of wrapping web sites with a native shell. The wrapper is an empty shell that contains no logic, just a reference to the remote web site. It will fail in offline scenarios. And there is no differentiation from a mobile web experience or added value to offset this failure.
Secondly, the user interface has not been optimized for a mobile experience. The user must perform a pinch/zoom gesture to read any content. Additionally, there is no touch-friendly navigation, there is no discrete differentiation between navigation and content, and the overall experience does not have an app-like feel.
Develop your applications such that they feel “at home” when placed next to a native application. You don’t have to mimic every single native UI style, however user interaction paradigms should be similar. Make the user interface intuitive and clean. When considering what is meant by an app-like experience, look at other apps that are already out in the public and examine designs that have already been approved by Apple. Numerous resources on the web compare existing app user interfaces including:
Also many tools and frameworks help you make your HTML experiences feel more native. Here are just a few to get you started:
This is not an exhaustive or complete list in any way. A lot of frameworks mimic a native-like experience. Or create your own interactive experience without using any frameworks.
If the user must click an HTML link to load a separate page, and there is a disjointed transition between the views, you will likely need to optimize the experience. Apple seems to prefer applications that have a unified feel and continuous experience. If the user performs an action within the app that gives the impression that the current “page” is unloaded and a new page is being loaded, then you take steps to make this transition more seamless. Try introducing single-page architectures with asynchronous loading of data and dynamically updating the content. Or try to make the transition between pages lighter and faster, with less of an interruption to the user experience.
Optimize the processes and experience of getting data in and out of your application. First, minimize your data transaction overhead by only sending data as it is needed, in a lightweight format. This optimization reduces latency and generally makes your app “feel faster” by reducing total time from requesting data to displaying it on the screen.
Pay particular attention to all transitions and animations within your application. These activities include transitioning from one view screen to another or animating elements within your HTML experience. If your app stutters, flickers, or provides a less-than optimal experience, revisit how you move app elements around the screen. Look into techniques to force GPU rendering of HTML DOM elements using just CSS styles. In many cases, these techniques can improve overall application performance.
Additionally, add simple nuances like indeterminate progress bars or animated spinners to provide status during make time-intensive processes, like transactions with the server. These UI indicators go a long way to helping the application feel faster and more “native.”
Last, but by no means least, pay attention to response times within your application. These response times can relate to processing user activity or response times from the server. Apple generally does not like slow or unresponsive applications. If data takes a long time to load from a server and be usable, then Apple may reject the app. Likewise, if the user clicks a button, and nothing happens for a few seconds, this sluggish behavior could be grounds for rejection. You application needs to provide some level of interactivity and feedback to the user, even when operations are happening in the background.
In conclusion, pay attention to your user experience. Apple's approval process varies depending upon what your app does and how it does it. Do not assume that the use of PhoneGap means that you don’t have to abide the App Review Guidelines and App Store Review Guidelines from Apple. In general, Apple pays close attention to the quality and overall user experience of an application. If it does not perform well, is buggy, is aesthetically displeasing, or if it offers no differentiation from a mobile web experience, then it is likely a candidate for rejection from the App Store. Apple has set the bar very high for the quality of applications it accepts within their ecosystem. The more you focus on a quality user experience, the more your chances of success improve.
For more examples of how to improve the experience of your application to make it feel more native, Greg Avola, the creator of the popular Untappd application, has an article on the ADC, "Creating apps with PhoneGap: Lessons learned."