SlideShare a Scribd company logo
1 of 128
Download to read offline
Hi!
I’m @AaronGustafson
What is
PROGRESSIVE
ENHANCEMENT?
TECHNOLOGICAL
RESTRICTIONS
USEREXPERIENCE
BROWSER CAPABILITIES
BASIC ADVANCED
Content
Semantics
Design
Interactivity
reddit.com
Make your mobile site strategy
simply your website strategy
bbc.com/news
“We have developed a new version of
the News website which implements a
responsive design so that we can offer all
our users the best experience possible no
matter what device they are using.”
NIKO VIJAYARATNAM
SENIOR PROJECT MANAGER - BBC
RESULTS
1
code base
30 

different languages
EFFORT
4
years
50
contributors
5000
pull requests
BEFORE AFTER
“Looking back, using Mobile First was
genius. We were able to strip everything
back to the core content, the stuff that
mattered to users.
No JavaScript. No cruft. Just the good
stuff. Journalism at its best.”
JOHN CLEVELY
@JCLEVELEY
cnn.com
bcbst.com
What you’d expect
What you might get
So what’s the PROBLEM?
Assuming
JAVASCRIPT
is always available
How many people are
missing out on
JavaScript-based
enhancement?
1.1%
according to the UK’s GDS
+0.2%
JavaScript disabled or
unavailable
0.9%
JavaScript enabled
but never received
That’s 1 in 93 people
LOGIN IS AN EASY FIX
1. Include the Login Form in your markup and give it a
unique id: <form id="login">
2. Hide it by default:

form#login { display: none; }
3. Make the activation link target it:

<a href="#login">Login…</a>
4. Show the form when someone clicks the link:

form#login:target { display: block; }
5. Use CSS to transition the opacity to make it look friggin’
sweet!
OR EVEN EASIER…
1. Make the link point to a login page
NAVIGATION
thebostoncalendar.com/system/events/photos/000/023/300/original/tumblr_n9wbg5xUuK1qbycdbo1_1280.jpg?1421977741
Large screen
Small screen
Touch devices
Mouse users
Mouse and touch enabled devices
Keyboard users
Color blind users
Screen readers
Users without JavaScript
nichols.edu
Hamburger menu acts as jump link to navigation at bottom of the page;
main and sub nav are shown
SCENARIOS
IF NO JS; SMALL SCREEN WIDTH
Show main navigation; hide sub nav on default under drop down menus
nested within main; use CSS to show sub navigation on hover
IF NO JS or JS; LARGE SCREEN WIDTH
Hamburger menu toggles off-screen navigation pattern; two levels of
nested navigation - expand/collapse functionality for sub-nav
IF JS; SMALL SCREEN WIDTH
Make top level navigation items link to landing pages with sub-nav
accessible
FOR TOUCH DEVICES; LARGE SCREEN WIDTH
Would you believe you
CAN DO THAT
without JavaScript?
<form id="get-a-quote" action="…">
<p>
<label for="stock-symbol">Stock Lookup</label>
<input id="stock-symbol" type="text" name="SID_VALUE_ID"

required="required" list="search-options">
<button type="submit"><b>Get a Quote</b></button>
</p>
</form>
<!-- … -->
<datalist id="search-options">
<option value="A">A: AGILENT TECHNOLOGIES INC</option>
<option value="ANF">ANF: ABERCROMBIE &amp; FITCH -CL

A</option>
<!-- continued -->
</datalist>
<form id="get-a-quote" action="…">
<p>
<label for="stock-symbol">Stock Lookup</label>
<input id="stock-symbol" type="text" name="SID_VALUE_ID"

required="required" list="search-options">
<button type="submit"><b>Get a Quote</b></button>
</p>
</form>
<!-- … -->
<datalist id="search-options">
<option value="A">A: AGILENT TECHNOLOGIES INC</option>
<option value="ANF">ANF: ABERCROMBIE &amp; FITCH -CL

A</option>
<!-- continued -->
</datalist>
Surely that REQUIRES
JavaScript!?
<details>
<summary>
<h1>YHOO Snapshot</h1>
<div class="tabular">
<dl class="symbol">
<dt>Symbol</dt>
<dd><a href="#" title="Yahoo">YHOO</a></dd>
</dl>
<dl class="price">
<dt>Last Price</dt>
<dd>62.95</dd>
</dl>
<!-- more -->
</div>
</summary>
<div class="additional">
<figure> … </figure>
<ul class="headlines"> … </ul>
</div>
</details>
<details>
<summary>
<h1>YHOO Snapshot</h1>
<div class="tabular">
<dl class="symbol">
<dt>Symbol</dt>
<dd><a href="#" title="Yahoo">YHOO</a></dd>
</dl>
<dl class="price">
<dt>Last Price</dt>
<dd>62.95</dd>
</dl>
<!-- more -->
</div>
</summary>
<div class="additional">
<figure> … </figure>
<ul class="headlines"> … </ul>
</div>
</details>
100 MILLISECONDS
is how long you have for the user to feel like the task was
instantaneous.
1 SECOND
is how long you have for the user’s state of flow to remain
uninterrupted (though the delay will still be noticeable)
10 SECONDS
is how long you have before the user loses interest entirely and
will want to multitask while the task is completing.
http://www.nngroup.com/articles/response-times-3-important-limits/
To keep an uninterrupted flow,
we want to aim for a first
render time of
1 SECOND
40%
of people abandon a website
that takes more than 3 second
to load
blog.kissmetrics.com/loading-time/
WALMART.COM found that for every
second of load time improvement,
conversions increased by up to 2%
STAPLES.COM found that for every one
second of improvement conversions
increased by 10%
radware.com/fall-sotu2014/
Over the last few years, the average web
page size has grown:N
ov
2011
M
ay
2012
N
ov
2012
M
ay
2013
N
ov
2013
M
ay
2014
N
ov
2014
M
ay
2015
2099Kb
1907Kb
1775Kb
1653Kb
1448Kb
1269Kb
1059Kb
929Kb
soasta.com/blog/page-bloat-average-web-page-2-mb/
The top 100 Ecommerce
home pages take
6.5 SECONDS
to render and
11.4 SECONDS
to fully load
IMAGE STRATEGY needs to
be a top priority for enhancing
our websites
llbean.com
forever21.com
ae.com
zappos.com
abercrombie.com
gap.com
modcloth.com
0.67MB
0.88MB
1.21MB
1.36MB
2.37MB
2.84MB
12.28MB
bananarepublic.com
3.505MB

(2.67MB in images)
HTML TEXT
WEB FONTS
SVG
CSS GRADIENTS
PICTURE/SRCSET & SIZES
NASTYGAL.COM
landsend.com
<picture>
<source media="(min-width: 767px)"
srcset="20150402-feature_bb.jpg">
<img src="20150402-mobile.jpg"
alt="Buttons and beyond: save 30%">
</picture>
codepen.io/Jenn/pen/ef916555aa228574247599d7948b578c
caniuse.com/#feat=picture
Enhance images with
SVG
FOREVER21.COM
<h1>

<a href="/">

<!--[if IE 8]><div class="logo-ie"></div><![endif]-->

<svg id="logo" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 244 41"
style="enable-background:new 0 0 244 41;" xml:space="preserve">
<path fill="#FFFFFF"
d="M0,40.66h5.73V23.45h9.89v-5.44H5.73V5.78h11.35V0.34H0V40.66z
M34.72,0c-4.67,0-9.61,3.28-9.61,9.85v21.29
c0,6.57,4.95,9.85,9.61,9.85c4.67,0,9.61-3.28,9.61-9.85V9.85C44.33,3.28
,39.39,0,34.72,0z M38.6,31.15 c0,2.78-1.8,
4.08-3.88,.14c-4.78,0-8.6,3.96-8.6,8.78v3.17h5.73V8.66
c0-1.87,1.12-2.89,2.81-2.89c2.81,0,2.81,2.43,2.81,4.47c0,2.21,0,3.34-1
.01,5.32l-10.34,19.65v5.44h17.09v-5.78h-10.34
l8.43-16.37C225.32,15.06,225.43,14.04,225.43,10.14z
M238.27,0.34l-5.73-0.02v6.16l5.73-0.03v34.21H244V0.34H238.27z"></path>
</svg>
</a>
</h1>
caniuse.com/#search=svg
sarasoueidan.com/blog/svg-picture
Content strategy
should be a part of your
image strategy
ralphlauren.com
3.21MB
WEB 1.0
PAGE 1 PAGE 2
CART
CONFIRMATION
LINK CLICK
ADD TO
CART
CHECK

OUT
SERVER
GETTING TO PAGE 1
1. Browser requests web page
2. Server delivers web page
3. Browser displays web page
“SINGLE PAGE APP”
PAGE 1 PAGE 2
CART
CONFIRMATION
LINK CLICK
ADD TO
CART
CHECK

OUT
JAVASCRIPT
GETTING TO PAGE 1
1. Browser requests web page
2. Server delivers HTML shell (<body></body>)

and JavaScript framework (e.g. Ember, Angular, etc.)
3. Browser downloads, parses & executes JavaScript
framework to get it into memory
4. Framework begins requesting the actual web page content
5. Server delivers web page bits
6. Browser displays web page
“At some point recently, the browser
transformed from being an awesome interactive
document viewer into being the world’s most
advanced, widely-distributed application
runtime.”
TOM DALE
PROGRESSIVE ENHANCEMENT: ZED’S DEAD, BABY
http://tomdale.net/2013/09/progressive-enhancement-is-dead/
UPSIDE
• More “native app”-like feel
• Less reliance on “the server”
• More JavaScript!
DOWNSIDE
• More JavaScript!
•Slower to get to page load
•Executing in an unknown environment
filamentgroup.com/lab/mv-initial-load-times.html
Let’s look at my
HEALTHCARE
DASHBOARD
WHAT’S HAPPENING HERE?
1. Load HTML shell (header, footer, etc.)
2. Download and display a nice animated
loading icon
3. Use JavaScript to request the remaining
dashboard content and load it in
WHAT’S THE FALLBACK?
1. Load HTML shell (header, footer, etc.)
2. Download and display a nice animated
loading icon
3. Use JavaScript to request the remaining
dashboard content and load it in
1. Assemble the content you need to display the
page
2. Send the page.
3. There is no step 3.
AN ALTERNATIVE APPROACH
AN ALTERNATIVE APPROACH
1. Assemble the content you need to display the
page
2. Send the page.
3. There is no step 3.

If you have a widget that needs to be
dynamic, take it over with JS after load and
make it update dynamically.
nerds.airbnb.com/isomorphic-javascript-future-web-apps/
ISOMORPHIC JAVASCRIPT
• Server sends a real page
• JavaScript takes over to create a single page
app if possible
• If not possible, all links & functionality go
through the server
HOW ISOMORPHIC JS WORKS
PAGE 1 PAGE 2
CART
CONFIRMATION
LINK CLICK
ADD TO
CART
CHECK

OUT
JAVASCRIPT
OR THE SERVER
But you don’t need to
use Isomorphic
JavaScript
“Say what you will about server-rendered apps,
the performance of your server is much more
predictable, and more easily upgraded, than the
many, many different device configurations of
your users. Server-rendering is important to
ensure that users who are not on the latest-and-
greatest can see your content immediately when
they click a link.”
TOM DALE
YOU’RE MISSING THE POINT OF SERVER-SIDE RENDERED JAVASCRIPT APPS
tomdale.net/2015/02/youre-missing-the-point-of-server-side-rendered-javascript-apps/
Let me tell you a
story…
$X
iPhone, iPad, Android,
Windows Phone
$X/3
1,400 more devices
$X
iPhone, iPad, Android,
Windows Phone
$X/3
1,400 more devices
$X/6
Progressive enhancement
JUST WORKS
We need to think in
terms of EXPERIENCE
AS A CONTINUUM
Progressive enhancement
embraces THE GRAIN
OF THE WEB rather
than going against it.
SLIDE DESIGN BY @JENNLUKAS
ILLUSTRATIONS BY @MSUTTERS

More Related Content

What's hot

Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
Atos_Worldline
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 

What's hot (20)

Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web Apps
 
Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Apps
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile Web
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
 
スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
What is jQuery?
What is jQuery?What is jQuery?
What is jQuery?
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
 

Viewers also liked

Iva 4% a viviendas en construcción. pagos anticipados
Iva 4% a viviendas en construcción. pagos anticipadosIva 4% a viviendas en construcción. pagos anticipados
Iva 4% a viviendas en construcción. pagos anticipados
David Ballester Ménguez
 

Viewers also liked (20)

Falling in Love with Forms [F0WD 2015]
Falling in Love with Forms [F0WD 2015]Falling in Love with Forms [F0WD 2015]
Falling in Love with Forms [F0WD 2015]
 
Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]
 
Ruining the User Experience [SXSW 2007]
Ruining the User Experience [SXSW 2007]Ruining the User Experience [SXSW 2007]
Ruining the User Experience [SXSW 2007]
 
Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]
 
Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]
 
Designing the Conversation [SpeechTek 2016]
Designing the Conversation [SpeechTek 2016]Designing the Conversation [SpeechTek 2016]
Designing the Conversation [SpeechTek 2016]
 
The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]
 
La posada del silencio nº 53, curso vi
La posada del silencio nº 53, curso viLa posada del silencio nº 53, curso vi
La posada del silencio nº 53, curso vi
 
Encuentro Aporta 2014 - Mesa 3 - Carlos Iglesias
Encuentro Aporta 2014 - Mesa 3 - Carlos IglesiasEncuentro Aporta 2014 - Mesa 3 - Carlos Iglesias
Encuentro Aporta 2014 - Mesa 3 - Carlos Iglesias
 
Bases esquí-náutico-manta-2011
Bases esquí-náutico-manta-2011Bases esquí-náutico-manta-2011
Bases esquí-náutico-manta-2011
 
Ingles
InglesIngles
Ingles
 
Tras la estela del éxito
Tras la estela del éxitoTras la estela del éxito
Tras la estela del éxito
 
BGBA newsletter 03 2016
BGBA newsletter 03 2016BGBA newsletter 03 2016
BGBA newsletter 03 2016
 
Myrie
MyrieMyrie
Myrie
 
Iva 4% a viviendas en construcción. pagos anticipados
Iva 4% a viviendas en construcción. pagos anticipadosIva 4% a viviendas en construcción. pagos anticipados
Iva 4% a viviendas en construcción. pagos anticipados
 
Blue Magic Catering Equipment 2014
Blue Magic Catering Equipment 2014Blue Magic Catering Equipment 2014
Blue Magic Catering Equipment 2014
 
WORKSHOP DOING BUSINESS IN GERMANY: OPPORTUNITIES IN THE GERMAN ENERGY MARKET
WORKSHOP  DOING BUSINESS IN GERMANY: OPPORTUNITIES IN THE GERMAN ENERGY MARKETWORKSHOP  DOING BUSINESS IN GERMANY: OPPORTUNITIES IN THE GERMAN ENERGY MARKET
WORKSHOP DOING BUSINESS IN GERMANY: OPPORTUNITIES IN THE GERMAN ENERGY MARKET
 
MERCOSUR y UNASUR
MERCOSUR y UNASURMERCOSUR y UNASUR
MERCOSUR y UNASUR
 
Catálogo - Regalos para Empresas - Midoceanbrands 2015
Catálogo - Regalos para Empresas -  Midoceanbrands 2015Catálogo - Regalos para Empresas -  Midoceanbrands 2015
Catálogo - Regalos para Empresas - Midoceanbrands 2015
 
Deber de computacion 3
Deber de computacion 3Deber de computacion 3
Deber de computacion 3
 

Similar to There Are No “Buts” in Progressive Enhancement [Øredev 2015]

Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websites
Four Kitchens
 
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websites
haxorize
 
Pablo Villalba -
Pablo Villalba - Pablo Villalba -
Pablo Villalba -
.toster
 

Similar to There Are No “Buts” in Progressive Enhancement [Øredev 2015] (20)

Re-imagining How We Design Responsively (Jonathan Fielding)
Re-imagining How We Design Responsively (Jonathan Fielding)Re-imagining How We Design Responsively (Jonathan Fielding)
Re-imagining How We Design Responsively (Jonathan Fielding)
 
IE9 for developers
IE9 for developersIE9 for developers
IE9 for developers
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
 
Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websites
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentation
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
 
SUGMEA - Sitecore JSS and Performance Optimization - Alex Shyba - Altudo
SUGMEA - Sitecore JSS and Performance Optimization - Alex Shyba - AltudoSUGMEA - Sitecore JSS and Performance Optimization - Alex Shyba - Altudo
SUGMEA - Sitecore JSS and Performance Optimization - Alex Shyba - Altudo
 
Mobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile webMobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile web
 
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
 
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websites
 
BrowserArchitecture_ClientSide.pptx
BrowserArchitecture_ClientSide.pptxBrowserArchitecture_ClientSide.pptx
BrowserArchitecture_ClientSide.pptx
 
Pablo Villalba -
Pablo Villalba - Pablo Villalba -
Pablo Villalba -
 
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
 
Rise of the Content Mesh: Webcast with Contentful and Gatsby
Rise of the Content Mesh: Webcast with Contentful and GatsbyRise of the Content Mesh: Webcast with Contentful and Gatsby
Rise of the Content Mesh: Webcast with Contentful and Gatsby
 

More from Aaron Gustafson

More from Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Recently uploaded

一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
thubko
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
Isadora Agency
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
Amil baba
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
joshuaclack73
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 

Recently uploaded (20)

一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
Spring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers ParisSpring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers Paris
 
Top 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptxTop 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptx
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
Rise of Digital Textiles__PrintAction
Rise of Digital Textiles__PrintActionRise of Digital Textiles__PrintAction
Rise of Digital Textiles__PrintAction
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
 
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTUREGBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
 
And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
 

There Are No “Buts” in Progressive Enhancement [Øredev 2015]