My presentation from TiConf AU 2013 in Melbourne discussion some tips and techniques we used in moving from a web design studio into complete digital strategy by introducing mobile and Appcelerator's Titanium product.
2. Designing and
developing websites
for 15 years
And in 2010 we discovered Appcelerator Titanium…
Our customers include:
visit harmonicnewmedia.com
follow @harmonicnm / @craig_harman
3. AN INTRODUCTION
In 2½ years
we have made
mobile 50%
of our annual
revenue 0% 50% 100%
2013
2012
2011
2010
Mobile Other Revenue
9. INTRODUCING APPCELERATOR TO YOUR TEAM
Start with an
internal project:
“Everyone” has a great app idea
Keep it simple
docs.appcelerator.com
Use device specific GUI elements
Make it cross platform
(iOS/Android minimum)
Upload and submit to App stores
11. INTRODUCING YOUR CLIENTS TO MOBILE
Australia has
~29 million
mobile
subscribers
(Source: Government of Victoria, Our Mobile Planet)
12. INTRODUCING YOUR CLIENTS TO MOBILE
68% of 15-65
year-old
Australians
have
smartphones
Population
penetration at
41%
(Source: Frost & Sullivan)
13. INTRODUCING YOUR CLIENTS TO MOBILE
Global mobile
traffic now
represents
~13% of
Internet
traffic.
(Source: forbes.com)
Internet Traffic
Mobile Other
15. INTRODUCING YOUR CLIENTS TO MOBILE
Mobile/Res
ponsive
Website
vs App?
It shouldn’t be an either/or
Web (and all other
marketing) should
compliment a mobile
strategy
16. INTRODUCING YOUR CLIENTS TO MOBILE
Why an App?
• (Better) Offline storage
• Speed
• Native functionality
• App ecosystem
• Competitive / First mover advantage
• Avg. user spends 2hrs 38 minutes per day
on smartphone/tablet, 80% of that time is in
app
(Source: Flurry)
17. WEB VS MOBILE PROCESS
Requirement
Analysis
•Client
requirements
•Quoting
Scoping
•Site Map
•Wireframes
Implementation
•Design
•Development
•Integration
Review
•Testing
•Client Review
Delivery
•Upload
•Go live
Analyse and
Manage
The process isn’t that dissimilar:
Web
Mobile
Requirement
Analysis
•Client
requirements
•Device
selection
•Quoting
Scoping
•Wireframes
Implementation
•Design
•Development
•Integration
Review
•Testing
•Client Review
Delivery
•Submit to
store
Analyse and
Manage
•Device
selection?
24. IMPLEMENTATION
Design
POINTS TO CONSIDER:
• Design for fingers not
mouse pointers
• Understand user
guidelines and default
UI elements
• What attributes of a
standard OS element
can be modified
27. IMPLEMENTATION
Design
Limit images in UI (Flat design is great for
this!)
Use dps or % for width/height/positioning
Appcelerator’s layouts, positioning and
view hierarchy techniques
There are default UI guidelines for all
devices
If a UI element has a quirky or non-
standard look or behaviour implement and
test first (integrate early!)
28. IMPLEMENTATION
Development
Rely on Titanium before JS
Use Alloy
Test on device (especially on
Android!)
Your other web development
skills also come in handy: eg.
PHP for server side, JSON
29. ALLOY
Titanium framework based
on the model-view-controller
architecture that contains
built-in support for
Backbone.js and
Underscore.js (and
moment.js as a module!)
Views are defined in XML,
similar to HTML
TSS = CSS without the C
Craig Harman, managing director and founder of Harmonic New Media a digital strategy company based in Perth, WAWe have been developing websites for 15 yearsAnd we dabbled with native Objective C development in 2008In 2010 we came across Titanium with its “wild claims” that you could write, not only iOS apps but android apps using Javascript…. And so we gave it a try.
The goal of this presentation is to give you some hints on integrating mobile into your digital strategy offering to clients. It gives you another revenue stream and allows you to become more than a web company. Because one of the best ways to make guaranteed money from app development, is to develop them for a client – unfortunately not everyone is going to develop the next instagram.I will give a high level overview, we can delve into specifics and technicalities depending on time
So with that established lets get your team set up….Appcelerator.comIt’s cross platform and free!
Get Apple iOS developer account ($99/year) and a Google Developer account ($25/once off) for your business (not your client)This takes time (DUNS etc.) so do it early.
Ask your staff for app ideas Keep it simple (base functionality) – no feature creep!quick start guide at docs.appcelerator.comUse device specific GUI elementsAnd make the app cross platformsubmit to app stores even if you have no intention of making it live
So once we are comfortable with mobile development internally we are ready to convince the client.Why do they need a mobile strategy?
Behind Singapore, Australia has the second highest smartphone usage by population density
Worldwide we are looking at mobile traffic representing ~13% of Internet trafficAs web developers we’ve targeted certain browsers with less of a market share!
Apps won’t solve all problems, needs to be the right solution.If you do create an app there may be other potential work – eg. Building a website to promote the app, backend web functionality that communicates with the app
When would you recommend an app over a website to your client?Storage not just for data but the app itself (not downloading UI elements to use)No downloads (after initial), no browser overheadThe web is catching up but … additionally free GUI updates (eg. iOS 7)App store, Google play etc. are all extra opportunities to promote your client (reviews, searches, exposure) and also monetisation strategies (easily earn money via in app purchase or selling your app – compare that to infastructure for a website)Your competitor isn’t doing it yet (but this will change!)It’s clear that people are choosing the app over the web when on their smartphones and you can see that in app usage statistics
Client requirements should be very similar. What is the goal the client is trying to achieve or the problem they are trying to solve? We use questionnaires and surveys at this step.Device selection is an additional step in the process and is asked here for a couple of reasons:Project scope for quotingA starting point for our UI (do our users have certain UI expectations?)Using Titanium (and alloy!) lessens the impact of this decision as we can add/modify these choices down the trackQuoting:Mobile development is hard and you will be competing with NATIVE developers who generally charge more. Non custom UI/UX takes time to developAndroid device/resolution fragmentation (move to next slide!)
This can be a nightmare depending on the design. So charge accordingly
The major difference during the scoping phase is the removal of the beloved site map.We replace it with more detailed wireframes or prototypes.
But what we use is Xcode’s Interface Builder or Storyboards to create rapid prototypes of our apps. It’s free and its easy to use (even for designers).<Load up Xcode and build an interface>And the biggest plus is the end result can be loaded in the iPhone Simulator and demoed directly to clients – they love that! (Be sure to explain that it doesn’t mean their app is complete!)
So we have our mock up approved and we are ready to implement.First things first, I suggest signing your client up to the Apple App store at this stage – registration can take 2-4 weeks, especially if they need a DUNS number.In web design you can usually complete designs before starting development or build. Get these signed off by the client etc.When developing for mobile (especially with Titanium) we want to design as little as possible before we start coding so we keep our UI/UX within budget and scope. Remember we have only shown the client default iOS components.
So what do we have to consider when designing a user interface for an app?Our pointing device is bigger, even through screens are smaller, make your interface nice and touchable!Web isn’t as standardised as mobile development. Get familiar with the user guidelines to know what a user expects to do with your app or user interfaceKeep UI/UX within budget,can we cut time/cost by customising standard OS components?Unfortunately titanium adds a layer of complexity to some UI elements, for instance changing the background colour of section headers in tableviews is easy in X-Code, cannot be done in Titanium.
Multiple resolutions, multiple pixel densities and multiple devicesThis isn’t a new problem for web developers…
Designing for the web has prepared designers well for these issues. Lets look at some solutions.
Here are some implementation decisions to make designing easier across multiple platforms.Images need retina versions, and have set heights and widths so the less you have the easier it is to make an adaptive layout. Fortunately flat design is all the rage at the moment!% width/height can mean that elements will stretch to fit any device (from phone screen to tablet)Appcelerator has some very useful layout techniques including pixel density independent values (dp) and automatic layout modesUse the default UI guidelines provided by both Apple and Google – they are very goodIn the web world, we are largely aware of the limitations and can use combinations of JS/CSS to overcome them for UI/UX issues, for mobile this may not be possible – stuck with using default UI elements or creating the behavior yourself from scratch
A lot of required behaviours already exist in the Titanium API (or underscore.js which is part of Alloy), get to now them and use it before relying on custom JS. Raef and David have hopefully convinced you to use Alloy if you aren’t already.Both iPhone and Android simulators have their rendering quirks so best to test on device as much as possible. For Android I would even build and run on device as the simulator is so slow.Using existing web skills for server side (eg. PHP, JSON, etc)
Who is using alloy? For those who aren’t Alloy is a MVC framework for the Titanium SDK that includes some extra javascript goodies.Backbone.js (for MVC) and Underscore (useful code snippets that make working in JS easier)- Views are defined as XMLTitanium style sheets work similar to cascading style sheets without the cascade
Lets look at a simple Alloy project and its similarities to web development….
With development complete we review our app. What are we looking for?Make sure it works on as many devices and simulators (and operating system versions!) as possible.Automate testing with the Titanium CLI, Jenkins etc. – this is a topic for another time but be aware its available as of Titanium 3.0When you are happy with your review send a copy of the app to the client to use on their own device. You will need to deal with certificates, IDs etc.
Once we are through the review stage and we have client sign off we can go live.Web go live process is usually deploying a development site to live serverApp needs new certificates, upload, validation and approval (in the case of the Apple app store)If you get knocked back from the App store be prepared to address issues, query them and resubmit. We had an experience where Apple told us to submit the app under their Enterprise program – only problem was at the time the enterprise program wasn’t available in Australia. We resubmitted and they accepted straight away.
Our job doesn’t end once the app is available for download.Appcelerator’s own analytics tools can show you a wealth of information includingNew installsTotal sessionsAverage daily sessions per userEtc.Instead of Search Engine Optimisation we have App Store Optimisation. Check out SensorTower as a great starting point for this.Search for JeremiaKimel-man’s Codestrong keynote “Making More Money with Your Apps” on Slideshare
Certificates for things like notification servers expire (and you don’t get notifications of this!). Don’t forget to keep them up to date.Test your existing app on new devices and OS versions as they become available and use this as an ongoing revenue stream.
Hopefully you can see how your web development skills can translate to app development with Titanium.And how you can convince your client (who originally came to you for a website) that they may also need an app.
Alloy makes your job easier by separating logic, data layout. Use it.Statistics will give you important information about how people are using your app. Modify your app accordingly.Do some app store optimisation and promote your app so it can be found and becomes successful.
