Beyond Responsive Web Design - Moving your web agency to mobile development (from TiConf AU 2013)
Report
Share
•1 like•1,299 views
Beyond Responsive Web Design - Moving your web agency to mobile development (from TiConf AU 2013)
•1 like•1,299 views
Report
Share
Download to read offline
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.
Recommended
More Related Content
What's hot
What's hot(20)
![[Startup Nations Summit 2014] Competition - China - Beijing](https://cdn.slidesharecdn.com/ss_thumbnails/presentation-141004042145-conversion-gate02-thumbnail.jpg?width=768&fit=bounds)
Similar to Beyond Responsive Web Design - Moving your web agency to mobile development (from TiConf AU 2013)
Similar to Beyond Responsive Web Design - Moving your web agency to mobile development (from TiConf AU 2013)(20)
Recently uploaded
Recently uploaded(20)
Beyond Responsive Web Design - Moving your web agency to mobile development (from TiConf AU 2013)
- 1. BEYOND RESPONSI VE DESIGN moving your web agency to mobile development
- 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
- 4. SOME OF OUR APPS
- 5. HOW DID WE DO THIS? 1. Introducing mobile to your team 2. Introducing your clients to mobile 3. Web vs Mobile Process 4. Alloy 5. Measuring Results
- 6. INTRODUCING APPCELERATOR TO YOUR TEAM This is the easy bit! Would you like to create mobile apps? YES!
- 7. INTRODUCING APPCELERATOR TO YOUR TEAM Get Titanium IDE
- 8. INTRODUCING APPCELERATOR TO YOUR TEAM Sign up to Apple/Google developer accounts
- 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
- 10. INTRODUCING YOUR CLIENTS TO MOBILE Not so easy! You need a mobile app. WHY?
- 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
- 14. INTRODUCING YOUR CLIENTS TO MOBILE THERE IS A MARKET AND IT’S GROWING!WHY?
- 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?
- 19. SCREEN RESOLUTIONS Device iOS Android Phone 320x480 640x960 640x1136 ldpi 240 400 ldpi 240 432 mdpi 320 480 hdpi 480 800 hdpi 480 854 hdpi 600 1024 xhdpi 640 960 Tablet 1024 768 2048 1536 ldpi 1024 600 mdpi 1280 800 mdpi 1024 768 mdpi 1280 768 hdpi 1536 1152 hdpi 1920 1152 hdpi 1920 1200 xhdpi 2048 1536 xhdpi 2560 1536 xhdpi 2560 1600
- 20. SCOPING
- 21. WIREFRAMING TOOLS Moqups, Balsamiq Mockups, Powerpoint, Frontpage, Photos hop, More…
- 22. DEMO
- 23. IMPLEMENTATION Sign up to Apple App store at this stage Start with the design BUT integrate early
- 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
- 25. IMPLEMENTATION Design POINTS TO CONSIDER: • Multiple resolutions • Multiple pixel densities • Multiple devices (running different OS)
- 26. IMPLEMENTATION
- 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
- 30. DEMO
- 31. REVIEW Test on as many devices as possible Automated testing (Titanium CLI) Getting a copy on your client’s device (certainly not web design!)
- 32. DELIVERY App involves: certificates, upload, validation, a pproval (Apple) Web is much easier: upload, re-configure, test
- 33. ANALYSE AND MANAGE Google Analytics = Appcelerator Analytics SEO = ASO (see sensortower.com) Promote your app
- 34. ANALYSE AND MANAGE Don’t forget: Certificates expire (eg. Notifications) New devices (and OS updates) offer new challenges and opportunities
- 35. SUMMARY Web and mobile development process is similar Use statistics to educate and justify why your client needs an app
- 36. SUMMARY Use Alloy Re-act to your analytics and re-design/re-develop accordingly Do some ASO (and other promotion) for your app
- 37. THE END Follow @harmonicnm i will tweet the slides download link once available. harmonicnewmedia.co m ANY QUESTIONS?
Editor's Notes
- 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.