News flash: the mobile mind shift has already happened. There is no longer any debate about whether businesses should invest in their mobile presence - the question of value has already been resoundingly answered in the affirmative.
What does remain, however, is ongoing questioning and confusion about how to deliver the best mobile experience to customers. Beyond just technology considerations, the conversation is still active around engagement strategy, measurement of business impact, optimization of the design and user experience, and effective testing. There is no single "best" combination of tools, techniques or strategies that will apply universally, but in this article, I will examine some patterns starting to emerge, and make recommendations along those lines.
Defining Your Mobile Strategy
If you are reading this, chances are you already know the differences between native mobile apps, hybrid apps, mobile web and responsive design. Over the past 12 months, a common understanding of the difference between these approaches has emerged among marketers and technology buyers. The question of whether to "go native" is becoming harder to answer with a justifiable ROI.
Among the client leadership that I talk to on a daily basis, the significant cost of investing in multi-platform native apps (and the often-ignored costs of managing the app store admission process and the subsequent ongoing maintenance of the apps) is driving the decision toward mobile web and responsive design.
Given the obvious benefit of being able to manage content, brand, design and function in a web-first approach without redeploying a new version of an app (that then has to be installed by the user), this decision is even more attractive, and we are seeing this happen as a matter of routine now. To be clear, I'm talking about content-rich, consumer-focused and B2B applications here, not gaming applications, scientific sensor applications, external hardware interface apps or intensive data processing apps. Those fall clearly into the category of native, platform-specific development.
As more and more accept and adopt the responsive web and measure the effectiveness of these efforts, one thing is becoming clear: your mobile presence should not merely be a slimmed-down version of your desktop website. My company has advocated a "mobile-first" approach to responsive design since the concept first emerged. What this means, simply, is focusing on delivering a differentiated experience in mobile that reflects what consumers are truly looking for when they are out and about, or simply lounging on their couch watching television with their tablet in hand.
If you accept the premise that consumers are discriminating and that first impressions matter, it's almost better to have no mobile presence at all than to have a hastily-assembled, half-baked or worse, useless, mobile site or app that underwhelms. There are very few second chances at winning over an audience, so an investment in defining your mobile strategy is money well spent.
Helpful Design, Development & Testing Tools
But let's switch focus back to the tactical stuff, the premise of this article. What tools and technologies are available to make your journey less painful? What can you gain by using commercial or open-source tools or libraries versus building your own?
As I mentioned earlier, this article doesn't attempt to cover every facet of the mobile experience management landscape, and if you're still reading along, I assume you are already familiar with the classic tools that support native and hybrid app development (e.g. Xcode and Objective-C, Android SDK and Java, BBJDE, PhoneGap, Appcelerator, Netbiscuits). Since I'm extolling the virtues of responsive design (and mobile web), I'll highlight a few tools that I'm seeing in common use today which facilitate design, development, and testing in that context.
Unlike traditional web design, where we could rely on static wireframes and comps to convey a layout and styling direction, responsive design requires a leap of imagination to envision transitional behaviors. For most of our clients, seeing is believing, and being able to observe a grid flex before their very eyes has helped tremendously in bridging the imagination gap.
Brad Frost's Responsive Patterns site is an invaluable resource in visualizing some common layouts and page elements in a responsive context. Sometimes it's helpful to show a site design in a realistic device shell to fully convey the intent. CloudComp is a simple, lightweight tool that provides this capability to designers.
Prototyping a responsive site is extremely helpful, allowing you to rapidly demonstrate working concepts and build consensus. The most effective project teams I've seen delivering responsive sites are those that collaborate tightly between design and development, sometimes quite literally sitting side-by-side and modifying the design and code in real time. Bootstrap — an open-source project that sprang out of Twitter — is making waves as a framework for front-end developers to deliver responsive sites. We are seeing it used heavily for rapid prototyping, along with ZURB's Foundation framework.
On the front-end development side of the equation, Modernizr is an indispensable tool for browser feature detection. Paired with polyfills to plug the gaps in HTML5 support across different browsers, developers can reliably build next-generation web apps without resorting to hacks or throwing an "unsupported browser" message to users. Respond is one such polyfill used heavily in providing CSS3 media queries support for IE8 and below.
When it comes to managing complex stylesheets, particularly in team development environments, CSS3 preprocessors can save significant headaches. Sass, LESS, Stylus, and Switch are a few widely used options. All of these systems provide some basic programming language constructs that are simply not available in CSS, such as variable interpolation, arithmetic operations, modular code reuse and nesting, among other niceties.
When it comes to mobile software testing, the ecosystem of tools, services and vendors has really flourished in the past two years. Cross-device compatibility testing, which used to be a tedious, labor-intensive exercise, has matured significantly as a result of the readily available test automation platforms such as DeviceAnywhere, Sauce Labs, GorillaLogic and PerfectoMobile. Of course, manual testing is not going away any time soon, but fortunately the same level of innovation has given us solutions like BrowserStack, BrowserShots, Adobe EdgeInspect, Modern.IE and Spoon.
The Next Wave
Today's landscape of tools, technologies, and practices is light years more advanced than it was just two or three short years ago. There is no doubt that we are entering a golden age of innovation in mobile experience delivery. As often happens, good ideas build upon themselves, and the pace of innovation accelerates at the nexus of consumer demand and expectation, advancements in enabling technologies, and user-centric design philosophies. If in doubt, simply look back at Apple’s history over the past 10 years and the pattern becomes clear.
We are on the crest of the next wave in mobile computing; one that has already taken us from simply consuming experiences on small screens to unleashing creativity born on the small screen.
Originally published in CMSWire.
GET IN TOUCH
Send us a note. Drop by. Or give us a call. We would love to hear from you.