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

1. Material Design for the Web +AddyOsmani @addyosmani Google Developers
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
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
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>
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>
55. There’s (of course) an element for that!
56. Image:
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
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
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