The Financial Times newspaper bucked the trend towards native apps, with a Web-based mobile application. The FT Web app proves once and for all that you can write apps every bit as good as native apps, using HTML5 – the standard language of the Web – rather than having to develop each app in the unique language of each smartphone platform. While its competitors surrender their right to know their subscribers and a third of their revenues to app stores, the FT retains full control. Customers don’t need to download the FT app from an app store they just visit their Website with their browser and sign in with their usual log-on.
Is it surprising that the FT Web app recently picked up a Global Mobile Award for innovation in publishing in Barcelona last month? Get the low-down on why the FT chose a Web app over native and pick up valuable tips on Web apps generally from Steve Pinches, head of emerging technologies at the FT.
What is the FT Web app?
In June 2011, the FT became the first major news organization to launch an HTML5-based mobile app Web. The app, available for download directly through a Web browser, allows readers to access its award-winning journalism easily and quickly across a broad range of tablet and smartphone devices. It features continual and automatic content downloads and improvements and ensures that FT customers can access FT content anytime, anywhere, on a PC and multiple devices, with one login and one subscription payment.
What is the difference between a Web app and a native app?
A Web app is built using HTML5 technology, a catch-all term used to describe the latest generation of Web standards, including HTML, CSS, and JavaScript, along with several dozen other technologies. These technologies are evolutions of earlier versions and inherit a lot of good practice from 20 years of Web-like accessibility, security and compatibility. As they are not owned by any one corporation, they are universally well supported.
Native apps are built using the preferred technology of one specific platform and operating device, so Apple, Android and BlackBerry devices all have different technologies to work with. We can compare it to building a train for a particular gauge of track, then having to build another train when you want to run your service on a different network that uses a different gauge.
Native apps and HTML5 apps differ not just in how they are made but how they are accessed. An HTML5 app is simply a Website – you visit it in your browser, and you’re done. A native app must be downloaded and installed on the device, generally through an app store like the Apple App Store or Google’s Android Market. These app stores are controlled by their owner and may apply charges, rules and policies – these are never a constraint with HTML5, distributed purely via the Web.
What is the difference between a Web app and a mobile Web site?
The main difference is that the app makes the whole edition of the FT available for you to read completely offline. This includes the images, newspaper graphics, and all articles.
Not only does this mean the app works in areas with no data coverage, but also that the user gets an ‘app-like’ smoothness when using it compared to a Website, as the content has been downloaded and stored on the device.
The fact that it can be saved to the home screen of the device, and then open full-screen in exactly the same way as a native app, using the kinds of interactions people have come to expect of native apps such as swipes and fixed page elements, also differentiates it from a normal mobile site.
What made you decide to produce the FT Web app?
Building an HTML5 app benefits the FT in several ways. It makes the development of apps for an increasing range of new tablet and smartphone devices easier and quicker. We are also able to maintain a direct relationship with our customer. This is important as we want to continue to offer customers flexibility and freedom of choice with access to our global journalism anytime, anywhere, with a single login or subscription.
It also allows the following benefits:
• Reading offline – saving a shortcut to your home screen so you can read it offline, at any time, just like one of our existing apps.
• Web browser access – no download needed.
• All access – one registration or subscription will offer customers access to FT content through a range of devices or on a PC.
• Speed – the new app offers improved performance.
• Automatic updates – instant product improvements with no need to download new versions of the app.
How much of this decision was driven by development issues and how much was it driven by the restrictive nature of proprietary app stores?
As mentioned, using HTML5 enables both easier development and the ability to maintain a direct relationship with the customer.
How successful has the Web app been to date?
Since its launch in June 2011 the FT Web app has been viewed by over 1.7m users, with over 40 percent having bookmarked it to their home screen. It has significantly boosted traffic, with mobile now driving 15 percent of subscriptions and 19 percent of traffic to FT.com.
Having done a native app previously, how much harder/easier was it to do an app of a similar quality/user experience?
HTML5 development uses the same tools and techniques as Web development for desktop Websites, but has a far larger variety of devices to test on. This means the FT was able to iterate, test and redeploy much more quickly than the development cycles for a native application. Development was much faster and more efficient, and we were able to quickly gain feedback on functionality.
Native app development is generally easier as it is designed for one platform and libraries of frameworks, components and templates are available from the platform (Apple, Google, RIM or Microsoft). The tools used in native app development are generally those that belong to the same family as the platform itself, so Android development typically involves the Java development environment Eclipse. Apple iOS development would favour Apple’s own development tools such as XCode, and Windows Phone development would require Microsoft Visual Studio. Web development is completely different because there is no vendor-specific platform, so there are a huge variety of tools and technologies that developers can use, and it’s simply a case of using whichever ones you prefer.
What features were you easily able to include in a Web app and what was harder or not possible?
The main challenge was the fact that we were very much breaking new ground. The breadth of tools and documentation available for native apps and even desktop HTML5 development wasn’t yet there for mobile-based Web app development. In addition, the usual testing tools for both functional and performance testing didn’t exist, so we had to invent our own systems and processes to make sure the app worked effectively.
A second challenge was ensuring graphics and video are displayed well. The Webkit browser uses the device’s graphics hardware to improve the smoothness with which animations can be shown, greatly enhancing the user experience. However this also causes other issues such as portions of the screen flickering, or the application scrolling as users type on the keyboard. Solving these problems highlights how we are pushing the boundaries of newly developed Web technology and how differences between devices and differing versions of the Webkit browser can pose a challenge.
Is developing a Web app more or less expensive than a native app?
The initial development costs, for FT at least, are probably comparable. However there are larger cost savings through only having to maintain one code base, and having a single hosting infrastructure. So the cost savings are realized over time, rather than necessarily at the time we built the app.
How many platforms is it available on? How many do you plan?
The FT Web app is available in the browser on Apple devices, but also forms the basis of our Android app, which is built using a mix of HTML5 and native technology. The Android app is available on large-screen tablets and small-screen Android phones, and an FT India app available for both Apple and Android devices. We are also looking at launching versions shortly for RIM’s QNX platform, Windows 8 and Kindle Fire.
Is it easier/cheaper to promote a Web app than a native app?
If your native app isn’t performing well in the App Store, your options are really quite limited in terms of driving usage. Typical online marketing techniques are all but useless, and really you are at the mercy of either a big, traditional marketing spend, or on hoping that the particular technology company who owns the app store you’re in promotes your app within one of the home-screen categories. You may be able to track to downloads from a display-based ad campaign, but the rich fabric of internet traffic-driving is all but lost.
We are just beginning to scratch the surface of how social media, deep links and inbound traffic from search and search engine marketing (SEM) can link into our app, and how we can create links out of the app as well via sharing, however it is clear that being part of the Web, enables the Web app to benefit from inbound linking to a far greater extent than a native app.
What has been the impact of HTML5 on mobile development?
I think there have been three main effects. The first has been around how people approach their native app development. More and more developers, including big guns like Facebook, Flipboard and others, are realizing that even if you have a ‘native’ app, it makes sense for the majority of your code to be Web-based.
I think the second big impact has been on UI. There’s an expectation amongst mobile and tablet users that content doesn’t appear ‘raggedly’ as it often does on the Web. They expect it to feel like it is tailored to their device’s screen size. By using media queries and other Web-based techniques, we are beginning to move beyond a world where developers or designers obsess about what their Website looks like on a standard 1024×768 desktop monitor.
Lastly, there’s been an impact in terms of responsibilities. Suddenly there’s a clear connection between the mobile experience and the legions of developers who have been solely focused on desktop development. It’s become socially embarrassing for a developer or designer to be building a desktop Website without having thought about how it responds to different screen sizes and resolutions. Once this becomes ‘business as usual’ for developers, there will be another large surge in mobile innovation.
HTML5 is often portrayed as the silver bullet – in what ways is correct/a misconception?
It’s actually two misconceptions. The first is that when we talk about HTML5, more often than not we’re really just talking about the Web. And does the Web gracefully work on multiple screen sizes and browser stacks? Unfortunately not. It takes hard work and strong resourcing to make a Website work across multiple platforms and screen sizes. And there’s no prize for making it work on all of them: you need to work out which ones you care about, and which ones you don’t. And for the ones you don’t, make sure you have a plan ‘b’.
To brands et al who are debating native v Web app, what would you say are the pros and cons of each… in a nutshell?
As Flipboard’s Mike McCue said at SXSW this month, don’t worry about whether you are building a native app or a Web app, focus on building a great user experience. Let the tech solution fall out the back of that.
But, of course, there are commercial considerations that must feed into this. It’s important to be clear to what extent you feel comfortable running your business and audience within someone else’s office. What’s your strategy if the app store terms should change? Do you have a direct relationship with your customers so that you can communicate with them and enable their access cross-platform?
What are your top 5 best-practice tips for building successful mobile Web apps?
• Try to avoid mirroring a particular phone user interface (UI). Give apps a generic Web feel.
• Make sure you think about testing up front. Consider how you can test the app on multiple devices.
• Don’t design just for one screen size. Think how responsive your design will be and what happens when new screen sizes come out.
• Look at how you will get data out of your CMS, and plan to have a decent API. Think about images and how you can create multiple sizes of images for different platforms.
• Listen to the developers and work with the technology and not against it. Some things that are easy in native apps are really hard on the Web, and vice versa. Make sure you don’t spend four weeks trying to do something you don’t really need to do.
The FT Web app was developed by Assanka. The FT later purchased the company, how come?
The acquisition of Assanka supports the FT’s strategy to deliver world-class journalism anywhere, anytime on any device, delivering new digital products and services that engage our busy readers.
Assanka has played an important part in the FT’s recent digital and mobile successes, including the launch of the FT Web app and contributing to our recently launched Android app and supported our blog platforms, including FT Alphaville.
This is a unique opportunity to bring talented and very creative software engineers with proven skills in emerging Web technologies into the FT team. It will further boost our momentum in digital journalism, help us to improve the development processes and allow us to maintain our edge in this strategically important area.
• Be the first to know when mobiThinking adds new stats, guides, competitions etc… follow mobiThinking on Twitter: @mobithinking.
Also see:
• Mobile applications: native v Web apps – what are the pros and cons?
And don’t miss:
• Most popular content on mobiThinking in 2011
• Mobile events 2012: best conferences, great discounts and free tickets
• The insider’s guide to mobile device security
• The mobile city project – the blueprint of a truly mobilized city
• The insider’s guide to device detection
• The insiders’ guides to world’s greatest mobile markets
• Guide to mobile agencies
• Guide to mobile ad networks
• Guide to mobile industry awards
• The big compendium of global mobile stats
Leave a Reply