What is a cross-platform app? An application that reaches your customers through whatever device they have in front of them, wherever they are: while using a Windows* PC at work, an Apple* iPad* at the local coffee shop or an Android* phone on the go.
Why HTML5? Rather than becoming an expert in a deluge of programming technologies—C# and Windows APIs and Visual Studio*; Objective-C and iOS* APIs and Xcode*; Java* and Android APIs and Eclipse*; and so forth—you can take advantage of cross-platform HTML5 languages, APIs, and tools. Rather than porting code needlessly, you can focus your efforts on the things that really matter: developing the right features for your app and perfecting the user experience. Plus, because your code is written using HTML5, your app works on new devices as they hit the market.
If you’re using HTML5 today to build rich, interactive web pages (or web apps) then you’re already familiar with the benefits of using HTML5 as a tool to deploy across multiple browser and OS platforms. Cross-platform apps built on HTML5 are a logical extension to this model, where the platform is not a browser (such as Chrome*, Safari* or Firefox*) but the internal web runtime (aka webview) on the target platform.
Today’s cross-platform apps face opportunities and challenges. The multitude of device form factors continues to expand, with the display screen being one of the key components. Today’s cross-platform apps need to adapt to varying screen sizes, resolutions, aspect ratios and orientations. Today’s devices also offer many new capabilities, such as camera, accelerometer and GPS. Cross-platform apps should be able to take advantage of these capabilities in a portable manner and still deliver a rich and contextual user experiences across a wide range of devices.
HTML5 apps are not limited to web pages viewed in a browser. You can also package your HTML5 code and deploy it as a locally installed hybrid web app. This enables use of the same distribution and monetization channels as native apps, as well as the same installation and launch experience. Rather than running within a sandboxed browser window frame, your app runs in a full-screen webview, with full control over screen real estate and device capabilities.
This article will explain the following best practices for building cross-platform HTML5 apps in this new device-centric world:
Your HTML5 app is only cross-platform when each of your target platforms support all the APIs used by your app. This is important in practice for two main reasons:
One important cross-platform library API in the new device-centric world is Apache Cordova*1. Cordova enables access to device capabilities—such as camera, accelerometer and geolocation—for access in a consistent manner across multiple device platforms. Using Cordova, you can develop one HTML5 code base that runs everywhere, taking advantage of device capabilities to deliver rich and contextual user experiences, even though device capabilities are not yet available through the standard HTML5 APIs. Cordova provides access to native implementations for each target OS platform, taking care of the details of how to interface with that OS to gain access the device capabilities you want. Apps that use Cordova must be packaged as a hybrid web app (or hybrid HTML5 app); although the code that you develop is portable, your packaged app is device-specific. You can use tools, such as Adobe PhoneGap Build* and the Intel XDK, to package for multiple platforms simultaneously with a few clicks of a button. Plus, Cordova is implemented using web standards, so that it can serve as a migration path to the ultimate standardization of device APIs for HTML5 platform runtimes.
1Earlier versions of the Cordova API and libraries were known as PhoneGap*. The name PhoneGap is now used for Adobe’s distribution of Apache Cordova.
To be truly cross-platform, your app should also provide a good user experience across a variety of screen sizes, resolutions, aspect ratios and orientations. There are many techniques available to help you adapt your HTML5 code to various displays.
At the simplest, you can scale your UI components and fonts according to the screen dimensions and, optionally, adjust padding around the UI components to better accommodate various aspect ratios. You'd usually want to design for mobile first, then scale up from there to ensure usability on the small screens. Also remember that every device really has two sets of dimensions to design to: portrait and landscape. To achieve scaling you can use CSS relative units or rely on a responsive UI framework like jQuery Mobile or Sencha Touch to do the heavy lifting for you.
Images may require more than simple scaling, as you may want to crop an image differently or load a different image asset optimized for a different resolution. Please see this guide to select the right responsive image solution for you, and this overview describing some proposed web standards for support of responsive images.
If your app's UI is made up of multiple sections you may want to consider a fluid layout, in which you rearrange (and even selectively hide) the sections based on the available screen real estate. Please see these responsive layout patterns and responsive navigation patterns for ideas on how to design your own responsive UI. To achieve fluidity, you can apply the responsive web design technique, or utilize one of many fluid grid systems to do the heavy lifting for you.
For example, a common complaint leveled at the Android platform is the inconsistent behavior of audio and video playback across various manufacturer implementations. Another example is the behavior of the HTML form input field of type=“datetime” which triggers the use of a native date picker on an iOS5 device but shows a simple soft keyboard on Android and older versions of iOS.
What can we expect in the future for HTML5 development tools and resources from Intel? Intel is committed to bringing the best experience possible for developing cross platform HTML5 applications on Intel Architecture. We will offer tools and resources to educate, train and support developers through the HTML5 Portal of the Intel Developer Zone.
HTML5 technology applied to building device applications is new to many developers. Intel offers one of the world’s largest software developer programs and by channeling resources through our HTML5 portal we hope to provide access to the resources you need to develop and deliver applications that can run across platform boundaries. As an OS-neutral advisor, Intel can offer important HTML5 technical resources that will help you to write once and deploy across multiple platforms.
See Five Useful Tips on Getting Started Building Cordova Mobile Apps with the Intel XDK for a quick introduction to the key differences between web apps and mobile apps. This blog is very helpful to those who are new to hybrid mobile app development.