SmartPhone Design and Delivery

Uploaded on

Keynote presentation from the IE Tech Summit on 5/15/09

Keynote presentation from the IE Tech Summit on 5/15/09

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 4. SmartPhone Handset Market Global Market 2008 In Millions 140,000.00 120,000.00 100,000.00 80,000.00 60,000.00 40,000.00 20,000.00 0.00 Global Market 2008
  • 5. SmartPhone Market Penetration Global Market 2008 (Percentage) Nokia Research In Motion 20.5 40.8 Apple 4.2 4.3 HTC 10.7 Samsung 19.5 Others
  • 7. What You’ll Need  Apple OR Windows  Webkit Platform  Chrome  Linux  FireFox  Flash CS4 or CS3  Firebug and countless  Adobe Device Central other free add- on/extensions  Eclipse/IntelliSense/ Dreamweaver/etc.  Willing mobile device  Adobe Flex SDK donor!  Android API  iPhone SDK  J2ME SDK (Blackberry)
  • 9. Adobe Device Central  Nokia has added both FlashLite and the full Flash player to many of it’s US and International handsets.  Designers and Developers have been using Flash to create mobile apps for many years now.  The advantage is that the Flash environment can be easily re-skinned to work with many proprietary mobile browsers.  It’s among the easiest and most versatile of development platforms  So far Apple’s still has no love for Adobe!
  • 10. Adobe Device Central  Many of the device browsers only support Flash Lite or Flash 5/6 playback.  AS1-esque coding is back on the menu  Easy for non-coders, but limiting and counter- intuitive for AS3 coders.  Bandwidth restrictions have to monitored
  • 11. Adobe Device Central  Swappable playback controls  New devices available on a regular basis  Content can also be generated from  AfterEffects  Captivate  Illustrator  Photoshop
  • 12. Adobe Device Central  Biggest advantage for Adobe Device Central development:  Familiarity with design/development tools  Hundreds of Mobile Phones and PDAs!  Nintendo Wii  Sony PSP  Sony PS3  Eventually the Android devices
  • 13. Adobe AIR  Adobe AIR applications are NOT mobile devices apps!  BUT, they are small apps that can be rapidly developed and easily adapted to a mobile device  AIR applications are essentially the same idea as the Apple, Windows, and Yahoo Widgets  Desktop applications that offer a blend of traditional installed app features with rich internet content  They can be developed using Flex, ActionScript and Flash media.  They can also be entirely coded with HTML and AJAX!  They are also a great way to develop a “starter” application
  • 14. WRITE ONCE – RUN ANYWHERE Or why I learned to fall in love with HTML and JavaScript all over again.
  • 15. iPhone Development  The biggest drawback to the iPhone/iPod Touch as a platform is that their SDK is a closed-source platform  You have to use OSX and they expect you to use Cocoa and Objective-C to take advantage of the bells and whistles  The gestures, accelerometer, and multi-touch features.  However, Safari for the iPhone and iTouch is based on the WebKit browser source.  It supports JavaScript, HTML, and CSS  Any code editor can be your gateway to iPhone Apps!
  • 16. iPhone Development  Documentation is still  480-by-320-pixel sparse…but that hasn’t resolution at 163 ppi stopped 30K  All video content must applications from be .m4v or .mov flooding the Apps encoded for H.264 Store! video – no FLVs  Note that the mobile  3G network on ATT is Safari browser has a still erratic different standardized hardware specification
  • 17. iPhone Development  By default, Safari on the iPhone will render your page as if it was a desktop browser on a big screen, with 980 pixels width available for the web content.  Metadata  <meta name=quot;viewportquot; content=quot;width=device-widthquot; />  CSS Settings  <!--[if !IE]>-->  <link  rel=quot;stylesheetquot;  href=quot;small-screen.cssquot;  type=quot;text/cssquot;  media=quot;only screen and (max-device-width: 480px)quot;  />  <!--<![endif]-->
  • 18. iPhone Development  Orientation Changes  Using JavaScript you can access the property window.orientation, which can have these values:  0—normal portrait orientation (home button is at the bottom)  -90—landscape after clockwise rotation from portrait (home button to the left)  90—landscape after counterclockwise rotation from portrait (home button to the right)  180—unsupported for now, but would be portrait-flipped so that the home button is at the top
  • 19. iPhone SDK  Gestures  On the iPhone, gestures are two-finger actions: scaling (zoom in and zoom out) and rotation.  It’s possible to use those events to also handle gestures such as zoom and pan. But for this purpose, there are more convenient gesture events. You can listen to the following events:  gesturestart  gestureend  gesturechange window.addEventListener('load', function() { var b = document.getElementById('box'), bstyle =; b.addEventListener('gesturechange', function(event) { event.preventDefault(); bstyle.webkitTransform = 'scale(' + event.scale + ') ' + 'rotate('+ event.rotation + 'deg)'; }, false); }, false);
  • 20. iPhone Development The Home Icon  When a user adds your page to the Home screen, the iPhone will use a screenshot of your page as an icon. But you can do better by providing your own icon.  To do this, create a PNG file with dimensions 57 x 57px, name it apple-touch-icon.png, and put it in the root of your web server, just like you would with a favicon—and you’re done. The iPhone will automatically add the glossy effect and rounded corners—no need to try to recreate this on your own!  HTML Head info <link rel=quot;apple-touch-iconquot; href=quot; filename.pngquot; />
  • 21. Blackberry Platform  The Blackberry platform is a different breed of smartphone.  Applications are built with J2ME  Touch and gesture-driven UI is now available with the Blackberry Storm  Older Blackberry devices may not read HTML, and pages must be encoded in WML.
  • 22. Blackberry Platform BB OS 4.0 and the Blackberry Storm Emulator  Full support for HTML, JavaScript, and CSS  Most of the development tweaks boil down to changing display dimensions  Bandwidth tethered to the 3g network
  • 23. Blackberry Platform BB OS 4.0 and the Blackberry Storm Emulator  Full support for HTML, JavaScript, and CSS  Most of the development tweaks boil down to changing display dimensions  Bandwidth tethered to the 3g network
  • 24. Android (the Google Platform)  Designers Beware!!!  Android is Java and XML-based and is easy to pick up if you already understand AS3 OOP principles.  It’s a bit trickier for the non-coders.  Development tools are open-source.  Primarily, Eclipse with Android Dev Tools (AD) is used for development   You can also use the Adobe Flex Builder application which is based on Eclipse. 
  • 25. Android ( the Google Platform)  Like the  Many of the newer iPhone, Android can Intel Adamo-based also use standard netbooks are expected HTML, JavaScript and to run Android instead CSS. of Windows.  There are more than a  Not tethered to one dozen Android-based carrier and already devices expected to be devices announced for on the US market by T- the years end. Mobile, Sprint, Verizon , and ATT.
  • 26. Android ( the Google Platform)  Adobe and Google have  Many industry analysts pledged support for the see the Android full Flash Player – platform as the greatest eventually! threat to the  JavaFX is also an Blackberry’s market upcoming possibility share. and Sun is actively porting their IDE to the Android
  • 28. THANKS! Q/A Time