$30 off During Our Annual Pro Sale. View Details »

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

Addy Osmani

July 16, 2015
Tweet

More Decks by Addy Osmani

Other Decks in Design

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