SlideShare a Scribd company logo
1 of 37
future web
responsive web
mobile web
offline web
build responsive
targeted sections & components
on top of base style
targeted design?
“ We never targeted specific devices -
and introduced media queries
whenever it felt natural to do so “
- smashing magazine
video 1
what about wearable's?
@media screen and (device-radius: 50%)
position: polar
shape-inside: display
border-boundary: display
sections?
boundaries of components against
other components in view states
video 2
base style?
component styles should be isolated,
but we don’t want to define a font-family for each
foundation
“ you do not start with liquid chocolate
when making a ´træstamme´ ”
- mikkel damm
ui test
integration test
unit test
- Mike Cohn
http://martinfowler.com/bliki/TestPyramid.html
style
scale
- Patty Toland
https://t.co/Tb0q1gMwQS
speed
access
speed
responsive design is more than just design
video 3
speed
video 4
speed
real life situations
testing on dark fiber will never simulate
our customers experinces
access
basic functionality should be dependency free
scale
order, arrangment & content size in different viewports
style
brand colors, animations, fonts etc.
5 min coffee break
mobile web
” in 5 years you won’t know
you’re using a browser ”
- paul kinlan
what do almost
every device have?
a web browser
so everything should be website?
no -
but we are obliged to model our
data so it can be worked with in any web context
how is that done?
new api?
not necessarily, use schema.org
native support
camera, microphone, permissions, gyro, geo etc.
but also
ui elements
progressive rendering
async loading fragments/components
offline web
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
the realistic world
treat offline as a service for the customer
not and error
offline reservation
i forgot the printed reservation on my desk
i cannot find the mail containing the reservation
i have no access to the internet
but
i can open the website and locate my reservation
future web
Web RTC
Web Components
Device API
ServiceWorkers
thank you
questions?

More Related Content

Similar to Future Web

The Black Hole of Video Analytics- KISSmetrics / Viddler Webinar
The Black Hole of Video Analytics- KISSmetrics / Viddler WebinarThe Black Hole of Video Analytics- KISSmetrics / Viddler Webinar
The Black Hole of Video Analytics- KISSmetrics / Viddler WebinarViddler Inc.
 
Inside eCommerce - MicksGarage -Content is king - Rob King
Inside eCommerce - MicksGarage -Content is king - Rob KingInside eCommerce - MicksGarage -Content is king - Rob King
Inside eCommerce - MicksGarage -Content is king - Rob KingJohn Walsh
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Markus Jönsson
 
Supercharge your application with the best UX practices
Supercharge your application with the best UX practicesSupercharge your application with the best UX practices
Supercharge your application with the best UX practicesGercek Karakus
 
Introduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyIntroduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyZainul Zain
 
Getting Predictable - Pragmatic Approach for Mobile Development - Devday.lk ...
Getting Predictable - Pragmatic Approach for Mobile Development  - Devday.lk ...Getting Predictable - Pragmatic Approach for Mobile Development  - Devday.lk ...
Getting Predictable - Pragmatic Approach for Mobile Development - Devday.lk ...Anjana Somathilake
 
Enabling continuous deployment of pixel-perfect user interfaces
Enabling continuous deployment of pixel-perfect user interfacesEnabling continuous deployment of pixel-perfect user interfaces
Enabling continuous deployment of pixel-perfect user interfacesstefanorago
 
Building with Watson - Enhancing the Results of Your BI Dashboard
Building with Watson - Enhancing the Results of Your BI DashboardBuilding with Watson - Enhancing the Results of Your BI Dashboard
Building with Watson - Enhancing the Results of Your BI DashboardIBM Watson
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web DesignDaniel Drew Turner
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workSamuel Bednar
 
Rob King From MicksGarage.com: Content is King
Rob King From MicksGarage.com:  Content is KingRob King From MicksGarage.com:  Content is King
Rob King From MicksGarage.com: Content is KingMicksGarage.com
 
Faster Secure Software Development with Continuous Deployment - PH Days 2013
Faster Secure Software Development with Continuous Deployment - PH Days 2013Faster Secure Software Development with Continuous Deployment - PH Days 2013
Faster Secure Software Development with Continuous Deployment - PH Days 2013Nick Galbreath
 
My Honest VideoRobot Review.pdf
My Honest VideoRobot Review.pdfMy Honest VideoRobot Review.pdf
My Honest VideoRobot Review.pdfArunas Bruzas
 
Think horizontally ood, ddd and bdd
Think horizontally ood, ddd and bddThink horizontally ood, ddd and bdd
Think horizontally ood, ddd and bddGiulio De Donato
 
Think horizontally @Codemotion
Think horizontally @CodemotionThink horizontally @Codemotion
Think horizontally @CodemotionAndrea Giuliano
 
Director of Product at Glassdoor Talks: How to Transition to Product Management
Director of Product at Glassdoor Talks:  How to Transition to Product ManagementDirector of Product at Glassdoor Talks:  How to Transition to Product Management
Director of Product at Glassdoor Talks: How to Transition to Product ManagementProduct School
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesomeJen Yu
 
Fixing security by fixing software development
Fixing security by fixing software developmentFixing security by fixing software development
Fixing security by fixing software developmentNick Galbreath
 
Lean engineering for lean/balanced teams: lessons learned (and still learning...
Lean engineering for lean/balanced teams: lessons learned (and still learning...Lean engineering for lean/balanced teams: lessons learned (and still learning...
Lean engineering for lean/balanced teams: lessons learned (and still learning...Balanced Team
 

Similar to Future Web (20)

The Black Hole of Video Analytics- KISSmetrics / Viddler Webinar
The Black Hole of Video Analytics- KISSmetrics / Viddler WebinarThe Black Hole of Video Analytics- KISSmetrics / Viddler Webinar
The Black Hole of Video Analytics- KISSmetrics / Viddler Webinar
 
Inside eCommerce - MicksGarage -Content is king - Rob King
Inside eCommerce - MicksGarage -Content is king - Rob KingInside eCommerce - MicksGarage -Content is king - Rob King
Inside eCommerce - MicksGarage -Content is king - Rob King
 
Your Brain on Responsive Design
Your Brain on Responsive DesignYour Brain on Responsive Design
Your Brain on Responsive Design
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013
 
Supercharge your application with the best UX practices
Supercharge your application with the best UX practicesSupercharge your application with the best UX practices
Supercharge your application with the best UX practices
 
Introduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyIntroduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga Academy
 
Getting Predictable - Pragmatic Approach for Mobile Development - Devday.lk ...
Getting Predictable - Pragmatic Approach for Mobile Development  - Devday.lk ...Getting Predictable - Pragmatic Approach for Mobile Development  - Devday.lk ...
Getting Predictable - Pragmatic Approach for Mobile Development - Devday.lk ...
 
Enabling continuous deployment of pixel-perfect user interfaces
Enabling continuous deployment of pixel-perfect user interfacesEnabling continuous deployment of pixel-perfect user interfaces
Enabling continuous deployment of pixel-perfect user interfaces
 
Building with Watson - Enhancing the Results of Your BI Dashboard
Building with Watson - Enhancing the Results of Your BI DashboardBuilding with Watson - Enhancing the Results of Your BI Dashboard
Building with Watson - Enhancing the Results of Your BI Dashboard
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web Design
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't work
 
Rob King From MicksGarage.com: Content is King
Rob King From MicksGarage.com:  Content is KingRob King From MicksGarage.com:  Content is King
Rob King From MicksGarage.com: Content is King
 
Faster Secure Software Development with Continuous Deployment - PH Days 2013
Faster Secure Software Development with Continuous Deployment - PH Days 2013Faster Secure Software Development with Continuous Deployment - PH Days 2013
Faster Secure Software Development with Continuous Deployment - PH Days 2013
 
My Honest VideoRobot Review.pdf
My Honest VideoRobot Review.pdfMy Honest VideoRobot Review.pdf
My Honest VideoRobot Review.pdf
 
Think horizontally ood, ddd and bdd
Think horizontally ood, ddd and bddThink horizontally ood, ddd and bdd
Think horizontally ood, ddd and bdd
 
Think horizontally @Codemotion
Think horizontally @CodemotionThink horizontally @Codemotion
Think horizontally @Codemotion
 
Director of Product at Glassdoor Talks: How to Transition to Product Management
Director of Product at Glassdoor Talks:  How to Transition to Product ManagementDirector of Product at Glassdoor Talks:  How to Transition to Product Management
Director of Product at Glassdoor Talks: How to Transition to Product Management
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesome
 
Fixing security by fixing software development
Fixing security by fixing software developmentFixing security by fixing software development
Fixing security by fixing software development
 
Lean engineering for lean/balanced teams: lessons learned (and still learning...
Lean engineering for lean/balanced teams: lessons learned (and still learning...Lean engineering for lean/balanced teams: lessons learned (and still learning...
Lean engineering for lean/balanced teams: lessons learned (and still learning...
 

Recently uploaded

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 

Recently uploaded (20)

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 

Future Web

Editor's Notes

  1. We need to rethink the way we build websites It will be difficult to shift when coming from a fixed size world, but we need to think fluid and adaptive screens/elements
  2. If your website takes seconds to load, then its properly useless to make it responsive, because mobile device users will go leave before anyway