Adapting to Reality [Starbucks Lunch & Learn]

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Adapting 
to Reality
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

Web design &
development 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 × ...

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 we...

3840 × 2160320 × 480
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
Until...

Don’t even get me
started on tablets
© Brad Frost

Credit: OpenSignalMaps

3840 × 2160320 × 480
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
Until...

1920 × 1080Created by Vectors Market
from the Noun Project
7680 × 4320
Created by Vectors Market
from the Noun Project
Des...

Chasing screen 
sizes is clearly a 
fool’s errand

In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2014...

In 2008, 27 screen  
resolutions showed up with
more than 10 visits, in 2014
that number was
— Jason Samuels 
IT Manager, ...

Chasing screen 
sizes is clearly a 
fool’s errand

Designing for
screens is hard

And then there’s
everything else

Your content can and will go
anywhere that’s connected
Created by Vectors Market
from the Noun Project
Created by Vectors ...

Meaning users will need to
interact in different ways
Created by Vectors Market
from the Noun Project
touch Created by Vec...

Over varied networks and 
in changing conditions
Created by Vectors Market
from the Noun Project
hardline
Created by Vecto...

And, ultimately, our users all
have different needs too

Anyone notice I
haven’t even
mentioned 
browsers?
;-)

So...‽

REALITY CHECK
Nothing about our users’
experiences of the web 
has ever been as
homogenous 
as we imagined.

Treat your 
ideal scenario 
as an edge case

The reality

The reality

U.S. Smartphone penetration #s
released in January 2018
Source
< $30k
67%
$30-50k
82%
$50-75k
83%
>$75k
93%
49.55% of the ...

U.S. Smartphone penetration #s
released in January 2018
Urban
83%
Suburban
78%
Rural
65%
Source

INTRO TO ADAPTIVE WEB DESIGN 
Not all smartphones are equal
Dash JR K
3.5" (480 × 320)
256 MB RAM
512MB Memory
2MP camera
...

In the 2017 survey, Smartphone users
making < $30k/yr experienced app errors 
52% of the time
Source

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 13M 8M+ +
21 Million People

So how can we make 
our interfaces work 
for everyone?

Approach your job 
with an open mind 
and empathy for 
your users.

We try stuff,
make mistakes,
& learn from them

Progressive
Enhancement

UserExperience
Browser Capabilities
BASIC ADVANCED

I like an escalator because
an escalator can never break,
it can only become stairs.
— Mitch Hedberg

Mono

Stereo

Surround 
Sound

5.1 Channel 
Surround

7.1 Channel 
Surround

16.2 Channel Surround

Sometimes it’s 
all you need

Kindle 3 = Free global data

Graceful
Degradation

Modern
Browsers
Older Browsers

Modern
Browsers
Older Browsers

I’m sorry, 
you need 
more channels

INTRO TO ADAPTIVE WEB DESIGN 
They’re actually related
Graceful Degradation Progressive
Enhancement

Technological 
restrictions

What matters

“Mobile first”

It’s all about process

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
1. Focus on what matters.
80
The essential nugget

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
2. Write it out, then read it back.
82
How does this photo make you feel?
Embar...

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
2. Write it out, then read it back.
83
Please describe the photo
It’s embarrass...

INTRO TO ADAPTIVE WEB DESIGN 
3. Look for semantics that support 1 & 2.
Step by step
84
heading
a
paragraph
a
img
a

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
3. Look for semantics that support 1 & 2.
85
heading (also .p-name)a (also .u-u...

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
4. Think about how design can improve comprehension.
86
visually the mostimport...

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
5. Consider how your design choices impact the reading experience.
87
Can’t tel...

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
5. Consider how your design choices impact the reading experience.
88
Floated i...

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
6. Think about the many different ways folks might interact.
89
Created by Vect...

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
6. Think about the many different ways folks might interact.
90
touch Created b...

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
6. Think about the many different ways folks might interact.
91
Created by Vect...

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
6. Think about the many different ways folks might interact.
92
Created by Vect...

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
6. Think about the many different ways folks might interact.
93
Created by Vect...

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
7. Map the potential experiences.
94
Path A
Experience 1Start
Path B
Experience...

INTRO TO ADAPTIVE WEB DESIGN 
Step by step
1. Focus on what matters.
2. Write it out, then read it back.
3. Look for seman...

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

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1056584 views
Storytelling For The Web: Integrate... by Chiara Aliotta 973080 views
Artificial Intelligence, Data and C... by OECD Directorate ... 908885 views
How to Leverage AI to Boost Employe... by SocialHRCamp 384853 views
2024 State of Marketing Report – by... by Marius Sescu 217959 views
Everything You Need To Know About C... by Expeed Software 235285 views

View on Slideshare

1 of 89 Ad

View on Slideshare

1 of 89 Ad