Slide 1
Slide 1 text
Material Design
for the Web
+AddyOsmani
@addyosmani
Google Developers
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
READY
FOR
PRODUCTION
Slide 7
Slide 7 text
How do I get started?
Slide 8
Slide 8 text
@addyosmani
Slide 9
Slide 9 text
How do I draw a baby?
Slide 10
Slide 10 text
Step 1
Slide 11
Slide 11 text
Step 2
https://goo.gl/Y77E43
Slide 12
Slide 12 text
Step 1.5
https://goo.gl/njyal0
Slide 13
Slide 13 text
We wanted to do better.
Slide 14
Slide 14 text
Learnings from Web Starter Kit, IO 2015 and Santa Tracker
Slide 15
Slide 15 text
Polymer Starter Kit
Slide 16
Slide 16 text
Polymer Starter Kit
Slide 17
Slide 17 text
DOWNLOAD
developers.google.com/web/tools/polymer-starter-kit
Slide 18
Slide 18 text
Material Design
Slide 19
Slide 19 text
Paper Buttons
Slide 20
Slide 20 text
Theming with CSS Custom Properties
body {
--paper-tabs: {
background-color: red;
opacity: 0.5;
};
}
Custom Property
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Web App install banner
Mobile Web defaults
Meta theme colour
Slide 23
Slide 23 text
Icons
Slide 24
Slide 24 text
Adaptive UI
Slide 25
Slide 25 text
Image:
Responsiveness
Slide 26
Slide 26 text
Material Design breakpoints
Slide 27
Slide 27 text
Image:
App templates
Slide 28
Slide 28 text
Navigation Cards Layout
Slide 29
Slide 29 text
Navigation List Detail
Slide 30
Slide 30 text
List Card Over
Slide 31
Slide 31 text
Offline-first (in your app)
Slide 32
Slide 32 text
If your app doesn't work
offline, you don't really
have a mobile web
experience.
- Rob Dodson
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
// 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
Slide 35
Slide 35 text
There’s an element
for that!
- Gandalf
Slide 36
Slide 36 text
Polymer Elements Catalog
Slide 37
Slide 37 text
Service Worker caching
Take your app offline with ease
Slide 38
Slide 38 text
Production-ising Apps
Slide 39
Slide 39 text
https://goo.gl/lqZyhu
Slide 40
Slide 40 text
image: http://gulpjs.com
Slide 41
Slide 41 text
Build process out of the box
Slide 42
Slide 42 text
Live-reload and cross-device development
Slide 43
Slide 43 text
Real apps
Slide 44
Slide 44 text
http://goo.gl/7eKVyD
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Image:
Slide 47
Slide 47 text
There’s an element
for that!
Slide 48
Slide 48 text
Google Feeds
Download RSS, Atom or Media RSS feeds
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
There’s an element
for that!
Slide 52
Slide 52 text
Authenticate using Google, GitHub & other services
Slide 53
Slide 53 text
Get and set data using the Firebase APIs
[[user.name]]
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
There’s (of course)
an element for that!
Slide 56
Slide 56 text
Image:
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
There’s an element
for that too!
Slide 60
Slide 60 text
Push Notifications
Stay informed of messages from your app
Slide 61
Slide 61 text
Components
Build tools
Theming
Layout
Slide 62
Slide 62 text
polymer-project.org
Slide 63
Slide 63 text
What about content sites
& legacy browsers?
Slide 64
Slide 64 text
What if I’m unable to use
Polymer just yet?
Slide 65
Slide 65 text
Material Design Lite
Slide 66
Slide 66 text
MATERIAL
DESIGN
LITE
What?
Slide 67
Slide 67 text
It’s an implementation of
the Material Spec targeted
at content sites.
- Me
Slide 68
Slide 68 text
TEMPLATES MATERIAL + WEB
MATERIAL
DESIGN
LITE
Slide 69
Slide 69 text
IE 9+
Components
IE 10+
Templates
MATERIAL
DESIGN
LITE
Slide 70
Slide 70 text
Only 27KB gzipped
Slide 71
Slide 71 text
COMPONENTS
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
MATERIAL
DESIGN
LITE
Slide 74
Slide 74 text
MATERIAL
DESIGN
LITE
Slide 75
Slide 75 text
MATERIAL
DESIGN
LITE
Slide 76
Slide 76 text
MATERIAL
DESIGN
LITE
Slide 77
Slide 77 text
MATERIAL
DESIGN
LITE
Slide 78
Slide 78 text
MATERIAL
DESIGN
LITE
Slide 79
Slide 79 text
STYLES
Slide 80
Slide 80 text
MATERIAL
DESIGN
LITE
Slide 81
Slide 81 text
MATERIAL
DESIGN
LITE
Slide 82
Slide 82 text
MATERIAL
DESIGN
LITE
Slide 83
Slide 83 text
MATERIAL
DESIGN
LITE
Slide 84
Slide 84 text
MATERIAL
DESIGN
LITE
Slide 85
Slide 85 text
TEMPLATES
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
How?
MATERIAL
DESIGN
LITE
Slide 92
Slide 92 text
Vanilla CSS, HTML & JS
MATERIAL
DESIGN
LITE
Slide 93
Slide 93 text
MATERIAL
DESIGN
LITE
Use our CDN, Bower or npm
Slide 94
Slide 94 text
When?
MATERIAL
DESIGN
LITE
Slide 95
Slide 95 text
Now
getmdl.io
MATERIAL
DESIGN
LITE
Slide 96
Slide 96 text
http://goo.gl/rr9rl9
Slide 97
Slide 97 text
Material Design can be
used for many things.
Slide 98
Slide 98 text
Material Design can be
used for many things.
What are you going to
build?
Slide 99
Slide 99 text
Dreamstime
THANK YOU
Slide 100
Slide 100 text
Questions?
+AddyOsmani
@addyosmani
Google Developers