future web
TRANSCRIPT
![Page 1: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/1.jpg)
future webresponsive web
mobile weboffline web
![Page 2: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/2.jpg)
![Page 3: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/3.jpg)
build responsivetargeted sections & components
on top of base style
![Page 4: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/4.jpg)
targeted design?“ We never targeted specific devices -
and introduced media querieswhenever it felt natural to do so “
- smashing magazine
![Page 5: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/5.jpg)
video 1
![Page 6: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/6.jpg)
![Page 7: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/7.jpg)
what about wearable's?@media screen and (device-radius: 50%)
position: polarshape-inside: display
border-boundary: display
![Page 8: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/8.jpg)
sections?boundaries of components against
other components in view states
![Page 9: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/9.jpg)
video 2
![Page 10: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/10.jpg)
base style?component styles should be isolated,
but we don’t want to define a font-family for each
![Page 11: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/11.jpg)
foundation“ you do not start with liquid chocolate
when making a ´træstamme´ ”- mikkel damm
![Page 12: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/12.jpg)
ui test
integration test
unit test
- Mike Cohn http://martinfowler.com/bliki/TestPyramid.html
![Page 13: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/13.jpg)
style
scale
- Patty Toland https://t.co/Tb0q1gMwQS
speed
access
![Page 14: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/14.jpg)
speedresponsive design is more than just design
![Page 15: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/15.jpg)
video 3speed
![Page 16: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/16.jpg)
video 4speed
![Page 17: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/17.jpg)
real life situationstesting on dark fiber will never simulate
our customers experinces
![Page 18: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/18.jpg)
accessbasic functionality should be dependency free
![Page 19: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/19.jpg)
scaleorder, arrangment & content size in different viewports
![Page 20: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/20.jpg)
stylebrand colors, animations, fonts etc.
![Page 21: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/21.jpg)
5 min coffee break
![Page 22: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/22.jpg)
mobile web” in 5 years you won’t know
you’re using a browser ”- paul kinlan
![Page 23: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/23.jpg)
what do almost every device have?
a web browserso everything should be website?
no - but we are obliged to model our
data so it can be worked with in any web context
![Page 24: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/24.jpg)
![Page 25: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/25.jpg)
how is that done?new api?
not necessarily, use schema.org
![Page 26: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/26.jpg)
native supportcamera, microphone, permissions, gyro, geo etc.
but alsoui elements
![Page 27: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/27.jpg)
![Page 28: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/28.jpg)
progressive renderingasync loading fragments/components
![Page 29: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/29.jpg)
![Page 30: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/30.jpg)
offline web
![Page 31: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/31.jpg)
![Page 32: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/32.jpg)
offline web” everyone's happy, nothing is broken or smudged.
there is infinte wi-fi with infinite bandwidth, no batteries run out, no traffic, no delay”
- tobias revell
![Page 33: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/33.jpg)
the realistic worldtreat offline as a service for the customer
not and error
![Page 34: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/34.jpg)
![Page 35: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/35.jpg)
offline reservationi forgot the printed reservation on my desk
i cannot find the mail containing the reservationi have no access to the internet
buti can open the website and locate my reservation
![Page 36: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/36.jpg)
future webWeb RTC
Web ComponentsDevice API
ServiceWorkers
![Page 37: Future Web](https://reader034.vdocument.in/reader034/viewer/2022051707/58ee05b31a28ab521c8b469b/html5/thumbnails/37.jpg)
thank youquestions?