Designing and building apps cross-tablet?
Over the next couple of months we will see a variety of tablets showing up in the stores. Ranging from end-consumer overall iPad competitors like the Samsung Galaxy Tab to enterprise-only devices like the Avaya Flare.
These new tablets will mostly have differing sets of specifications packed onto a number of different operating systems. However, there are a couple of common specifications we can safely expect in these newcomers:
- They all have a touch screen display with multi-touch support that allows – to some extent – the same type of physical user interaction with gestures etc.
- They will all be able to play video, almost certainly H.264 (but the level of HD support can differ)
- They will all have good connectivity support, with WI-FI as the minimum, but most likely also 3G and Bluetooth
The difference will be in the details, like in the level of HD video support (720p or 1080p). So if you have a use case for a more generic app and you pay attention to a couple of important points, it is possible to design and implement an app to run on as many devices as possible.
So how can you go about building your app cross-tablet?
Start with the screen…
Your base design choices should be made with regard to the screen:
- What is the screen resolution and screen size?
- What is the aspect ratio?
- Device orientation: am I going to use portrait or landscape mode, or both?
The size of the screen is important. If you have a high resolution but a small screen, you need to design your interface so images don’t end up being too small. When you look at resolution, the majority of new tablets support a minimum resolution of 1024x768 so using one of these values as base width/height when designing your app will get you safe.
The aspect ratio matters as well. The iPad is one of the few that holds to a 4:3 aspect ratio, most tablets announced will favor 16:9.
Sticking to either portrait or landscape mode could simplify your app design greatly… unfortunately that can be a very tough decision to make. Some users might use their tablet in portrait all the time, others in landscape. The size and aspect ratio of the device also makes a difference. A 16:9 in portrait has more of a “stretched” feeling, which makes me favor it more in landscape for example.
The best way to go here is with flexible layout designs. Design your interface in such a way that it adapts automatically to either portrait or landscape, and avoid creating different designs for the different orientations.
To make a comparison: the iPad has a 9,7” screen with a 4:3 ratio and a resolution of 1024x768, the Blackberry Playbook and Samsung Galaxy Tab favor a 7” screen, 16:9 aspect ratio and consequently 1024x600 as resolution.
Operating system and development platform
The development platform is mostly determined by the operation system. Apart from iOS that currently dominates the market because of the iPad, it looks like Android will have most chances to catch up since a lot of Android 2.x powered tablets have been announced. But then there is still the new Blackberry Tablet OS, HP WebOS and of course Windows 7.
When building your app you will need to follow-up all operating systems (and preferably even devices) you want to run on. Even if you focus on only one operating system, you’ll still need to test and possibly modify your app to make it compatible with every new version of that OS.
Native app and HTML-5
Although HTML-5 does not offer the same user experience, you can still go quite a long way. A good example of this is Treesaver: it provides app-like behavior on the iPad when it comes to reading an article/magazine, but it is entirely built on web standards, see the example of ICIJ.
But there is a middle way too: most platforms make it easy to combine HTML-5 pages in your native code and doing so can offer you a good balance of functionality, code sharing and maintenance cost.
Cross-platform development frameworks
Flash and Adobe AIR market
Another special case to mention is Flash support. Flash is still not officially supported on iPad and this is unlikely to change, making Flash support one of the biggest claims of other tablet manufacturers.
When it comes to distributing your app, the new Adobe InMarket can help you there as well… again… just not when it comes to the iPad and Apple AppStore.
Multitasking support is also important when it comes to designing your app. The iOS 4 operating system that runs on iPhone has support for multitasking, at time of writing the iPad has not (but should have with the new version of its iOS). Android devices all have support for multitasking.
But… there is ‘true multitasking’, where an app continues running in the background, and there is what we can call ‘pseudo multitasking’: it looks as if the app continued running but in fact it was paused by the operating system.
If you want tasks to execute in the background while the user is not having the app open, you will need to know the specifics of your operating system and design and develop accordingly. And even if you don’t use multitasking features, you should still design for an environment where your app gets paused or keeps running in the background instead of starting up anew every time.
Extra features and functionality
If you need functionality like gyroscope, accelerometer, light sensor, video camera… you obviously need to check the availability on your target devices. Even when it comes to integrating with Google add-ons like Google Maps, be aware they might not always be there (unsupported Android devices might not have them for example).
Designing and building your app cross-tablet is quite an undertaking, a careful approach can save you a lot of development and maintenance costs later on.
- Determine the devices you want to target, for example: iPad and Android devices with a multi-touch screen of at least 7”.
- Draw out the user experience that will be consistent across devices (screen size, resolution, orientation are major deciding factors here).
- Divide your app in device-specific parts and those parts that can be reused across platforms.
- Sit together with the platform experts to decide on the development and support process for the implementation of both parts.
- Coordinate top-down based on the generic parts: have the application architects design an architecture and a review process that the different teams must uphold.
- Keep a functionality, behavior and technical map that gives you an overview of the similarities and differences between platforms, so you can keep track of them in the long run.
- Test, test and test. Do it early, do it a lot. It’s the only way to find out whether the user experience really works and to see device specific issues pop up.
Category: Touch & Tablets
De Tijd and L’Echo recently launched an advanced digital newspaper that presents tablet users with a new way to experience newsMay 24, 2013