White Paper

HTML For Mobile App DevelopmentBuilding the Right Mobile App Development Strategy

idexcel

IntroductionThe rate at which the mobile app market is growing reflects the important role it plays in the communication space. Statis-tics show that mobility is the primary way people are interacting and getting things done. Mobile phones prices and browsing rates get cheaper every day, and number of mobile internet users have multiplied manifold in the past few years. This has also led increase in the download numbers of mobile applications. Uber, Facebook, SnapChat and many more apps are few examples where users login only with their mobile devices. Hence, gradually, the user interactions are moving from desktop to mobile. As per prediction by Gartner, mobile app development projects that target tablets and smartphones will outnumber desktop by 4:1 by the end of 2015. As per GIA report, by 2017, the market for enterprise mobility will reach a global value of approximately $174 billion.

As far as mobile internet connectivity is concerned, the anticipations are high and online marketers are watching the expo-nential growth of mobile adoption. The trends have been encouraging, and the mobile app development segment has taken off, focussing on usability, utility and functionality. Most CIOs expect mobiles to bring drastic changes in their businesses such as reduced costs, improved employee productivity, generate more revenue, and create more opportunities.

Creating a great user experience on a small screen requires different thinking, however, by using the right framework, developers can easily create compelling apps for several platforms in one go that work offline and have access to all the advanced features of modern smart mobile devices. HTML5 allows developers to write code once and create cross-plat-form mobile application that are designed to work on a tiny screen, as well as on a wide range of operating systems and devices, and this has led to increased numbers of app development for mobile devices. This exponential growth in the enterprise mobility space and ease of development has enticed several companies into mobile application development without much planning for strategy formulation. Although businesses see the inherit possibilities of mobility, but the teams have not been able to prepare a well-defined formal strategy on how to attain these goals. The challenge is not the ideas regarding great mobile apps, it is how to prioritize and align all these ideas into a roadmap with a formal mobile strategy. This includes taking measures to simplify the core processes, build informative, intuitive and elegant apps. Despite being equipped with tools, processes and resources to create such apps, the application developers often face a plethora of challenges.

2 P a g e

HTML for mobileidexcel

What are your business goals when it comes to mobile?

Business Goals from Mobile

Reduce operating costs

Increase employee productivity

Engage customers whereever they are

Create new revenue paths

Disrupt the market

76%

76%

72%

64%

12%

Mobile App development- Challenges and Common Mistakes

Mobile ecosystem can be very complex, and there are additional complexities involved in creating well designed apps that provides a good user experience while maintaining the experience during the involve-ment of this ecosystem. Mobile apps are important, however, the way they are built, maintained and deployed, remains a source of great debate. Once downloaded, one out of four mobile apps is never used again. This is an indication that a large percentage of apps are falling short of the end users and customers’

Source - http://asmarterplanet.com/mobile-enterprise/blog/2014/08/departments-take-back-control-mobile-channel.html

3 P a g e

expectations. People demand and expect immediate benefit from their mobile experience. These apps not only have to look and feel good, but at the same time must be available, should be intuitive and provide appropriate content connecting with the back-end systems, secured with the single sign-on and must be role-based. Integration of the app with the back-end system is a necessity so that the users can access the information whenever they want and anywhere they want.

Mobile apps go deeper then front-end UI

Short time to market

Web? Hybrid? Native ?

Teamwork

Industrialize dev

Integrate with SDLC30%of the value and effort is visible

70%of the value and effort lies under the surface

Front-end

Back-end

Operations

Security

User engagement

Connect to back-end

Efficient and flexible push notifications

Track and leverage location

Offline availability

B2E app distribution Push upgrades

UserAuthentication

MalwareDetection

DataProtection

Manage and enforce app verions

Track problems that affect UX

Ensuring continued support in a quick changing landscape

HTML for mobile

4 P a g e

Also, delivering a good contextual experience requires aggregating information from several different sources. Gathering the contextual data is one big challenge as it is stored on multiple systems of record and the app will need to connect to them. Device proliferation is another challenge. There are 7 inch tablet, 5 inch tablet and 20 inches and more Windows 8 devices, and this requires app flexibility, especially on the client end.

Mobile screen sizes are different with different resolu-tions. They have lower processing powers, and smaller storage capacities. Mobile app development is slow, expensive and frustrating. It takes anywhere from seven months to over a year to build one app, and cost per app can range from $500,000 to $1,000,000. Most CEOs think that the process takes too long.Additional challenges involve identifying the innovative mobile use cases that can significantly impact defined business metrics, dealing with vastly different user

The rich and diverse universe of mobile technologies

Amsartplanet.com

interactions and behaviours, security around appli-cations and devices with so many different operat-ing systems and devices, fragmentation of operat-ing systems and devices, leading to multiple versions of same app, testing so many operating system and devices variants, choosing the best development technology, and changing processes from traditional waterfall to agile to keep pace with evolving mobile landscape. Many companies fail to act swiftly, and gradually lose momentum when the final product is rolled out. With dismal initial feedback, companies lose interest, and stop investing more money into the product. Another mistake companies often make is to try to replicate the desktop application function-ality exactly to the mobile application. Additionally, there is the issue of mobile content management, where there is a continuous battle of delivering rich content to mobile devices over spotty networks and dropped connections. Overcoming these challenges requires setting standards and formulate strategies to ensure that right approach is followed and future nightmares are avoided.

HTML for mobile

5 P a g e

Need for Mobile App Development Strategy

Building a mobile program or app without a strategy is like going on a vacation without knowing the destination. You will reach somewhere, but you may not like it. Hence, it is essential to develop a roadmap for the business model to create mobile solutions that are fully integrated into all different aspects of the business including sales, service, product, operations and marketing. Successful mobile apps are a comprehensive integration of business, technology and compelling user experience. Businesses cannot afford to make the mistake of starting with the mobile app development and then determine the goals, strategy, markets, metrics, etc. First step must be quick and efficient development of the mobile strategy which can lead to huge savings in money and time, and at the same time will increase the likelihood of success. There is no one-size-fits all mobile app development strat-egy, hence it is critical to learn and understand how to

choose the most appropriate technology for the right app. Clear market knowledge and effective develop-ment strategy are required to develop mobile apps that can withstand the desired objectives. Adoption of mobile apps without the clear vision can lead to disas-trous results. If the companies do not follow a well-de-fined mobile application development strategy and at the same time innovate and deploy quickly, the users either uninstall the apps or just stop using them. There must be a strategy in place for regular updates providing new features and improvements. This requires data collection, analysis and release of updates. Constant development across several target channels and devices should also be a part of strategic planning. Mobile apps can be too varied, and to match the quickly changing user expectations, there cannot be a single develop-ment method or tool that works best in all cases.

HTML for mobile

6 P a g e

The mobile application development strategy planning starts by meeting with the mobile app development team, and form a group that has a balanced combination of technical expertise and business acumen. An expert strat-egist with deep understanding of the business can help

Once the design aspect is finalized, planning and develop-ment of application architecture begin, and coding gives life to the mobile app. Social media, database compo-nents, GPS and several other features integrate with the application. Developed app and merged UI is tested on the device by running several programs, and checks are done at different conditions to ensure that the app is robust and flawless. Thoroughly checked and tested mobile app is made available to the end users. Mobile app developers may also deploy app to the enterprise environment. Deployment minimizes installation time, and ensures critical data transfer in a safe environment. Some of the key points for this app development strategy are

provide the tactical and strategic perspective, and then propose the best solution. The strategy should address the changing industry environment, competition profile, business problems to be solved, and what should the final solution look like.

Define Application Objectives and Metrics, and ensure that the metrics are meaningfulDue diligence must be done to identify the best devices for the intended apps.Reinvention of the wheel needs to be minimized by tapping every existing organisations asset. Each skill and talent must be leveraged to minimize time and resource consumption.

Choose one platform for the prototype, and then choose between native, Web or hybrid apps.Capture the essence of the app by generating wireframes and all possible use cases and interactive scenarios.Establish different technical and programming phases and clearly define the objective of each phase.

Planning MobileApplication Development Strategy

HTML for mobile

7 P a g e

Once the strategic goals have been clearly defined and brought into focus, it is time to think about the role and function of the app. The way his app will fit into the world of end users, management and other stakeholders. The sales force should be able to quickly and easily access the app. If it takes more than a few seconds to access and share information or multimedia with the clients, the

benefit of using the mobile app gets quickly dissolved. Research shows that more than 25% of the business apps get deleted after their first or second use, and after 90 days, the drop-off is dramatic. On an average, only about 355 of the users remain active, and the main contributing factor is the poor user interface experience.

Strategy Design Develop Deploy

Mobile App Development Strategy

Define Application Objectives & Metrics

Identify the target mobile device (s)

Leverage Assets

Choose your App type

Concept TO Ideation

Establish the technical / programmingphases and the objectives of each phase

HTML for mobile

From the technical perspective, there are many different ways to build the mobile applications, and these techniques have gradually evolved over time. Initially, only the native development tools provided by the smart-phones vendors could be used to build apps, however, with the added-value frameworks, the applications could be built quickly, and single app could run on the multiple types of devices. Some of these approaches are:

Native- Uses the native tools for developing application on each platform and has full access to all the native features. However, each platform needs to be developed complete-ly separately. Cross-Platform framework tools- Many vendors give the tools and framework that can work across multiple platforms, and give the access to most of the native features that eliminates the need to rewrite the app for multiple platforms. However, this requires developers to learn and commit to a framework. Instead of using the best features available on each platform, usually, the approach is to work to a least common denominator approach.

Different strategies for mobile application development

Hybrid/HTML5- Hybrid applications are built using HTML5, JavaScript and CSS, and some extensions of accessing device features such as GPS and camera. These hybrid or HTML5 apps are packaged in the native app wrapper, making them indistinguishable from the native apps. This way, apps need to be built once and they can run on multiple devices. Code and skills can be shared across the web and mobile apps. However, there is a limitation in accessing the native features. Composite- mobile app is used for commonly used functions, and mobile website is used for additional capabilities that provide less commonly used functions. This offers a good balance of mobile Web and mobile app capabilities. However, due to switching from app to browser, this may not offer the most optimal user expe-rience.

8 P a g e

HTML for mobile

9 P a g e

Most users extensively use their mobile browsers to browse websites and online Web applications. Applica-tions can be built for mobile apps and/or mobile Web. Web applications are optimized for mobile device access and Web applications can be hosted online. There are certain advantages of mobile Web over mobile apps:

Businesses can use the combination of mobile Web and apps, after weighing the pros and cons of each.

The bottom line is that there are multiple factors comprising the mobile app development strategy. The debate about whether to use HTML5, or go native, or apply a hybrid approach continues, the issue needs to be resolved before setting policies and deciding strategies. It is however, quite clear that a good strategy is to begin with what is available rather than waiting too long, and then lag behind to a stage where it becomes difficult to catch-up. The success of any mobile app depends on reaching the target users, irrespective of the device and platform, and developers use cross-platform mobile application tools to achieve that. Instead of using iOS APIs, Objective-C and Xcode for Mac, iPad and iPhone, Java, Android APIs and Eclipse for Android smartphones, Visual Studio, Windows API and C# for Windows PC, it is much more effective and simpler to use HTML5 cross-platform mobile application development tool.

On the other hand, apps have several advantages as well.

The app doesn’t need to be published through the App-store, which can be a lengthy and difficult process at times. The Mobile Web is easier to deploy, add products/fea-tures, upgrade and fix bugs. For one-time or occasional uses, such as applying for a new service or enrolling, lodging a complaint, or customer on boarding, the mobile Web is most suitable. Developers need to develop only on one platform, and need not worry if the people are using an older version of the app.

Mobile Apps Vs Mobile Web

They are well-suited for doing repetitive tasks. Once installed, the apps have a presence on the device.Users can work with the apps offline.It is easier to load app rather than the website, and hence apps are more convenient.Apps can be deeply integrated with the in-built device capabilities such as GPS, camera etc.

HTML for mobile

10 P a g e

HTML5 is a markup language with features that allow it to run on devices to consume less power. HTML5 is a preferred language today to structure and present the content, and develop interactive pages that can be deployed across multiple browsers and operating system platforms. Hence, HTML5 based cross-platform mobile app development tools are a preferred choice with the mobile app developers. As compared to previous versions of HTML, it is much easier to develop feature-rich applications using HTML5, and it reduces the functionality gap between mobile apps and Websites. Native apps need to be devel-oped platform-by-platform, and hence be significantly more expensive as compared to HTML5 apps that can be developed once and can run on several different platforms. Some of the big companies who have already taken advan-tage of the HTML5 wave include fashion brand Burberry, The Guardian and Financial Times newspapers, and Apple iPad mobile digital device application for LinkedIn.

Other advantages of HTML5 include:

Enables developers leverage the built in advanced capa-bilities such as cameras, accelerometers and GPS in the modern devices, and provide rich, contextual user expe-rience across several mobile devicesApplications can easily adapt to different screen size, resolutions, orientation and aspect ratio.Mobile apps can use same distribution and monetiza-tion channels as native appsApplications can be viewed in the browser, or can be deployed as local web applications. Users can fully control the available display screen real estate and the device.The apps can run in full-screen mode rather than being restricted by browser window frames.

Centralized code can be easily modified so that it can interface with multiple devices.Regardless of the device, mobile apps work similarly on all platforms.HTML, CSS and JavaScript are the backbone of web application and hence migration of development tools to the mobile devices is quite easy. Businesses can use the combination of mobile Web and apps, after weighing the pros and cons of each.

HTML5 for Mobile App Dev Strategy

HTML for mobile

11 P a g e

You don’t have to build different apps for different OSs, devices, or browsers. HTML5 is flexible enough work across every channel, meeting all of your user’s needs regardless of the technology they use.

according to HTML5Test.com

How browsers score for HTML5 support

Advantages to HTML5

MOBILE

CHROME

OPERA 15

FIREFOX 22

SAFARI 6.0

INTERNETEXPLORER 10

DESKTOP

417

428

422

386

320

It offers a cost-effetive solution to multi-platformdevelopment. Pages feature a consistent design across

all platforms.

HTML5 is SEO friendly.

463

423

410

378

320

HTML for mobile

12 P a g e

On the other hand, there are some disadvantages associat-ed with HTML5 when using for the mobile app develop-ment

Clearly, the pros of HTML5 for mobile application develop-ment outweigh the cons, and this tool continues to be favoured by the app development world.

For some added features or change in Android, iOS or Windows, the tool has to factor in the changes, and make adjustments to the code, and hence cross-plat-form app tools lag behind official SDK.As developers need to write code for each platform, delivery of the apps may take more time.The efficacy of the code becomes dependent on the translation engine as developers work on the languages that are not native to the platforms. Bloated code and inefficient coding techniques are common problems. There are additional complications due to difference in platform runtimes.Due to the quick evolution of HTML5 standard, it has caused several discrepancies in the implementation of HTML tags, CSS attributes and JavaScript APIs. These features may work differently on different platforms, however there are several tools available to handle these discrepancies.

HTML for mobile

HTML5 Frameworks

13 P a g e

To cater to the growing mobile apps market, several HTML5 mobile frameworks have become available that help devel-opers create responsive and attractive mobile apps. These frameworks are libraries that enable developers to create professional -grade UX for the HTML5 apps, and they can save a lot of effort and time animating and styling the app experience. These frameworks are designed to work on a variety of platforms, and make the software more profes-sional, giving apps a unified look. These libraries contain one or more CSS and JavaScript files included in a single HTML file, and help developers build mobile apps without any native code like Java, .NET etc., making apps easily portable. Some of the most preferred frameworks include:

PhoneGap (Apache Cordova)- Enables developers to build apps for mobile devices using HTML5, JavaScript and CSS3, and wraps up CSS, HTML or JavaScript code based on the device platform. It is a free and open source, and develop-ers can use standard web APIs for most mobile operating systems. Developers do not need expertise in any particu-lar platform, and are not expected to have in-depth programming knowledge to code the app from scratch. They also do not need to learn new languages such as Objective-C for iPhone. PhoneGap provides JavaScript APIs with access to mobile device capabilities like GPS, camera, device information, etc. It offers the advantage of rapid development and deployment on multiple platforms, making it a lucrative option for programmers, as well as for the businesses. It is supported by a huge community that enables to push the technology forward with tutorials, examples and enhancements.

App Framework- Responsive and reliable HTML5 UI frame-work, an excellent tool to create hybrid mobile apps. How-ever, adaptation to the desktop is lacking to a large extent. On the other hand, it is a simple tool, which makes it much

easier for new developers to write single codebase and applications can easily adapt native-style look and feel. The framework is fast, reliable and lightweight.

Sencha Touch- Comes with great tools, documentation and support, and requires all UI code to be written in JavaScript, making more precise experiences. It supports Yahoo Query language, can create good graphical charts and the includ-ed themes can support all popular mobile platforms. How-ever, developers need to have considerable knowledge and experience in JavaScript.

JQuery Mobile- Although not initially designed for the mobile space, it has become the most commonly used HTML5 Mobile UI Frameworks. For the mobile user inter-face, it provides same usability and aesthetics as the desk-top product. The framework is programmed using HTML elements, and is easy to use with good documentation and a large installed base. It is based on the principle “Write less, do more”, keeping writers away from writing different apps for different mobile platforms. It takes advantage of CSS3 properties to create polished visuals without the bloats.

Top Coat- A unique framework by Adobe, relies on CSS libraries, making it easier to build using only HTML5 elements. The look and feel of the framework are different, with larger touch targets for controls, and the app can be given a very stylish look. The apps are easy to manage, lightweight and less contextual.

Kendo UI- Equipped with outstanding tools and documen-tations. The mobile HTML5 library uses HTML with class tags to run widgets, providing set block of functionalities. Kendo UI heavily relies on jQuery, and the widgets are jQuery based too. UI can be changed to emulate the native

HTML for mobile

14 P a g e

aesthetic of Android, iOS, Windows Phone device or Black-berry.

Ionic- Open source and well-designed front-end frame-work, built with Sass, taking ‘develop once, deploy every-where” approach. It helps developers create highly robust and interactive apps within minutes by utilizing the power of AngularJS. The focus is on speed, and with zero jQuery, accelerated transitions and minimal DOM manipulation, the apps can run quite fast on all mobile devices.

HTML for mobile

ConclusionCompanies need to build a mobile application development strategy that brings together cloud, enterprise mobility and the Internet of Things (IoT). Our smartphones these days are our camera, personal trainers, alarms, maps, entertain-ment centres, shopping guides, and much more. Having a clear and crisp strategic vision allows companies to under-stand what fits or doesn’t fit in their app. With the clear vision regarding strategic goals for the app, the development team can easily turn that vision into reality. A comprehensive mobile app development strategy that incorporates HTML5 capabilities, while maximizing their reach with the native application strategy is essential for the businesses hoping to secure brand loyalty. The key is to know ‘Why’ before ‘How’.

15 P a g e

HTML for mobile

About the AuthorPonbharathi Bakthaduruvan works as a Technical Lead with Idexcel. He has over eight years’ experience in developing enterprise and rich internet applications using HTML5, CSS/CSS3, Adobe Flex and Java/J2EE technologies. He has exper-tise in software design, architecture, development, implementation and maintenance of enterprise applications and has delivered many successful projects . He has a deep knowledge of UI development using HTML5, CSS3, JavaScript, jQuery and developing enterprise level applications using Java, J2EE, Hibernate, Spring, JSP, Servlet, Adobe Flex and ActionScript.

About IdexcelIdexcel is an innovative provider of IT Products & Services focused on emerging technologies. We help world leading companies build efficiencies and stronger businesses. With more than 15 years into existence Idexcel’s main focus is client satisfaction and technology innovation. Our industry expertise and a global, collaborative workforce forms the backbone of our services. We offer high degree of skills in Enterprise Applications, Cloud Services, Data-warehousing, Big Data, Analytic, QA & Testing Services, IT consulting and Staffing. Idexcel product line includes: NDS, ERP, and Cync - A revolutionary credit monitoring application for the manufacturing and �nancial management.For more information log on to www.idexcel.com.

Global Head quarters459 Herndon Parkway Suite 11Herndon, VA 20170Tel: 703-230-2600Fax: 703-467-0218Email: inquiry@idexcel.com

India Operations“Crystal Plaza” 9, 10 ,11Bhuvanappa Layout, Hosur RoadBengaluru – 560 029KarnatakaTel: +91-80-2550 8830Email: inquiry@idexcel.com

© Copyright, Idexcel. All rights reserved. No part of this document may be reproduced, stored in a retrieval system, transmitted in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the express written permission from Idexcel. The information contained herein is subject to change without notice. All other trademarks mentioned herein are the property of their respective owners.

HTML for mobile