As a software engineer, I build a travel app comprised of a mobile website and hybrid apps for iOS and Android.
I’m dedicated to finding better ways of developing them. Here, I'd like to share some of the best practices learned along the way.
NB:Ken Tabor is a product engineer at Sabre, working on the mobile travel app TripCase. This article is based on a talk he gave at the Big Design Conference.
“Mobile first” is a phrase reminding us to create experiences serving the needs of all our customers. Does that take extra effort? Absolutely!
Creating a user experience (UX) that balances attention to detail with flexibility is an incredible challenge. It’s one worth tackling because people are discovering and consuming websites on their phones and tablets more than ever.
We can’t possibly predict exactly what those devices will look like, and yet we must guarantee our projects work on them.
For that, we need powerful tools:
1. analytics
2. on-device debugging
3. emulators, simulators, and pretenders.
Pick fantastic tools for amazing results
Starting a project, we all plan our work trying to reduce complexity by discovering unknowns. It’s a perfect opportunity to invest in “brain-sweat,” finding edge-cases and discovering happy-paths.
Because we designers and engineers are creators at some point, we must stop planning and start building. We build things for people to use and to build amazing things, so we need fantastic tools.
In real life, picking the right tools for a job seems easy, doesn’t it? Through years of practice with hammers, wrenches and tape, you’ve learned their familiar feel.
You instinctively realize the right fit for purpose gripping the most practical tool when solving problems.
It’s more difficult when it comes to building a mobile website. Sometimes you don’t even know what the options are. Old ones fade away and new ones appear routinely.
Picking the right tools is crucial because it influences how you build your project and affects who will join you.
Keeping current with the latest news about software tools can start with following on Twitter the author of your favorite library, utility, or framework. Look to them for updates on their own work as well as news on others.
A few I follow include Paul Irish and Addy Osmani of Google.
Measure the user experience with analytics
Analytics measure aspects of your customer’s device and their activity as they use your website. Measurements are important because you want to know how often something is used once you’ve built it.
Avoid vanity metrics like “page hits” that sound impressive but reveal nothing actionable. Watch what your customers are doing, what they can’t do, and what they want to do.
It all informs your future changes and enables your team to make smart choices.
Examples of actionable metrics:
Analytics report: Device info by brand and model
Actionable result: Testers decide what devices to purchase for compatibility assurance
Analytics report: Operating system and version
Actionable result: Engineers decide when to support new system features
Analytics report: Screen resolution
Actionable result: Designers decide at what sizes they lay out, menus, and draw art
Tame the big data tiger
If the analytics tool you choose provides default dashboards exposing all of the measurements, it might feel like big data overload.
Conquer that by creating custom dashboards reporting on specific performance of your website such as measuring legacy feature use, adoption of recently added features, or device, browser, and operating system popularity.
Crafting custom views of your usage data brings actionable knowledge to the surface. Running the reports weekly provides trends allowing you to align with your customers’ needs better enabling them to use your technology.
I’m most familiar programming to Google Analytics, but there are many more in this highly competitive space. Have a look at ones from KISSmetrics, ChartBeat, MixPanel, Optimizely, and Piwik.
Code on device removes doubt
Most of us write our code and create our artwork on large-format flat screens connected to high-end laptops at desks beneath perfect ambient lighting.
Multiple desktop browsers run our web apps and it’s a luxury creating in this environment. All that powerful convenience is a trap.
None of it matters until we see our product on actual phones and tablets. We realize code running on devices removes all doubt, and more importantly, gains confidence.
As part of our engineering culture, we don’t call something done until we see it running on device. Only then is it tagged ‘ready to ship.’
If you test on Android and iOS powered phones you’ll find Safari and Chrome desktop browsers are particularly helpful. When you experiment with these, you’ll find each has a remote debugging feature letting you connect a phone to your laptops via USB.
Then you can inspect through the desktop browser your HTML, CSS, and JavaScript running live on the mobile hardware.
Casually having concrete insight like that enables you to polish, test, and fix on device while staying more deeply in your creative workflow.
Your device library should generally have 10 handhelds for testing. Decide what devices to buy and test on by reading your analytics reports.
When a device trends down below 5 percent of use, take it out of rotation. When a device trends above 5 percent of use, add it to your library.
For more guidance on assembling a device lab I invite you to discover the work of Lara Hogan of Etsy. She has tweeted, blogged, and spoken about how they assemble a collection of handhelds for testing their site during development.
Look for her presentations on SpeakerDeck and videos on YouTube and learn what she has to share.
Coding when the hardware isn't there
If making mobile apps is my job, and code running on hardware builds confidence, why wouldn’t I have mobile devices to test? It happens all the time.
Some days I’m working from home, or the coffee shop, a device is out on loan, one of my teammates grabbed it first, or it’s unique enough that we don’t have one yet.
In this case, I improvise. Tools installed on my laptop help me develop code without hardware, but with a mobile-first attitude:
• Apple’s iOS Simulator pretends to be one of their phones or tablets, of a chosen size, and operating system version
• Google’s Android Emulator pretends to be one of many brands of phones and tablets, of a chosen size, and operating system version
• Mozilla Firefox, Google Chrome, and Apple Safari browsers have rich developer tools emulating screen sizes, user agent strings and geo-location results, among other functions
All of these tools are solid options to stay productive while keeping the user experience in mind. Any are better than simply blasting out code without consideration and hoping it will work.
All of that is what's before mobile-first
As you plan, design, and build your product, you should think about mobile first before shipping updates, before writing code, and before considering a feature is ready to start.
Because the work can be difficult, choose the right tools to turbo boost your creative workflow and amplify your abilities.
Choose empowering front-end tools and reduce the friction of debugging, polishing, and improving your website and app.
Empower your team to make positive changes without fearing failure.
All of your actions should be informed by, or in the service of, a fantastic user experience.
NB: Ken Tabor is a product engineer at Sabre, working on the mobile travel app TripCase. This article is based on a talk he gave at the Big Design Conference -- (slides, here).
NB2:Experience image and Nokia Lumina and Microsoft Surface image from Shutterstock