SlideShare a Scribd company logo
EXPLORING
ADAPTIVE
INTERFACES
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson
Building for

the Web is hard.
© Brad Frost
Created by Vectors Market
from the Noun Project
640 × 480
In the beginning…
800 × 600
Created by Vectors Market
from the Noun Project
Ok, we can go a little larger.
Created by Vectors Market
from the Noun Project
1024 × 768
Ok, a bit larger, but that’s it.
Created by Vectors Mark
from the Noun Project
1366 × 7681024 × 600
Created by Vectors Market
from the Noun Project
1280 × 800
Created by Vectors Market
from the Noun Project
800 × 600
Created by Vectors Market
from the Noun Project
Of course laptops…
1024 × 768
Created by Vectors Market
from the Noun Project
The web’s“happy place”.
640 × 200
Created by Douglas Santos
from the Noun Project
Created by creative outlet
from the Noun Project
240 × 240
We were ignoring mobile…
3840 × 2160320 × 480
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
Until this happened.
Don’t even get me
started on tablets.
© Brad Frost
1920 × 1080
Created by Vectors Market
from the Noun Project
7680 × 4320
Created by Vectors Market
from the Noun Project
But desktop is simple, right?
Chasing screen

sizes is clearly a

fool’s errand.
© Brad Frost
In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2014 we detected
— Jason Samuels

IT Manager,

National Council on Family Relations
Source
“
1062
One year after the iPhone
3 years ago!
“ 200
In 2008, 27 screen 

resolutions showed up with
more than 10 visits, in 2014
that number was
— Jason Samuels

IT Manager,

National Council on Family Relations
Source
Chasing screen

sizes is clearly a

fool’s errand.
© Brad Frost
Designing

for screens

is hard.
© Brad Frost
And then there’s
everything else.
© Brad Frost
Your content can and will go
anywhere that’s connected
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
wearables smart tvs IoT assistants
Meaning users will need to
interact in different ways
Created by Vectors Market
from the Noun Project
touch Created by Vectors Market
from the Noun Project
mouse
Created by bezier master
from the Noun Project
T9
Created by Christopher Holm-Hansen
from the Noun Project
eye tracking
Created by Vectors Market
from the Noun Project
remote
Created by Setyo Ari Wibowo
from the Noun Project
pen
Created by Vectors Market
from the Noun Project
keyboard
Created by Vectors Market
from the Noun Project
audio
Created by Vectors Market
from the Noun Project
gamepad
Created by Vectors Market
from the Noun Project
printCreated by Adriano Emerick
from the Noun Project
braille
Over varied networks and

in changing conditions
Created by Vectors Market
from the Noun Project
hardline
Created by Vectors Market
from the Noun Project
wifi
Created by Vectors Market
from the Noun Project
mobile
Created by Vectors Market
from the Noun Project
homes
Created by Vectors Market
from the Noun Project
buildings
Created by Vectors Market
from the Noun Project
cars
Created by Vectors Market
buses Created by Vectors Market
from the Noun Project
trains
Created by Vectors Market
from the Noun Project
airplanes
And, ultimately, our users all
have different needs too.
Anyone notice I
haven’t even
mentioned

browsers?
;-)
© Brad Frost
So...?!
© Brad Frost
Reality check:
Nothing about our users’
experiences of the web

has ever been as
homogenous

as we imagine.
© Brad Frost
The challenges of

web design today

are the same as

they were yesterday.
© Brad Frost
The web can go anywhere
there’s even a temporary
network connection.
© Brad Frost
© Brad Frost
Photo	Credit:	romanboed
© Brad Frost
Photo	Credit:	Evgeni Zotov
© Brad Frost
Photo	Credit:	Climate Change, Agriculture and Food Security
© Brad Frost
© Brad Frost
Inclusive design creates
giant ripples.
© Brad Frost
Photo	Credit:	Dylan Passmore
wheelchairs strollers bicycles skateboards
one arm arm injury new parent
permanent situational
one arm arm injury new parent
permanent situational
26K
one arm arm injury new parent
permanent situational
26K 13M 8M+ +
21 Million People
So how can we make

our interfaces

more adaptive?
© Brad Frost
Let’s dissect

an example.
© Brad Frost
EXPLORING ADAPTIVE INTERFACES
Content Teasers
EXPLORING ADAPTIVE INTERFACES
Content Teasers
EXPLORING ADAPTIVE INTERFACES
Content Teasers
Superfluous & expensive
Nice to have
The essential nugget
EXPLORING ADAPTIVE INTERFACES
Content Teasers
ideal
minimum viable interface
EXPLORING ADAPTIVE INTERFACES
Content Teasers
ideal
minimum viable interface
EXPLORING ADAPTIVE INTERFACES
Content Teasers
ideal
minimum viable interface
EXPLORING ADAPTIVE INTERFACES
Content Teasers
ideal
minimum viable interface
Lazy load
EXPLORING ADAPTIVE INTERFACES
Content Teasers
ideal
minimum viable interface
Do we really need it?
Lazy load
EXPLORING ADAPTIVE INTERFACES
Content Teasers
new ideal
How do we plan

adaptive designs?
© Brad Frost
EXPLORING ADAPTIVE INTERFACES
Step by step
1. Focus on what matters.
51
The essential nugget
EXPLORING ADAPTIVE INTERFACES
Step by step
2. Write it out, then read it back.
53
How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
Other it’s embarrassing•
EXPLORING ADAPTIVE INTERFACES
Step by step
2. Write it out, then read it back.
54
Please describe the photo
It’s embarrassing
It’s a bad photo of me
It makes me sad
EXPLORING ADAPTIVE INTERFACES
Step by step
3. Look for semantics that support 1 & 2.
55
heading
a
paragraphimg time
EXPLORING ADAPTIVE INTERFACES
Step by step
3. Look for semantics that support 1 & 2.
56
heading (also .p-name)a (also .u-url)
paragraph

(also .p-summary)
.p-author

.h-card (person)
.h-entry (feed)
img (also .u-photo) time

(also .dt-published)
EXPLORING ADAPTIVE INTERFACES
Step by step
3. Look for semantics that support 1 & 2.
57
<script	type="application/ld+json">

{		
		"@context":	"http://schema.org",	
		"@type":	"NewsArticle",

		"headline":	"Martin	excited	about	Vols’	summer	progress",	
		"dateline":	"Chattanooga,	TN",	
		"image":	[	
				"https://www.example.com/image1.jpg",	
		],	
		"datePublished":	"2015-09-05",	
		"description":	"Some	Vols	are	working	out	in	Knoxville…",	
		"articleBody":	"THE	WHOLE	ARTICLE"	
}	
</script>
EXPLORING ADAPTIVE INTERFACES
Step by step
4. Think about how design can improve comprehension.
58
Visually the mostimportant text
Visually tied to the
headline & carries
some visual weight
distinct from thecontent & diminishedin importance
Less important &
distinct from content
EXPLORING ADAPTIVE INTERFACES
Step by step
5. Consider how your design choices impact the reading experience.
59
Can’t tell what theepisode is called
EXPLORING ADAPTIVE INTERFACES
Step by step
5. Consider how your design choices impact the reading experience.
60
Floated images crush the
text on small screens
Ouch
EXPLORING ADAPTIVE INTERFACES
6. Think about the many different ways folks might interact.
Step by step
61
Created by Vectors Market
from the Noun Project
touch Created by Vectors Market
from the Noun Project
mouse
Created by bezier master
from the Noun Project
T9
Created by Christopher Holm-Hansen
from the Noun Project
eye tracking Created by Vectors Market
from the Noun Project
remote
Created by Setyo Ari Wibowo
from the Noun Project
pen
Created by Vectors Market
from the Noun Project
keyboard
Created by Vectors Market
from the Noun Project
gamepadCreated by Vectors Market
from the Noun Project
printCreated by Adriano Emerick
from the Noun Projectbraille
Created by Vectors Market
from the Noun Project
audio
EXPLORING ADAPTIVE INTERFACES
6. Think about the many different ways folks might interact.
Step by step
62
touch Created by Vectors Market
from the Noun Project
mouse
Created by Christopher Holm-Hansen
from the Noun Project
eye tracking
Hover?
EXPLORING ADAPTIVE INTERFACES
6. Think about the many different ways folks might interact.
Step by step
63
Created by Vectors Market
from the Noun Project
touch Created by Vectors Market
from the Noun Project
mouse
Created by bezier master
from the Noun Project
T9
Created by Christopher Holm-Hansen
from the Noun Project
eye tracking Created by Vectors Market
from the Noun Project
remote
Created by Setyo Ari Wibowo
from the Noun Project
pen
Created by Vectors Market
from the Noun Project
keyboard
Created by Vectors Market
from the Noun Project
gamepad
Focus & target?
Created by Vectors Market
from the Noun Project
audio
EXPLORING ADAPTIVE INTERFACES
6. Think about the many different ways folks might interact.
Step by step
64
Created by Vectors Market
from the Noun Project
touch Created by Vectors Market
from the Noun Project
mouse
Created by Setyo Ari Wibowo
from the Noun Project
pen
Gestures?
EXPLORING ADAPTIVE INTERFACES
6. Think about the many different ways folks might interact.
Step by step
65
Created by Vectors Market
from the Noun Project
printCreated by Adriano Emerick
from the Noun Projectbraille
Text expansions?
Created by Vectors Market
from the Noun Project
audio
EXPLORING ADAPTIVE INTERFACES
7. Map the potential experiences.
Step by step
66
Path A
Experience 1Start
Path B
Experience 2
Notes
Decision point Change
EXPLORING ADAPTIVE INTERFACES
1. Focus on what matters.
2. Write it out, then read it back.
3. Look for semantics that support 1 & 2.
4. Think about how design can improve comprehension.
5. Consider how your design choices impact the reading experience.
6. Think about the many different ways folks might interact.
7. Map the potential experiences.
8. Iterate.
Step by step
68
Progressive
Enhancement
UserExperience
Browser Capabilities
BASIC ADVANCED
I like an escalator because
an escalator can never break,
it can only become stairs.
— Mitch Hedberg
Technological

restrictions
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
What matters
Let’s get adaptive.
© Brad Frost
EXPLORING ADAPTIVE INTERFACES
Content Teasers
EXPLORING ADAPTIVE INTERFACES
Content Teasers
Lazy load
EXPLORING ADAPTIVE INTERFACES
IxMap
JS?
No
No imageLoad
EXPLORING ADAPTIVE INTERFACES
IxMap
JS?
No
No imageLoad
EXPLORING ADAPTIVE INTERFACES
IxMap
JS?
No
No imageLoad
NoYes
Verify browser
width condition
EXPLORING ADAPTIVE INTERFACES
IxMap
JS?
No
No imageLoad
NoYes
Verify browser
width condition
EXPLORING ADAPTIVE INTERFACES
IxMap
JS?
No
No imageLoad
NoYes
Verify browser
width condition
Yes
Image
Adjust markup
Add custom CSS
EXPLORING ADAPTIVE INTERFACES
IxMap
JS?
No
No imageLoad
NoYes
Verify browser
width condition
Yes
Image
Adjust markup
Add custom CSS
EXPLORING ADAPTIVE INTERFACES
There is no image…
<div	class="entry-image"	
					data-image-src="/i/sample.jpg"></div>
87
EXPLORING ADAPTIVE INTERFACES
Until there is
<div	class="entry-image"	
					data-image-src="/i/sample.jpg"></div>
<div	class="entry-image"	
					data-image-src="/i/sample.jpg"	
					data-has-image="true">	
		<img	alt=""	src="/i/sample.jpg"/>	
</div>
88
EXPLORING ADAPTIVE INTERFACES
CSS at rest
[data-image-src]	{	
	 display:	none;	
}
89
EXPLORING ADAPTIVE INTERFACES
CSS at play
[data-image-src][data-image-loaded]	{	
	 display:	block;	
}
90
EXPLORING ADAPTIVE INTERFACES
JS Watcher
window.watchResize	=	function(callback)	
{	
	 var	resizing;	
	 function	done()	{	
	 	 clearTimeout(	resizing	);	
	 	 resizing	=	null;	
	 	 callback();	
	 }	
	 window.onresize	=	function(){	
	 	 if	(	resizing	)	{	
	 	 	 clearTimeout(	resizing	);	
	 	 	 resizing	=	null;	
	 	 }	
	 	 resizing	=	setTimeout(	done,	50	);	
	 };	
	 callback();	
};
91
EXPLORING ADAPTIVE INTERFACES
JS Watcher
var	browser_width	=	0;	
window.watchResize(function(){	
	 browser_width	=	 window.innerWidth	||	
	 	 	 	 	 	 document.body.offsetWidth;	
});
92
EXPLORING ADAPTIVE INTERFACES
JS Watcher
window.watchResize(function(){	
	 var	threshold	=	400,	
	 	 image	=	document.createElement('img'),	
	 	 paragraphs	=	document.getElementsByTagName('p'),	
	 	 i	=	paragraphs.length,	
	 	 p,	loaded,	src,	img;	
	 if	(	browser_width	>=	threshold	)	{	
	 	 image.setAttribute('alt','');	
	 	 while	(	i--	)	{	
	 	 	 p	=	paragraphs[i];	
	 	 	 src	=	p.getAttribute('data-image-src');	
	 	 	 loaded	=	p.getAttribute('data-image-loaded');	
	 	 	 if	(	src	!=	null	&&	loaded	==	null	)	{	
	 	 	 	 img	=	image.cloneNode(true);	
	 	 	 	 img.setAttribute('src',src);	
	 	 	 	 p.appendChild(	img	);	
	 	 	 	 p.setAttribute('data-image-loaded','');	
	 	 	 }	
	 	 }	
	 	 image	=	paragraphs	=	p	=	img	=	null;	
	 }	
});
EXPLORING ADAPTIVE INTERFACES
IxMap
JS?
No
No imageLoad
NoYes
Verify browser
width condition
Yes
Image
Adjust markup
Add custom CSS
LIVE
EXPLORING ADAPTIVE INTERFACES
Smart CSS
[data-image-src][data-image-loaded]	{	
	 display:	block;	
}
EXPLORING ADAPTIVE INTERFACES
Smart CSS
[data-image-src][data-image-loaded]	{	
	 display:	block;	
}
@media	only	screen	and	(min-width:400px)	{	
	 [data-img-src][data-image-loaded]	{	
	 	 display:	block;	
	 }	
}
Assuming that’s your threshold
EXPLORING ADAPTIVE INTERFACES
Content Teasers
EXPLORING ADAPTIVE INTERFACES
Content Teasers
EXPLORING ADAPTIVE INTERFACES
Content Teasers
EXPLORING ADAPTIVE INTERFACES
Content Teasers
EXPLORING ADAPTIVE INTERFACES
Content Teasers
EXPLORING ADAPTIVE INTERFACES
Tabbed Interface
EXPLORING ADAPTIVE INTERFACES
Traditional approach
<h1>Pumpkin	Pie</h1>	
<div	class="container">

		<ul	class="tabs">	
				<li><a	href="#">Overview</a></li>	
				<li><a	href="#">Ingredients</a></li>	
				<li><a	href="#">Directions</a></li>	
				<li><a	href="#">Nutrition</a></li>	
		</ul>	
		<div	class="section">	
				<h2>Overview</h2>	
				<img	src="pie.jpg"	alt="">	
				<p>Whether	you're	hosting	a	festive	party	or	a	casual

				get-together	with	friends,	our	Pumpkin	Pie	will	make

				entertaining	easy!</p>	
				<!--	...	-->	
		</div>	
		<!--	...	-->	
</div>
EXPLORING ADAPTIVE INTERFACES
Cleaner approach
<h1>Pumpkin	Pie</h1>	
<div	class="tabbed-interface">

		<h2>Overview</h2>	
		<img	src="pie.jpg"	alt=""	/>	
		<p>Whether	you're	hosting	a	festive	party	or	a	casual

		get-together	with	friends,	our	Pumpkin	Pie	will	make

		entertaining	easy!</p>	
		<!--	...	-->	
		<h2>Ingredients</h2>	
		<ul>	
				<li>1	(9<abbr	title="inch">in</abbr>)	unbaked	deep

								dish	pie	crust</li>	
				<li>½	cup	white	sugar</li>	
				<!--	...	-->	
		</ul>	
		<h2>Directions</h2>	
		<!--	...	-->	
</div>
EXPLORING ADAPTIVE INTERFACES
Cleaner approach
<h1>Pumpkin	Pie</h1>	
<div	class="tabbed-interface">

		<h2>Overview</h2>	
		<img	src="pie.jpg"	alt=""	/>	
		<p>Whether	you're	hosting	a	festive	party	or	a	casual

		get-together	with	friends,	our	Pumpkin	Pie	will	make

		entertaining	easy!</p>	
		<!--	...	-->	
		<h2>Ingredients</h2>	
		<ul>	
				<li>1	(9<abbr	title="inch">in</abbr>)	unbaked	deep

								dish	pie	crust</li>	
				<li>½	cup	white	sugar</li>	
				<!--	...	-->	
		</ul>	
		<h2>Directions</h2>	
		<!--	...	-->	
</div>
EXPLORING ADAPTIVE INTERFACES
No JS, basic CSS
EXPLORING ADAPTIVE INTERFACES
IxMap
JS?
No
LinearLoad
EXPLORING ADAPTIVE INTERFACES
IxMap
JS?
No
LinearLoad
EXPLORING ADAPTIVE INTERFACES
IxMap
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers (mouse & keyboard)
JS?
No
LinearLoad
EXPLORING ADAPTIVE INTERFACES
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers (mouse & keyboard)
JS?
No
LinearLoad
IxMap
EXPLORING ADAPTIVE INTERFACES
Linear HTML
<h1>Pumpkin	Pie</h1>	
<div	class="tabbed-interface">

		<h2>Overview</h2>	
		<img	src="pie.jpg"	alt=""	/>	
		<p>Whether	you're	hosting	a	festive	party	or	a	casual

		get-together	with	friends,	our	Pumpkin	Pie	will	make

		entertaining	easy!</p>	
		<!--	...	-->	
		<h2>Ingredients</h2>	
		<ul>	
				<li>1	(9<abbr	title="inch">in</abbr>)	unbaked	deep

								dish	pie	crust</li>	
				<li>½	cup	white	sugar</li>	
				<!--	...	-->	
		</ul>	
		<h2>Directions</h2>	
		<!--	...	-->	
</div>
EXPLORING ADAPTIVE INTERFACES
Tabbed
<h1>Pumpkin	Pie</h1>	
<div	class="tabbed-interface	TabInterface-enabled">

		<ul	class="tabs">	
				<li><a	href="#folder-1">Overview</a></li>	
				<li><a	href="#folder-2">Ingredients</a></li>	
				<li><a	href="#folder-3">Directions</a></li>	
				<li><a	href="#folder-4">Nutrition</a></li>	
		</ul>	
		<section	id="folder-1">	
				<h2>Overview</h2>	
				<img	src="pie.jpg"	alt="">	
				<p>Whether	you're	hosting	a	festive	party	or	a	casual

				get-together	with	friends,	our	Pumpkin	Pie	will	make

				entertaining	easy!</p>	
				<!--	...	-->	
		</section>	
		<!--	...	-->	
</div>
EXPLORING ADAPTIVE INTERFACES
Tabbed
<h1>Pumpkin	Pie</h1>	
<div	class="tabbed-interface	TabInterface-enabled">

		<ul	class="tabs">	
				<li><a	href="#folder-1">Overview</a></li>	
				<li><a	href="#folder-2">Ingredients</a></li>	
				<li><a	href="#folder-3">Directions</a></li>	
				<li><a	href="#folder-4">Nutrition</a></li>	
		</ul>	
		<section	id="folder-1">	
				<h2>Overview</h2>	
				<img	src="pie.jpg"	alt="">	
				<p>Whether	you're	hosting	a	festive	party	or	a	casual

				get-together	with	friends,	our	Pumpkin	Pie	will	make

				entertaining	easy!</p>	
				<!--	...	-->	
		</section>	
		<!--	...	-->	
</div>
EXPLORING ADAPTIVE INTERFACES
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers (mouse & keyboard)
IxMap
Yes
Verify space
for tabs
No
Accordion
Build accordion
JS?
No
LinearLoad
EXPLORING ADAPTIVE INTERFACES
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers (mouse & keyboard)
IxMap
Yes
Verify space
for tabs
No
Accordion
Build accordion
JS?
No
LinearLoad
LIVE
EXPLORING ADAPTIVE INTERFACES
JS?Load
IxMap
Yes
Tabs
Yes
Verify space
for tabs
LIVE
No
Linear
No
Accordion
Build accordion
<?>
Yes
Native
Insert details
& summary
Support details & summary?
EXPLORING ADAPTIVE INTERFACES
JS?Load
IxMap Yes
Verify space
for tabs
LIVE No
Accordion
Build accordion
<?>
Yes
Native
Support details & summary?
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers
!
Screenreader & ARIA?
No
Audio Cues
Yes
Add ARIA
EXPLORING ADAPTIVE INTERFACES
role="tablist"
116
Adding ARIA
EXPLORING ADAPTIVE INTERFACES
role="tab"
aria-selected="true"
aria-controls="folder-1"
Adding ARIA
EXPLORING ADAPTIVE INTERFACES
role="tab"
aria-selected="false"
aria-controls="folder-4"
Adding ARIA
EXPLORING ADAPTIVE INTERFACES
role="tabpanel"
aria-hidden="false"
aria-labelledby="folder-1-tab"
Adding ARIA
EXPLORING ADAPTIVE INTERFACES
Result!
That’s pretty
adaptive!
© Brad Frost
Together we can

make the web

a little better

every day.
© Brad Frost
Questions?
Tweet me at

@AaronGustafson
Thank you!
@AaronGustafson
aaron-gustafson.com
slideshare.net/AaronGustafson

More Related Content

Similar to Exploring Adaptive Interfaces [Generate 2017] (20)

PPTX
1810.mid1043.14
vizualizer
 
PPTX
A Web for Everyone: Accessibility as a design challenge
Whitney Quesenbery
 
PPT
Designing for Everybody Workshop
nightkitcheninteractive
 
KEY
Web Accessibility and Design
colinbdclark
 
KEY
Build Accessibly - Community Day 2012
Karen Mardahl
 
PDF
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Karen Mardahl
 
PPTX
Introduction hci
sawsan slii
 
PDF
HCI Basics
Zdeněk Lanc
 
PDF
The Resonant Interface Hci Foundations For Interaction Design 1st Edition Ste...
pinkemillim
 
PPTX
Responsive Design Talk @ Toronto Dev Derby March
themystic_ca
 
PDF
Beginners Guide to Accessibility
Tarik (Rick) Dzekman
 
PDF
Breaking the Box: Pushing the Boundaries of UX with Drupal
Acquia
 
PDF
Case Study 2 HCI
UzairAdnan
 
PDF
Intro to Adaptive Web Design [edUi 2013]
Aaron Gustafson
 
PPT
Introduction to HCI.ppt
africauniversity1
 
PPT
chapter one Introduction to HCI.ppt
anwarkade1
 
PPT
Introduction to HCI Human Computer Interaction
Safaet Hossain
 
PPT
Introduction to HCI.ppt
SathiyaVani7
 
PPTX
Being Human
Rahul Singh
 
PPTX
UX Design - Lecture # 2.pptx
Zaid227349
 
1810.mid1043.14
vizualizer
 
A Web for Everyone: Accessibility as a design challenge
Whitney Quesenbery
 
Designing for Everybody Workshop
nightkitcheninteractive
 
Web Accessibility and Design
colinbdclark
 
Build Accessibly - Community Day 2012
Karen Mardahl
 
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Karen Mardahl
 
Introduction hci
sawsan slii
 
HCI Basics
Zdeněk Lanc
 
The Resonant Interface Hci Foundations For Interaction Design 1st Edition Ste...
pinkemillim
 
Responsive Design Talk @ Toronto Dev Derby March
themystic_ca
 
Beginners Guide to Accessibility
Tarik (Rick) Dzekman
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Acquia
 
Case Study 2 HCI
UzairAdnan
 
Intro to Adaptive Web Design [edUi 2013]
Aaron Gustafson
 
Introduction to HCI.ppt
africauniversity1
 
chapter one Introduction to HCI.ppt
anwarkade1
 
Introduction to HCI Human Computer Interaction
Safaet Hossain
 
Introduction to HCI.ppt
SathiyaVani7
 
Being Human
Rahul Singh
 
UX Design - Lecture # 2.pptx
Zaid227349
 

More from Aaron Gustafson (20)

PDF
Delivering Critical Information and Services [JavaScript & Friends 2021]
Aaron Gustafson
 
PDF
Designing the Conversation [Beyond Tellerrand 2019]
Aaron Gustafson
 
PPTX
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Aaron Gustafson
 
PDF
Progressive Web Apps: Where Do I Begin?
Aaron Gustafson
 
PDF
Media in the Age of PWAs [ImageCon 2019]
Aaron Gustafson
 
PDF
Conversational Semantics for the Web [CascadiaJS 2018]
Aaron Gustafson
 
PDF
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Aaron Gustafson
 
PDF
PWA: Where Do I Begin? [Microsoft Ignite 2018]
Aaron Gustafson
 
PDF
Designing the Conversation [Concatenate 2018]
Aaron Gustafson
 
PDF
Designing the Conversation [Accessibility DC 2018]
Aaron Gustafson
 
PDF
Performance as User Experience [AEADC 2018]
Aaron Gustafson
 
PDF
The Web Should Just Work for Everyone
Aaron Gustafson
 
PDF
Performance as User Experience [AEA SEA 2018]
Aaron Gustafson
 
PDF
Performance as User Experience [An Event Apart Denver 2017]
Aaron Gustafson
 
PDF
Advanced Design Methods 1, Day 2
Aaron Gustafson
 
PDF
Designing the Conversation [Paris Web 2017]
Aaron Gustafson
 
PDF
Progressive Web Apps and the Windows Ecosystem [Build 2017]
Aaron Gustafson
 
PDF
Writing for Engagement [TechReady 22]
Aaron Gustafson
 
PDF
Designing the Conversation [SmashingConf 2016]
Aaron Gustafson
 
PDF
The Features of Highly Effective Forms [SmashingConf NYC 2016]
Aaron Gustafson
 
Delivering Critical Information and Services [JavaScript & Friends 2021]
Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Aaron Gustafson
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Aaron Gustafson
 
Progressive Web Apps: Where Do I Begin?
Aaron Gustafson
 
Media in the Age of PWAs [ImageCon 2019]
Aaron Gustafson
 
Conversational Semantics for the Web [CascadiaJS 2018]
Aaron Gustafson
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Aaron Gustafson
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Aaron Gustafson
 
The Web Should Just Work for Everyone
Aaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Aaron Gustafson
 
Progressive Web Apps and the Windows Ecosystem [Build 2017]
Aaron Gustafson
 
Writing for Engagement [TechReady 22]
Aaron Gustafson
 
Designing the Conversation [SmashingConf 2016]
Aaron Gustafson
 
The Features of Highly Effective Forms [SmashingConf NYC 2016]
Aaron Gustafson
 
Ad

Recently uploaded (20)

PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
PPTX
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
PDF
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
PDF
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
PDF
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
PPTX
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
PDF
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PPTX
Digital Circuits, important subject in CS
contactparinay1
 
PDF
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
PPTX
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
PDF
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
Digital Circuits, important subject in CS
contactparinay1
 
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
Ad

Exploring Adaptive Interfaces [Generate 2017]