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

Transcript

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

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. READY
   FOR
   PRODUCTION
   

   View Slide

7. How do I get started?
   

   View Slide

8. @addyosmani
   

   View Slide

9. How do I draw a baby?
   

   View Slide

10. Step 1
    

    View Slide

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

    View Slide

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

    View Slide

13. We wanted to do better.
    

    View Slide

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

    View Slide

15. Polymer Starter Kit
    

    View Slide

16. Polymer Starter Kit
    

    View Slide

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

    View Slide

18. 
    
    
    
    Material Design
    

    View Slide

19. Paper Buttons
    

    View Slide

20. Theming with CSS Custom Properties
    <br/>body {<br/>--paper-tabs: {<br/>background-color: red;<br/>opacity: 0.5;<br/>};<br/>}<br/>
    Custom Property
    

    View Slide

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
    

    View Slide

22. Web App install banner
    Mobile Web defaults
    Meta theme colour
    

    View Slide

23. Icons
    

    View Slide

24. Adaptive UI
    

    View Slide

25. Image:
    Responsiveness
    

    View Slide

26. Material Design breakpoints
    

    View Slide

27. Image:
    App templates
    

    View Slide

28. Navigation Cards Layout
    

    View Slide

29. Navigation List Detail
    

    View Slide

30. List Card Over
    

    View Slide

31. Offline-first (in your app)
    

    View Slide

32. If your app doesn't work
    offline, you don't really
    have a mobile web
    experience.
    - Rob Dodson
    

    View Slide

33. View Slide

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
    

    View Slide

35. There’s an element
    for that!
    - Gandalf
    

    View Slide

36. Polymer Elements Catalog
    

    View Slide

37. Service Worker caching
    Take your app offline with ease
    
    
    
    precache='["image.jpg", "results.json", "page.html"]'>
    
    
    

    View Slide

38. Production-ising Apps
    

    View Slide

39. https://goo.gl/lqZyhu
    

    View Slide

40. image: http://gulpjs.com
    

    View Slide

41. Build process out of the box
    

    View Slide

42. Live-reload and cross-device development
    

    View Slide

43. Real apps
    

    View Slide

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

    View Slide

45. View Slide

46. Image:
    

    View Slide

47. There’s an element
    for that!
    

    View Slide

48. Google Feeds
    Download RSS, Atom or Media RSS feeds
    feed=“http://www.engadget.com/rss-full.xml"
    count=“25">
    
    

    View Slide

49. View Slide

50. View Slide

51. There’s an element
    for that!
    

    View Slide

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

    View Slide

53. Get and set data using the Firebase APIs
    location="https://users1.firebaseio.com/users"
    data="{{users}}">
    
    [[user.name]]
    
    

    View Slide

54. View Slide

55. There’s (of course)
    an element for that!
    

    View Slide

56. Image:
    

    View Slide

57. View Slide

58. View Slide

59. There’s an element
    for that too!
    

    View Slide

60. Push Notifications
    Stay informed of messages from your app
    title="You have new stories"
    message="4 RSS feeds have new stories"
    icon-url="rss.png"
    click-url=“feeds/new/“>
    
    

    View Slide

61. Components
    Build tools
    Theming
    Layout
    

    View Slide

62. polymer-project.org
    

    View Slide

63. What about content sites
    & legacy browsers?
    

    View Slide

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

    View Slide

65. Material Design Lite
    

    View Slide

66. MATERIAL

    DESIGN

    LITE
    What?
    

    View Slide

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

    View Slide

68. TEMPLATES MATERIAL + WEB
    MATERIAL

    DESIGN

    LITE
    

    View Slide

69. IE 9+
    Components
    IE 10+
    Templates
    MATERIAL

    DESIGN

    LITE
    

    View Slide

70. Only 27KB gzipped
    

    View Slide

71. COMPONENTS
    

    View Slide

72. View Slide

73. MATERIAL

    DESIGN

    LITE
    

    View Slide

74. MATERIAL

    DESIGN

    LITE
    

    View Slide

75. MATERIAL

    DESIGN

    LITE
    

    View Slide

76. MATERIAL

    DESIGN

    LITE
    

    View Slide

77. MATERIAL

    DESIGN

    LITE
    

    View Slide

78. MATERIAL

    DESIGN

    LITE
    

    View Slide

79. STYLES
    

    View Slide

80. MATERIAL

    DESIGN

    LITE
    

    View Slide

81. MATERIAL

    DESIGN

    LITE
    

    View Slide

82. MATERIAL

    DESIGN

    LITE
    

    View Slide

83. MATERIAL

    DESIGN

    LITE
    

    View Slide

84. MATERIAL

    DESIGN

    LITE
    

    View Slide

85. TEMPLATES
    

    View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. How?
    MATERIAL

    DESIGN

    LITE
    

    View Slide

92. Vanilla CSS, HTML & JS
    MATERIAL

    DESIGN

    LITE
    

    View Slide

93. 
    1.0.0/material.indigo-pink.min.css">
    
    material.min.js">
    
    
    MATERIAL

    DESIGN

    LITE
    Use our CDN, Bower or npm
    

    View Slide

94. When?
    MATERIAL

    DESIGN

    LITE
    

    View Slide

95. Now
    getmdl.io
    MATERIAL

    DESIGN

    LITE
    

    View Slide

96. http://goo.gl/rr9rl9
    

    View Slide

97. Material Design can be
    used for many things.
    

    View Slide

98. Material Design can be
    used for many things.
    What are you going to
    build?
    

    View Slide

99. Dreamstime
    THANK YOU
    

    View Slide

100. Questions?
     +AddyOsmani
     @addyosmani
     Google Developers
     

     View Slide