Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 & the riseof our mobileoverlords
Who Are You?
A FEW RANDOMOBSERVATIONS
HTML5 Adoption
Chromeversion 14             October   4 th
Chromeversion 15             October   26th
Chromeversion 16             January   6 th
Chromeversion 17             February   17th
Chromeversion 18             March   28 th   2012
Chrome version 18 LastUpdate          April   30th   2012
Gartner forecastsphones overtaking   PCs as most  common web browsing device     by 2013
HTML5 is not future tech
Even when the checkmark is    there, performance     isn’t.
Designing fordevices is hard
Testing is critical
Native AppsPros                      Cons• Easy to monetize        • Costly to develop• Fit user expectations   • Restrict...
Mobile Web AppsPros              Cons• More Flexible   • Harder to monetize• More Reusable   • Hard to target             ...
No clear cut  winner
Demo       Expressive HTML
CSS Transitions
CSS Animation
Canvas
Video
JS Frameworks  that handle these things
People want anexpressive web
We need the medium to bemore expressive
We need ourwork to work on more devices
We need better    tools
WE WANT TO BEEXPRESSIVE
Adobe DigitalPublishing
PDF• Relatively small file  size• Some flexibility• Device issues
HTML• Tiny file size• Some flexibility• Lack of layout control
PNG• Huge file size• Complete pixel level  control of layout
CSS PROPOSALS
CSS REGIONS
CSS EXCLUSIONS
Demo       CSS Regions and         Exclusions
CSS SHADERS
Demo       CSS Shaders
I am sickand tiredof seeingonly 6-10fontsdeemed“web safe”
WANTMANYMORE
Tastefully   thoughThose last few slides were like font vomit
Webfonts• Webfonts are a solution to this  – Require multiple formats  – Require proper licensing
TYPEKIT
DEMO       Typekit
WE WANTTO BEEVERYWHERE
If you haven’t tested on thedevice, then you haven’t tested
SHADOW
Demo       Shadow
Why do we need   native?
That last one is an Accelerome
Access to    devicecomponents and   OS API’s
Access toApp Stores
PHONEGAP
PhoneGap powersnative applications       using  HTML/JS/CSS
PhoneGap gives   access tocomponents and     API’s
PhoneGap Apps    can be distributed in     stores
What do youmean by “native”    apps
UI is not native
Demo       PhoneGap
Still not great
PHONEGAP BUILD
Demo       PhoneGap Build
WE NEEDBETTER TOOLS
EDGE
Demo       Edge
More tools are   coming
CONCLUSIONS
Html.adobe.com
Hiring
Adobe wants tocreate tools thatallow you to be   expressive   anywhere.
Then we want to sell those tools      to you.
Follow up?• Preso will be up at  – http://slideshare.net/tpryan• Feel free to contact me  – terry.ryan@adobe.com  – http:/...
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
WebDU Keynote
Upcoming SlideShare
Loading in …5
×

WebDU Keynote

1,947 views

Published on

Published in: Technology, Design
  • Be the first to comment

WebDU Keynote

  1. 1. HTML5 & the riseof our mobileoverlords
  2. 2. Who Are You?
  3. 3. A FEW RANDOMOBSERVATIONS
  4. 4. HTML5 Adoption
  5. 5. Chromeversion 14 October 4 th
  6. 6. Chromeversion 15 October 26th
  7. 7. Chromeversion 16 January 6 th
  8. 8. Chromeversion 17 February 17th
  9. 9. Chromeversion 18 March 28 th 2012
  10. 10. Chrome version 18 LastUpdate April 30th 2012
  11. 11. Gartner forecastsphones overtaking PCs as most common web browsing device by 2013
  12. 12. HTML5 is not future tech
  13. 13. Even when the checkmark is there, performance isn’t.
  14. 14. Designing fordevices is hard
  15. 15. Testing is critical
  16. 16. Native AppsPros Cons• Easy to monetize • Costly to develop• Fit user expectations • Restricted in delivery
  17. 17. Mobile Web AppsPros Cons• More Flexible • Harder to monetize• More Reusable • Hard to target • Lack complete device access.
  18. 18. No clear cut winner
  19. 19. Demo Expressive HTML
  20. 20. CSS Transitions
  21. 21. CSS Animation
  22. 22. Canvas
  23. 23. Video
  24. 24. JS Frameworks that handle these things
  25. 25. People want anexpressive web
  26. 26. We need the medium to bemore expressive
  27. 27. We need ourwork to work on more devices
  28. 28. We need better tools
  29. 29. WE WANT TO BEEXPRESSIVE
  30. 30. Adobe DigitalPublishing
  31. 31. PDF• Relatively small file size• Some flexibility• Device issues
  32. 32. HTML• Tiny file size• Some flexibility• Lack of layout control
  33. 33. PNG• Huge file size• Complete pixel level control of layout
  34. 34. CSS PROPOSALS
  35. 35. CSS REGIONS
  36. 36. CSS EXCLUSIONS
  37. 37. Demo CSS Regions and Exclusions
  38. 38. CSS SHADERS
  39. 39. Demo CSS Shaders
  40. 40. I am sickand tiredof seeingonly 6-10fontsdeemed“web safe”
  41. 41. WANTMANYMORE
  42. 42. Tastefully thoughThose last few slides were like font vomit
  43. 43. Webfonts• Webfonts are a solution to this – Require multiple formats – Require proper licensing
  44. 44. TYPEKIT
  45. 45. DEMO Typekit
  46. 46. WE WANTTO BEEVERYWHERE
  47. 47. If you haven’t tested on thedevice, then you haven’t tested
  48. 48. SHADOW
  49. 49. Demo Shadow
  50. 50. Why do we need native?
  51. 51. That last one is an Accelerome
  52. 52. Access to devicecomponents and OS API’s
  53. 53. Access toApp Stores
  54. 54. PHONEGAP
  55. 55. PhoneGap powersnative applications using HTML/JS/CSS
  56. 56. PhoneGap gives access tocomponents and API’s
  57. 57. PhoneGap Apps can be distributed in stores
  58. 58. What do youmean by “native” apps
  59. 59. UI is not native
  60. 60. Demo PhoneGap
  61. 61. Still not great
  62. 62. PHONEGAP BUILD
  63. 63. Demo PhoneGap Build
  64. 64. WE NEEDBETTER TOOLS
  65. 65. EDGE
  66. 66. Demo Edge
  67. 67. More tools are coming
  68. 68. CONCLUSIONS
  69. 69. Html.adobe.com
  70. 70. Hiring
  71. 71. Adobe wants tocreate tools thatallow you to be expressive anywhere.
  72. 72. Then we want to sell those tools to you.
  73. 73. Follow up?• Preso will be up at – http://slideshare.net/tpryan• Feel free to contact me – terry.ryan@adobe.com – http://terrenceryan.com – Twitter: @tpryan

×