Material Design for the Web

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