Hybrid applications take many forms. You can create something that mimics the look and feel of native…or you can create something that stands on its own. Trying to recreate native elements can be troublesome because it’s all the more evident when it does not work exactly as expected. Crafting your own design allows you to play to the strengths of your technology (web) while still feeling at home on your chosen platforms.
We knew we wanted several key features for SceneScout: viewing scouted locations (called scenes) by name/proximity/latest, adding scenes, importing portfolio photos from Flickr (and other services), social login and sharing, profiles, and ways to organize your scenes. When a new client comes to a photographer, this tool can help guide the conversation about places to shoot. If you, as the photographer, have your favorite scenes tracked in the app, you can quickly find and share ideas that align with the client’s. Or if you are drawing a blank, you can search nearby scenes that others have uploaded to get fresh inspiration.
Lavaca got us up and running quickly, and it also kept our app feeling fast as we got deeper into the project. Lavaca bundles other libraries such as Hammer.js, a great tool to efficiently handle mouse, touch, gestures, and more across platforms. Allowing Hammer.js to handle all interactions removes the 300ms “click” delay and provides the mechanism to quickly latch on to pinch/zooms, swipes, and more.
Keeping animations/transitions in CSS (simultaneously making sure the elements not visible were not wasting the GPU) allowed us to hook into hardware acceleration and keep things smooth. Whether you are simply navigating to a new page, selecting from the left menu, or uploading new images, we want it to feel fast to you.
Across the platforms
Even when focusing on mobile, we can ultimately assume little about a user’s device. You can certainly say a project is going to be iPhone only and limit yourself to two device types, but where’s the fun in that? It’s 2014 and we finally realize our canvas is not fixed. Progressively enhancing based on features and thinking responsively from the beginning is vital. Even if you think you only want to support a limited set of devices, that limited set of devices might change tomorrow. If the device dimensions don’t change, just a new OS version can also affect your screen real estate (such as when iOS 7 came along and all of a sudden the 20px status bar now overlays the app).
Even limiting yourself to the WebKit domain has downfalls. FirefoxOS and Windows Phone have great browsers that support a lot of (and sometimes more than) what Chrome and Safari provide, usually already unprefixed for CSS properties. Costs for these developer programs are much less (or nonexistent) than the iOS and Android programs. There’s little risk with little effort - if thought about at the beginning of your project. Using feature detection will make an app more robust and work well on a new platform with minimal changes.
We released SceneScout on iOS first, but since we were using typical responsive web design techniques and testing for features, the app just worked on Android KitKat. While we have not expanded to other platforms yet, they are not far out of reach at this point.
On a smaller scale I was able to complete my game Path to Palindromes on four platforms (iOS, Android, Windows 8.1, and Windows Phone) in a month’s time… as a side project. Reading the new tutorials posted by Mozilla and Adobe, it appears getting it on FirefoxOS will be straightforward as well.
PhoneGap essentially gives us a blank canvas. We can make something that feels like a website or looks like a native app. Yet, it also gives us the freedom to forge a new path and create an app that feels fresh and unique. Whether you go native or go hybrid, it takes time and effort to design and develop an app with polish. That polish, though, is often the ultimate differentiator.