Material Design for the Web

Material Design for the Web

Slides for my talk at Chrome Tech Talk Night in Tokyo on 16th July 2015. Event details: http://googledevjp.blogspot.jp/2015/07/chrome-tech-talk-night-8.html

96270e4c3e5e9806cf7245475c00b275?s=128

Addy Osmani

July 16, 2015
Tweet

Transcript

  1. Material Design for the Web +AddyOsmani @addyosmani Google Developers

  2. None
  3. None
  4. None
  5. None
  6. READY FOR PRODUCTION

  7. How do I get started?

  8. @addyosmani

  9. How do I draw a baby?

  10. Step 1

  11. Step 2 https://goo.gl/Y77E43

  12. Step 1.5 https://goo.gl/njyal0

  13. We wanted to do better.

  14. Learnings from Web Starter Kit, IO 2015 and Santa Tracker

  15. Polymer Starter Kit

  16. Polymer Starter Kit

  17. DOWNLOAD developers.google.com/web/tools/polymer-starter-kit

  18. <paper-toolbar> <paper-drawer-panel> <paper-header-panel> <paper-menu> Material Design

  19. Paper Buttons

  20. Theming with CSS Custom Properties <style> body { --paper-tabs: {

    background-color: red; opacity: 0.5; }; } </style> Custom Property
  21. App-wide Theming #303f9f CSS custom properties --dark-primary-color --light-primary-color --accent-color --primary-text-color

    #303f9f --dark-primary-color --light-primary-color --accent-color --primary-text-color
  22. Web App install banner Mobile Web defaults Meta theme colour

  23. Icons

  24. Adaptive UI

  25. Image: Responsiveness

  26. Material Design breakpoints

  27. Image: App templates

  28. Navigation Cards Layout

  29. Navigation List Detail

  30. List Card Over

  31. Offline-first (in your app)

  32. If your app doesn't work offline, you don't really have

    a mobile web experience. - Rob Dodson
  33. None
  34. // While there is only one cache in this example,

    the same logic will handle the case where // there are multiple versioned caches. var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) { return CURRENT_CACHES[key]; }); event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (expectedCacheNames.indexOf(cacheName) == -1) { // If this cache name isn't present in the array of "expected" cache names, then delete it. console.log('Deleting out of date cache:', cacheName); return caches.delete(cacheName); } }) ); }) ); }); // This sample illustrates an aggressive approach to caching, in which every valid response is
  35. There’s an element for that! - Gandalf

  36. Polymer Elements Catalog

  37. Service Worker caching Take your app offline with ease <script

    src="webcomponents-lite.min.js"></script> <link rel="import" href="platinum-sw-elements.html"> <platinum-sw> <platinum-sw-cache default-cache-strategy="networkFirst" precache='["image.jpg", "results.json", "page.html"]'> </platinum-sw-cache> </platinum-sw>
  38. Production-ising Apps

  39. https://goo.gl/lqZyhu

  40. image: http://gulpjs.com

  41. Build process out of the box

  42. Live-reload and cross-device development

  43. Real apps

  44. http://goo.gl/7eKVyD

  45. None
  46. Image:

  47. There’s an element for that!

  48. Google Feeds Download RSS, Atom or Media RSS feeds <google-feeds

    feed=“http://www.engadget.com/rss-full.xml" count=“25"> </google-feeds>
  49. None
  50. None
  51. There’s an element for that!

  52. Authenticate using Google, GitHub & other services <firebase-auth location="https://polymer-tests.firebaseio.com" provider="google">

    </firebase-auth>
  53. Get and set data using the Firebase APIs <firebase-collection location="https://users1.firebaseio.com/users"

    data="{{users}}"></firebase-collection> <template is="dom-repeat" items="[[users]]" as="user"> <img src="[[user.img]]"><span>[[user.name]]</span> </template>
  54. None
  55. There’s (of course) an element for that!

  56. Image:

  57. None
  58. None
  59. There’s an element for that too!

  60. Push Notifications Stay informed of messages from your app <platinum-push-messaging

    title="You have new stories" message="4 RSS feeds have new stories" icon-url="rss.png" click-url=“feeds/new/“> </platinum-push-messaging>
  61. Components Build tools Theming Layout

  62. polymer-project.org

  63. What about content sites & legacy browsers?

  64. What if I’m unable to use Polymer just yet?

  65. Material Design Lite

  66. MATERIAL
 DESIGN
 LITE What?

  67. It’s an implementation of the Material Spec targeted at content

    sites. - Me
  68. TEMPLATES MATERIAL + WEB MATERIAL
 DESIGN
 LITE

  69. IE 9+ Components IE 10+ Templates MATERIAL
 DESIGN
 LITE

  70. Only 27KB gzipped

  71. COMPONENTS

  72. None
  73. MATERIAL
 DESIGN
 LITE

  74. MATERIAL
 DESIGN
 LITE

  75. MATERIAL
 DESIGN
 LITE

  76. MATERIAL
 DESIGN
 LITE

  77. MATERIAL
 DESIGN
 LITE

  78. MATERIAL
 DESIGN
 LITE

  79. STYLES

  80. MATERIAL
 DESIGN
 LITE

  81. MATERIAL
 DESIGN
 LITE

  82. MATERIAL
 DESIGN
 LITE

  83. MATERIAL
 DESIGN
 LITE

  84. MATERIAL
 DESIGN
 LITE

  85. TEMPLATES

  86. None
  87. None
  88. None
  89. None
  90. None
  91. How? MATERIAL
 DESIGN
 LITE

  92. Vanilla CSS, HTML & JS MATERIAL
 DESIGN
 LITE

  93. <!-- Theme --> <link rel="stylesheet" href=“https://storage.googleapis.com/code.getmdl.io/ 1.0.0/material.indigo-pink.min.css"> <!-- Interaction -->

    <script src=“https://storage.googleapis.com/code.getmdl.io/1.0.0/ material.min.js"></script> <!-- Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon? family=Material+Icons"> MATERIAL
 DESIGN
 LITE Use our CDN, Bower or npm
  94. When? MATERIAL
 DESIGN
 LITE

  95. Now getmdl.io MATERIAL
 DESIGN
 LITE

  96. http://goo.gl/rr9rl9

  97. Material Design can be used for many things.

  98. Material Design can be used for many things. What are

    you going to build?
  99. Dreamstime THANK YOU

  100. Questions? +AddyOsmani @addyosmani Google Developers