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 ITS GROWING!WHY? 15. INTRODUCING YOUR CLIENTS TO MOBILE Mobile/Res ponsive Website vs App? It shouldnt 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 isnt 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? 18. REQUIREMENTS ANALYSIS Client requirement s Device selection Quoting 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 Appcelerators 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 clients 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 Dont 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?