Designing Apps for Success

Developing Consistent App Design Practices

Matthew David, Chris Murman

• Publisher: Routledge
• Year: 2014
• ISBN:
  9781135048501
• Edition: 1
• Topic: Conception
• Subtopic: Conception Web

In 2007, Apple released the iPhone. With this release came tools as revolutionary as the internet was to businesses and individuals back in the mid- and late-nineties: Apps. Much like websites drove (and still drive) business, so too do apps drive sales, efficiencies and communication between people. But also like web design and development, in its early years and iterations, guidelines and best practices for apps are few and far between.

Designing Apps for Success provides web/app designers and developers with consistent app design practices that result in timely, appropriate, and efficiently capable apps. This book covers application lifecycle management that designers and developers use when creating apps for themselves or the entities that hired them. From the early discussions with a company as to how to what kind of app they want, to storyboarding, to developing cross platform, to troubleshooting, to publishing, Designing Apps for Success gives a taut, concise, and pragmatic roadmap from the beginning of the process all the way to the end. Developers and designers will learn not only best practices on how to design an app but how to streamline the process while not losing any quality on the end result. Other topics in this book include:

• Case studies that best showcase the development process at work (or not at work).

• 
  
  

• Global examples of apps developed all over the world.

• 
  
  

• Future proofing your apps

• 
  
  

• Post-publishing: Promoting and marketing your apps and keeping it relevant.

• 
  
  

• Consistent app design practices for consistently successful results.

• 
  
  

Section 2
Building Apps

Chapter 4
Creating Apps with Adobe PhoneGap

Adobe’s PhoneGap is now the de facto hybrid technology platform to kick-start your native app creation process. The secret to PhoneGap is HTML5. In this chapter you will be introduced to cross-platform app development with PhoneGap and learn how you can leverage HTML5 to create solutions.

Building Apps with PhoneGap

Do you want to build an app? Of course you do. Everyone does. Apps are the next cool technology, and we all want to play with the cool technology.

Figure 4.1: Adobe’s PhoneGap is a cross-platform mobile OS framework you can use to build native apps.

There is a roadblock when it comes to creating mobile apps: too many new technologies. For instance, iPhone and iPad apps are developed with Objective-C, Android apps are developed with Java and C++, Windows 8 apps are developed using C#. The list of technologies you need to learn today as a developer is staggering.

So how do you make the process of creating apps much easier? You look to forward-thinking technologies and bet hard they will work.

PhoneGap is a framework that is looking to reduce the level of complexity we currently see in mobile app development through leveraging HTML5 as a cross-platform development language. The key to PhoneGap’s success is that you can build your entire solution using Web technologies you are already familiar with—HTML, CSS3, JavaScript, SVG, and Canvas—without having to learn complex platform-specific technologies.

Figure 4.2: Use HTML5 to power your apps in PhoneGap.

PhoneGap is an open-source project (now called Cordova, but the term PhoneGap and Cordova are almost interchangeable). You can download the entire code from a GIT repository and build the solution yourself. Adobe is the company that manages the project.

The goal of PhoneGap is to allow you to turn HTML5 apps or micro-sites into native applications. This is done two ways:

• Compiling your PhoneGap app on your development machine
• Leveraging Adobe’s cloud-based PhoneGap build environment

Both solutions give you the opportunity to create apps for ten different platforms. With one set of HTML5 code you can create native apps for the following:

1. Android
2. iOS
3. Windows Phone 7
4. Windows Phone 8
5. Windows 8
6. BlackBerry
7. Tizen
8. Bada
9. Symbian
10. WebOS

What is exciting, as you develop solution with PhoneGap, is that you can leverage PhoneGap’s ability to connect to native APIs from the device operating system and, through JavaScript, connect to the Camera, Contacts, Events, GeoLocation, Notification, and many of the features typically reserved for native development.

Figure 4.3: PhoneGap’s website.

Close to one in four hybrid apps is now developed with PhoneGap. It is easy, supports many platforms, and appears to be a silver bullet for rapid cross-platform development. The center of PhoneGap is HTML5.

One Technology to Rule them All—HTML5

HTML5 is an awesome technology. I know; I’ve written three books on it. I think it rocks!

But here is the secret: it is not that new. At least, it is not as new as the press would have you think. HTML5 is a clever brand tying together a collection of technologies and putting forward a solution stack that can create apps that behave like native desktop solutions.

The core to HTML5 is the following technologies:

• HTML5 Elements
• CSS3
• Video and Audio Elements
• SVG and Canvas
• JavaScript

The core elements of HTML are the tags you see in your page. They include but are not limited to the following elements:

• BODY
• HEAD
• SCRIPT
• HTML
• P
• IMG

You will see the tags displayed on the page in the following format:

<HTML>
<HEAD>
<TITLE>This is a Web Page</TITLE>
</HEAD>
<BODY>
<P>Hello, World</P>
<IMG SRC = “sample.webp”>
</BODY>
</HTML>

The framework for HTML elements (originally created by Tim Berners-Lee in 1989) was published in 1993 and took the world by storm.

Figure 4.4: A copy of the very first website. We have come a long way in the past 20 years!

But, the original spec was not perfect. Over the next four years, three more iterations of HTML came out, adding in more complexity (notably the inclusion of JavaScript to add client-side interaction), but development of HTML appeared to slow down by the end of the decade. In 2004, a group known as Web Hypertext Application Technology Working Group (WHATWG) began work to bring consistent Web technologies to all. The pioneer of WHATWG is Ian Hickson (who now works at Google). It is through his work and the consolidated work of the team at WHATWG that lesser-known technologies, such as CANVAS, SVG, and CSS3, were brought together and presented as HTML5.

Figure 4.5: The WHATWG started evolving HTML in 2004.

The adoption for HTML5 has been nothing short of amazing. Today, all modern Web browsers support most of the features outlined in the HTML5 specification. This includes Google’s Chrome, Apple’s Safari, Mozilla’s FireFox, and Microsoft’s Internet Explorer.

What is interesting about HTML5 is that it is not a “cast-in-stone” specification. The modular design of the specification is intended to allow emerging technologies to be integrated quickly. For instance, when HTML5 was first published, we did not have smartphones or tablets as we know them today.

To this point, some of the first Web browsers to have the best support for HTML5 are mobile devices such as iPhones, iPads, Android phones, WebOS, and BlackBerry OS. Each of these platforms has technology that allows you to embed a Web browser window into a native app and present HTML pages through it. PhoneGap is leveraging the cross-platform support for HTML5 as a cornerstone in building out sophisticated apps. Where a mobile OS does not support a feature in HTML5, such as a Camera API, then PhoneGap will extend the browser with JavaScript into the native operating system. Clever stuff.

Figure 4.6: HTML5 offers support for mobile browsers.

Today, HTML5 is not limited to just Web browsers on your desktop or mobile device. New implementations of HTML5, through projects such as FireFox OS, Chrome OS, WebOS, and Tizen, are changing HTML5 into the de facto native programming language for the next generation of operating systems.

And, yes, PhoneGap is already working on these forward-thinking HTML5 operating systems.

The Problem Phonegap is Solving—Cross-Platform App Publication

Adobe is set with a big challenge: how to boil the ocean. What do I mean by that? The phrase “boil the ocean” refers to massively complex projects that tackle massively complex problems.

Normally, when you hear someone say “that project is boiling the ocean,” it means that the project is being overengineered.

Not the case with PhoneGap.

The challenge Adobe is addressing with PhoneGap is massive: to create a single authoring language common to close to a dozen disparate operating systems. Sun Computer tried it with Java, and it did not work. So why is Adobe trying?

It is the support for HTML5 on all the mobile devices that is making Adobe’s job much easier. Apple, Microsoft, Google, Mozilla, Opera, Oracle, IBM, and many companies are all working to make HTML5 the cross-platform technology of the future.

Phew! Seems like job done, doesn’t it? Well, not exactly. While HTML5 is great, it does not address specific features found on native operating systems. A native operating system is generally controlled by a single, private entity and can effectively do what it likes. This is clearly seen with Apple and its iOS platform, used to run iPhones, iPads, iPod Touches, and Apple TV.

To begin with, iOS has three main different user experiences: iPhone/iPod, iPad, and Apple TV. The input mechanism for each is different: single finger, two hands, or a remote control. HTML5 does not fully support gesture controls (e.g., taps, two-finger swipes) and does not support core APIs built into iOS. For instance, iOS has the following APIs available only for native application developers:

• MapKit—for adding maps to your projects
• GameKit—adding interactive game features such as accomplishments
• iAd—for including advertising in your apps
• Passbook—Apple’s digital wallet solution
• Notifications—those annoying alerts you get on your iPhone
• In-App Purchases—ways to extend your app with additional, paid-for featur...

Table of contents

• Cover
• Half Title
• Title
• Copyright
• Dedication
• Contents
• Preface
• Acknowledgments
• Section One: Designing Apps to Work
• Section Two: Building Apps
• Section Three: Marketing Your Apps
• Index