Slides from Jonathan Campos and Antonio Holguin's 360|Flex Presentation "Making It Mobile"

2. Who We Are
Antonio Holguin
• ACP
• Designer at Smashing Ideas
• blog: swfhead.com
• twitter: @antonioholguin
Jonathan Campos
• ACP
• UGM
• Director of Software Development at Dedo Inc.
• blog: unitedmindset.com/jonbcampos
• twitter: @jonbcampos

3. Where You've Seen Us

4. Here's What's Coming
• Planning Your Mobile Application
• Working In Teams
• Visual and Interaction Design
• Graphic Optimization
• List and View Optimization
• MVC for Flex Hero
• User Tracking
• Multi-Screen Best Practices
• Deploying
• Maintaining

6. Agreeing on a Workflow
• Phases of development
• Target Device List
• Design Asset Preparation and Delivery
• Wireframe -> Deployment
• Code Layout and Formatting

7. Code Layout
• Come Up With A Convention
• Stick With It!
• Check Out:
• http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions

8. • Flow Chart doesn't need to be perfect
• Wireframes as grey squares
• What screens go where and how to get to them
• Be sure all buttons are accounted for, including hardware
• How much are you displaying on screen at a given time?
• Consider Interactions/Gestures early
• Understand that things WILL change

10. • Create Value Objects
• MVC Structure
• Checkout RobotLegs
• Test and Create Services
• Setup Data Models
• Create Custom Events

11. M-V-C-S

12. • Theorize Design Concept
• Research
• 1 - 2 screens to get the look
• Choosing Fonts / Color
• Get It On A Device!
• Thinking about Multiple Screen Resolutions
• Pixel Perfection!

16. Pixel Perfection

17. • View/Mediator Layout
• Unit Test Mediators
• CSS Sheets
• ID Selections
• CSS Classes
• Flow Layouts
• Connect Mediators with Models

18. Advanced CSS (not that advanced...)
ID Selectors Class Selectors

19. Custom Skins
MXML Actionscript

20. • Render Remaining Screens and Elements
• Do NOT hand off PSDs
• Flatten, Save for Web, Deliver End Files (PNGs / JPGs)
• All button states, including toggles, must be accounted for
• Save for Multiple Screen Resolutions
• Adding Sound
• MP3s are smaller, but a little slower, have "hiccup"
• WAVs are bigger, but sound better

21. • Import and Optimize
• Update Skins
• Relayout Views
• Designer can help

22. • Icons - 512, 128, 114, 90, 72, 57, 50, 48, 36, 29, 16
• Just make them all at once, its easier.
• Promo Images - Most Optional
• Android Market: 180w x 120h
1024w x 500h
• Amazon AppStore: Use Android images
• Videos - Android only - Optional but good.
• Screenshots - Make them interesting, show your app in action
Do not include status bar on iOS

24. • User Tracking
• GA for Flash
• Full Google Analytics Stack
• ANT Scripts
• Markets
• icons
• descriptions
• videos
• images
• Application Descriptor

25. • Test, Test, Test.
• Put on as many devices as possible.
• Test to break. Test to win. Test to lose.
• Try every scenario that may happen.
• Beta Testers?

26. • Release CheckList
• iOS: Check your provisioning profile
• Check your app id
• Check your permissions
• Check your api keys
• Verify your testing
• Include good contact information

27. Device Vendor
Markets Cost Moderated
Limitation Credits
Google
$25 no none none
(Android)
Amazon $99/year
yes none none
(Android) (first waived)
App World $200/10
no/tested none 10
(BB) vendor credits
App Store
$100/year yes 100 none
(iOS)

28. • Each release WILL be problematic
• Communicate what has changed to users
• 3rd party apis
• Users will forgive an update MORE than a broken app
• Don’t release too often
• Update based on User Feedback

29. Thanks for coming!
Contact Jonathan: Contact Antonio:
@jonbcampos @antonioholguin
unitedmindset.com/jonbcampos swfhead.com