Designing Adaptive Components, Beyond Responsive Breakpoints

Stéphanie Walter 2020
Designing Adaptive Components
Beyond Responsive Breakpoints:

View Slide

UX & Product Designer
Mobile expert. Pixel & CSS Lover
stephaniewalter.design @WalterStephanie

View Slide

Beyond arbitrary mobile
screen sizes

View Slide

Fluid grids + Flexible images + Media Queries to adapt layout
Ethan Marcotte – Responsive Webdesign
10 years!!!

View Slide

“320px? 768px ? 1024px?
What breakpoints do you
recommend?

View Slide

Don’t define your breakpoints on
exact device widths that you are
looking to target.
Base them on your layout and content

View Slide

Primary
Breakpoints
Secondary
Breakpoints

View Slide

Filter toggle button
Content
Header
Foote
r
“Filter Sidebar” Content
Header
Header
Footer
From 1 to 2
columns
@media (min-width: 980px)

View Slide

The primary breakpoints
๏ Your grid and content choreography will
define Primary CSS media queries
breakpoints
๏ They trigger major changes in your
layout (like the content changing from 1
to 2 column)

View Slide

Most designers
provide a “mobile”
and a “desktop”
version of the page /
component It really is possible to make excellent
gluten free pizza at home in your own
oven with our different recipes and
techniques
(12 votes)
Gluten Free Pan Pizza
Save
GLUTEN FREE MAIN DISH
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
It really is possible to make excellent gluten
free pizza at home in your own oven with our
different recipes and techniques
(12 votes)
Save

View Slide

“Filter Sidebar”
Header
Header
Footer
It really is possible to make excellent
techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
Header
Footer
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save

View Slide

All good, right ?

View Slide

Header
Footer
It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
What about those
“in-betweens”?
979px “viewport”
Header
Footer
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save

View Slide

Secondary breakpoints
๏ Secondary breakpoints are used to
adapt the design at component level.
๏ It’s easier to decide those in the
browser when the content “breaks” in
the component.

View Slide

(12 votes)
techniques
Save
techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
(12 votes)
Save
Adapting the
component to 3
different
“viewport” sizes M
L
S

View Slide

Header
Footer
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
S

View Slide

Header
Footer
(12 votes)
techniques
Save
(12 votes)
techniques
Save
(12 votes)
techniques
Save
Header
Footer
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
S
M

View Slide

Header
Footer
techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
Header
Footer
(12 votes)
techniques
Save
(12 votes)
techniques
Save
(12 votes)
techniques
Save
Header
Footer
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
M
S
L

View Slide

“Filter Sidebar”
Header
Header
Footer
techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
Both primary and
secondary
breakpoints
@media (min-width: 980px) @media (min-width: 820px)

View Slide

Content model
and content priority

View Slide

Recipe teaser content model
Stéphanie Walter - 2019
techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person

View Slide

๏ Does this content belong to my hand
bag under my seat?
๏ Does it belong to the cabine luggage?
๏ Does it go in the checked luggage,
directly to the hold?
Setting Content
Priorities
Image from undraw.co

View Slide

How to decide?
Do your homework:
User Research!

View Slide

techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
* based on user research!!!
Under my seat!* To the hold!*
(12 votes)
Save

View Slide

Think wisely before not
showing some content for
specific sizes, do your
research!

View Slide

How about we use those for
different layouts as well?

View Slide

Towards Automagic* Ideal
Condition Layouts
* Not a typo

View Slide

The concept of “modular”
Instead of designing whole pages in 1 - 2
different sizes, today we design systems of
reusable modular components working
together in Design Systems.

View Slide

Could we re-use this elsewhere?
(12 votes)
Save
S

View Slide

(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
Used as teasers
on season
thematic
recipes pages

View Slide

(12 votes)
Save
(12 votes)
Save
Used in a
sidebar on a
blog post

View Slide

(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
Used as “Related
recipes” slider
item on a recipe
details page

View Slide

Smart
e-commerce
filters
component

View Slide

How do we build those robust
reusable components?

View Slide

Content model
1.

View Slide

“Operation Link Item”content model
1234- 4321
OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX)

View Slide

Are they variations or
other contents that could
use the same component?
2.

View Slide

One component, 3 content variations
1967 - 7024
12345
CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX)
08937-04
COUNTERPART NAME SOMETHING SA

View Slide

Identify where those
components can be
re-used
3.

View Slide

Re-using them across the interface
123
All
Search a content by keyword
View All Results (1000+)
12345
1234- 4321
12345-01
12345-01
1234- 4321
My Bookmarks
1234- 4321
12345
1234- 4321
OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE TEXT SO IT
NEEDS 2 LINES TO DISPLAY
12345
12345-01

View Slide

Re-using them across the interface
2
Hi Alexandre
More
My Portfolio
My Planning
My Dashboard
1234
Operation
Serapis
1234- 4321
OPERATION NAME HERE
12345
CONTRACT NAME
12345-01
COUNTERPART NAME SA
12345-01
COUNTERPART NAME SA
1234- 4321
OPERATION NAME HERE THAT IS TOO
LONG AND NEEDS 2 LINES
360px container

View Slide

1 component, 3 variations, 2 sizes, different uses
1967 - 7024
12345
08937-04
1234- 4321
OPERATION NAME HERE
12345
CONTRACT NAME
12345-01
COUNTERPART NAME SA

View Slide

Document it,
somewhere,
somehow

View Slide

From “ideal condition” in
design tools to the browser

View Slide

Intrinsic Web Design in “Everything You Know About Web Design Just Changed” by Jen Simmons

View Slide

Intrinsic Web Design
Instead of changing styles based on the size of a viewport (or
how big the screen of the device is), components automatically
lay themselves out based on their own ‘ideal’ conditions.”
Definition by Jay Frestone

View Slide

As a designer, my job is to
show my developers this
“ideal” conditions.
Then we discuss how it will adapt
in the browser.

View Slide

Look Ma, no
media
queries!
Demo by Adam Argyle

View Slide

Flexbox: 4 layouts for the price of 1
1 2 3
4

View Slide

Codepen Demo by Geoffrey Crofte

View Slide

Flexbox, Grid Layout and more to build responsive layouts without media queries

View Slide

techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
(12 votes)
techniques
Save
(12 votes)
Save
techniques
(12 votes)
Save
(12 votes)
techniques
Save
Save
(12 votes)

View Slide

Container queries?
Not yet…

View Slide

Faking
container
queries with
ResizeObserver
Container Queries by Philp Walton

View Slide

We need to stop obsessing over
pixel perfection and embrace the
fluid intrinsic nature of the web:
Design in tools,
Decide in the browser!

View Slide

Beyond “Happy Paths and
Perfect Content”

View Slide

The “happy perfect content”
Here you go, Okay thanks BYEEEEEEEE
techniques
(12 votes)
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person

View Slide

What happens if
the title needs
2 lines?
techniques
(12 votes)
My Grand’ Ma’s Gluten
Free Pan Pizza
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
techniques
(12 votes)
Free Pan Pizza
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person

View Slide

How does it behave in a gallery with different content length?
(12 votes)
Save
Free Pan Pizza
(12 votes)
Save
Free Pan Pizza
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
Free Pan Pizza
(12 votes)
Save
Free Pan Pizza
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save
(12 votes)
Save

View Slide

What happens
if some content
is missing?
It really is possible to make excellent gluten free pizza at home in your own oven with our
(12 votes)
My Grand’ Ma’s Gluten Free Pan Pizza
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person
techniques
(12 votes)
Free Pan Pizza
Save
Preparation time:
3 hours
Cooking time:
25 min
Serving:
4-6 persons
Cost:
3€/person

View Slide

What happens if
we don’t have
value for some
contents?
techniques
(0 votes)
Save
Preparation
3 hours
Cooking tim
25 min
Serving:
4-6 person
Cost:
3€/person
techniques
(No Rating available)
Save
Preparatio
3 hours
Cooking ti
25 min
Serving:
4-6 perso
Cost:
3€/person
techniques
Preparation t
3 hours
Cooking time
25 min
Serving:
4-6 persons

View Slide

Content tips
๏ Don’t use Lorem ipsum. If you use “fake content”,
make sure the structure is close to the real one.
๏ If you are a designer: ask the devs for the limits
of those fields in the database, ask for min, max
and average content length.
๏ If you are a developer: if something is missing,
ask the designer how it should behave.

View Slide

Email adress
stephaniemydomain.com
Email adress
Your email is missing a @
|
Email adress
[email protected]
Email adress
Email adress
[email protected]
Email adress
[email protected]
Email adress
Email veriﬁed
[email protected]
Email adress
This email is already used
[email protected]
Email adress
Veriﬁcation...
[email protected]
Email adress
Empty
Default Default
Error
Hover Hover
Warning
Focus/Active Focus/Active
Success
Information
Filled Validation
[email protected]
Email adress
Placeholder
Email adress
Placeholder Disabled
Don’t forget
interactive
states

View Slide

My division
Label
Card title
There is a technical problem with the content of this tile. If the problem persists, please contact technical
support team by email ([email protected]) or phone ( 0000000000)
Card title
There are no [Elements Title] to display.
My division
Label
Card title
Loading
No Data to Load
Data Population Problem / Error
Card title
1234- 4321
12345
1234- 4321
OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE TEXT SO
IT NEEDS 2 LINES TO DISPLAY
12345
12345-01
Data Population Data Successfully Loaded
What about
data
population?

View Slide

Card title
1234- 4321
12345
1234- 4321
12345
12345-01
Card title
1234- 4321
Card title
1-5 of 15
5
Row per tile
1234- 4321
12345
1234- 4321
12345
12345-01
Card title
1234- 4321
12345
1234- 4321
12345
What happens
for 5 items + ?
Pagination?
Scroll?

View Slide

I don’t need to “design” all of
them, just “decide” what will
happen and communicate
this to / with the dev team.

View Slide

Thinking beyond the “happy path”
๏ Know where the data/content comes from
(ask devs).
๏ Investigate the amount of data that
might get displayed.
๏ Investigate what might go wrong with
this data.

View Slide

Mapping the steps to think beyond the “happy path”
123
All
Search a content by keyword
12345
1234- 4321
12345-01
12345-01
1234- 4321

View Slide

Adaptive Systems towards
User’s Context

View Slide

Vehicle drop off details
Close
100%
9 41 AM
XXX
Follow the steps to drop off your vehicle
Get the rental car keys and drop your vehicle keys in
a safe. Further instructions will be available.
5 Pickup rental & Drop keys
Open gate
Use the code to open the parking gate
Show gate code
Enter the parking space and park your vehicle in an
available spot
Vehicle is parked
2 Park vehicle
You asked for a category 1 rental. Your car is ready
for pick-up, we just need you to sign a few
documents.
3 Sign documents
Fill in rental car damage report. Further instructions
will be available.
4 Rental damage report
Close
100%
9 41 AM
XXX
Open gate
Gate was opened
Vehicle was parked
Park vehicle
You asked for a category 1 rental. Your car is ready
for pick-up, we just need you to sign a few
documents.
Sign the documents
3 Sign documents
Fill in rental car damage report. Further instructions
will be available.
Close
100%
9 41 AM
XXX
Open gate
Gate was opened
Vehicle was parked
Park vehicle
ID card and Driving Licence uploaded and confirmed,
rental car contract and general rental conditions
signed.
Sign documents
Please go around the vehicle and fill in the rental car
damage report.
Start rental damage report
Tesla
Model 3
Close
100%
9 41 AM
XXX
Pickup rental & Drop keys
Rental car picked up and keys were droped in the
safe.
Get safe information
5
Open gate
Gate was opened
Vehicle was parked
Park vehicle
Rental damage report was done and signed
Rental damage report
signed.
Sign documents
Close
100%
9 41 AM
XXX
Pickup rental & Drop keys
Rental car picked up and keys were droped in the
safe.
Show gate code
Open gate
Gate was opened
Vehicle was parked
Park vehicle
Rental damage report was done and signed
Rental damage report
signed.
Sign documents
I finished the drop off
Adapting to
different steps
in a process

View Slide

Using device
sensors to
adapt to user
environment

View Slide

WAW
Warsaw
LUX
Luxembourg
Passenger Seat
Terminal Gate
Boarding
Date
Class
Stéphanie Walter 13D
- -
12:55
10:55 XZ- 9019
10:30
28/06/2020
Eco
J - 2 H - 1
Adapting to user
needs and
expectations
across the journey
WAW
Warsaw
12:55
LUX
Luxembourg
10:55 XZ- 9019
Date: 28/06/2020
Passenger
Seat
Terminal Gate
Boarding
13D
D A12
10:30
Class
Stéphanie Walter Eco
XZ- 9019
WAW
LUX
28/06/2020
Gate Terminal
Boarding
A12 A12
Seat
13D
10:30

View Slide

This last part is more
“experimental” and I would be
careful with it and heavily test it
because it might go against the
“predictability of the interface”.
So be careful.

View Slide

Allow users to
manage adaptive
features

View Slide

AGAIN, you need to deeply
understand your users needs
and behaviour to build those
kind of adaptive experiences:
User Research!!!

View Slide

Understand User
Behaviour and
Journeys
Phases
PHASE 1 PHASE 2 PHASE 3
Touchpoints & channels
Emotions and pain points
Actions / Tasks
Opportunities for features and improvements
User, goal, scope
https://inpx.it/ujmap

View Slide

Predict user
behaviour and
needs with machine
learning, big data
Epidemiology
Demography

View Slide

To sum it up…

View Slide

๏ Think beyond screen size
๏ Build re-usable components that can lay
themselves out based on their own
“ideal” conditions
๏ Design beyond happy path/content
๏ Conduct user research and use content
model and information architecture to
take design decisions
๏ It’s a collaborative process with your
development team!

View Slide

UX & Product Designer
Mobile expert. Pixel & CSS Lover
stephaniewalter.design @WalterStephanie

View Slide

Designing Adaptive Components, Beyond Responsive Breakpoints

Designing Adaptive Components, Beyond Responsive Breakpoints

Stéphanie Walter

More Decks by Stéphanie Walter

Other Decks in Design

Featured

Transcript