You’ve Only Got Two Eyeballs: Designing Products for the Responsive Web

You’ve Only Got Two Eyeballs:
Designing Products  
for the Responsive Web
@abridewell + @changeorder • #rwpd • HOW Design Live • ©2016 LinkedIn Corporation
Part one of a workshop by Drew Bridewell + David Sherwin

Hello. We work on Lynda.com at LinkedIn.
@abridewell + @changeorder • #rwpd • HOW Design Live
Our product helps people learn business, technology
and creative skills to achieve their personal, academic
and professional goals.

Mobile + tablet apps
iOS
Android
Windows 8
OSX
Windows
Apple TV
Roku
TV appsDesktop apps
Anytime, anywhere learning via our apps

Mobile + tablet web
Anytime, anywhere learning in the browser
Desktop web Large display +  
multi-screen use

11:30 AM–12:15 PM
Modular Design Approaches  
for Responsive Web Products
10:15 AM–11:00 AM
Prioritizing Features for
Responsive Web Products
This workshop is about planning the creation
of responsive web products

Part 1
Prioritizing Features for 

Responsive web design is…
when you resize your browser window
and the website does this cool thing
where it changes the layout

when you resize your browser window
and the website does this cool thing
where it changes the layout

Fluid grid, flexibile images, media queries
(a la Ethan Marcotte)

But it’s more than technical considerations
Fluid grid, flexibile images, media queries
(a la Ethan Marcotte)

Responsive Design Fundamentals • Responsive Web Design in the
Browser • Creating a Responsive Web Design • Advanced Techniques in
Responsive Web Design • Responsive SVG Images • Responsive Web
Design with Bootstrap and Dreamweaver • Creating a Responsive Design
with Edge Reflow • Responsive Images • Building Responsive Forms •
Design Aesthetics for Web Design • Building a Responsive Single-Page
Design • Creating a Responsive Web Experience • And many more…
Sure, we have 35+ courses on responsive web design

But our courses don’t always talk about  
the hard tradeoﬀs that happen when you  
plan and design web applications on  
select Internet-connected devices.

Our design process
Content Strategy
Project Goals
Feature
Prioritization
Information
Architecture
Iterative
Prototyping
& Testing
Engineering
& QA
A/B

Content Strategy
Project Goals
Feature
Prioritization
Information
Architecture
Iterative
Prototyping
& Testing
Engineering
& QA
A/B

Project goals
1. Increased access via mobile, tablet, and large-screen devices
2. Improved usability and accessibility for members
3. Easier updates for new features and experimentation
Overall, preserve engagement and learning eﬀicacy.

Designing for scale
Millions of learners and thousands of organizations around the world
7,000+ courses and 100,000’s of videos in five languages
New interactive learning features like quizzes and code practice

Lynda.com Course

Lynda.com Course Understand
Apply
Plan

Lynda.com Course
Navigate course
Read course overview
Add to playlist
See related courses
Watch video
Read transcript
Write notes
Download exercise files
Participate in quizzes
Practice in coding window
Understand
Apply
Plan

Navigate course
Read course overview
Add to playlist
See related courses
Watch video
Read transcript
Write notes
Download exercise files
Participate in quizzes
Practice in coding window
Prioritizing responsive web features across devices
Yes Yes
Yes Yes
Yes Yes
Yes Yes
Yes Yes
Yes Yes
Yes Yes
Yes Yes
Yes Yes
Yes Yes
XL Desktop Desktop Tablet Smartphone
Yes Yes
Yes Yes
Yes Yes
Yes Yes
Yes Yes
No No
No No
No No
Yes No
No No
Understand
Apply
Plan

Where will people expect to access content?
How frequently? With what session duration?
What information will people require?
Is most relevant in that context? In what chunks?
What functionality should people use?
Will be hard to use on smaller screens? Require an app?
Features
Content
Context
Questions to ask your team

Activity 1
Feature Prioritization Bingo

Find a partner
Take 2 minutes to get to know each other. You’re a team.

10-Second Film Festival
A client has approached you with an idea perfect for people with
short attention spans: An online competition for the best 10-second
videos created by independent filmmakers.
Your challenge:

Each feature costs a certain amount to implement
for each breakpoint. And your team only has $100.
In the next 15 minutes, work with your partner to  
debate and decide what features you want to build,  
and on what devices.

Designing Products for the Responsive Web: Feature Prioritization Bingo
Your team has $100 to spend on design and development for your 10-Second Film Festival website. With your partner, figure out how
you want to spend your money. What features do you want to support, and on what devices? Why did you make those choices?
©2016 Drew Bridewell & David Sherwin / LinkedIn / @abridewell + @changeorder
Upload videos
to enter festival
Watch video
entries on website
Search video
entries on website
Vote on video
entries on website
Share videos
from website
Comment on
video entries
Browse video
entries by category
Save favorite video
entries to view later
$
3
$
3
$
3
$
3
$
3
$
3
$
3
$
3
$
5
$
5
$
5
$
5
$
5
$
5
$
5
$
5
$
7
$
7
$
7
$
7
$
7
$
7
$
7
$
7
$
10
$
10
$
10
$
10
$
10
$
10
$
10
$
10
Total Cost Per Feature
Total Cost for App
$
$
$
$
$
$
$
$
$
Debate which features 
have the most value 
for your users.

Upload videos
to enter festival
Watch video
entries on website
Search video
entries on website
Vote on video
entries on website
Share videos
from website
Comment on
video entries
Browse video
entries by category
Save favorite video
$
3
$
3
$
3
$
3
$
3
$
3
$
3
$
3
$
5
$
5
$
5
$
5
$
5
$
5
$
5
$
5
$
7
$
7
$
7
$
7
$
7
$
7
$
7
$
7
$
10
$
10
$
10
$
10
$
10
$
10
$
10
$
10
Total Cost for App
$
$
$
$
$
$
$
$
$
for your users.
CONSTRAINT
Every feature you decide to
include for the app must support
the XL Desktop breakpoint.
CONSTRAINT
CONSTRAINT
CONSTRAINT
include must support the
XL Desktop breakpoint.

Upload videos
to enter festival
Watch video
entries on website
Search video
entries on website
Vote on video
entries on website
Share videos
from website
Comment on
video entries
Browse video
entries by category
Save favorite video
$
3
$
3
$
3
$
3
$
3
$
3
$
3
$
3
$
5
$
5
$
5
$
5
$
5
$
5
$
5
$
5
$
7
$
7
$
7
$
7
$
7
$
7
$
7
$
7
$
10
$
10
$
10
$
10
$
10
$
10
$
10
$
10
Total Cost for App
$
$
$
$
$
$
$
$
$
18
for your users.
CONSTRAINT
CONSTRAINT
CONSTRAINT
CONSTRAINT

Upload videos
to enter festival
Watch video
entries on website
Search video
entries on website
Vote on video
entries on website
Share videos
from website
Comment on
video entries
Browse video
entries by category
Save favorite video
$
3
$
3
$
3
$
3
$
3
$
3
$
3
$
3
$
5
$
5
$
5
$
5
$
5
$
5
$
5
$
5
$
7
$
7
$
7
$
7
$
7
$
7
$
7
$
7
$
10
$
10
$
10
$
10
$
10
$
10
$
10
$
10
Total Cost for App
$
$
$
$
$
$
$
$
$
18
8
Identify the tradeoﬀs.
for your users.
CONSTRAINT
CONSTRAINT
CONSTRAINT
CONSTRAINT

Share with another team
Show them your worksheet and the prioritization
decisions you made. Take only 2 minutes per team.

Great job, everyone!

See you back here at 11:30 sharp for Part 2!

Part two of a workshop by Drew Bridewell + David Sherwin

10:15 AM–11:00 AM
[second phase - 11:30-12:15]
11:30 AM–12:15 PM
Prioritizing Features for
Modular Design Approaches  
This workshop is about planning the creation
of responsive web products

Part 2
Modular Design Approaches 

Content Strategy
Project Goals
Feature
Prioritization
Information
Architecture
Iterative
Prototyping
& Testing
Engineering
& QA
A/B
Now that you’ve prioritized your features, it’s time to define your grid…

2:02 / 5:16
Contents Notebook
2:02 / 5:16
Contents Notebook

Contents Notebook
Create prototypes on the grid
2:02 / 5:16

Certain features will not live on all screens
2:02 / 5:16
Notes Code Practice
Transcript
Exercise Files

t
Y
X
X
X
Y
Y
Test horizontal and vertical breakpoints for your content

Course page modules and patterns on Lynda.com

Activity 2
“All at Once” Design

Get back with your team.
Snag your Feature Prioritization worksheet from Part 1.
If you just joined us, find a team to work with.

10-Second Film Festival
A client has approached you with an idea perfect for people
with short attention spans: An online competition for the
best 10-second videos created by independent filmmakers.

Using your feature prioritization from Activity 1,  
create a design for the home page of your  
10-Second Film Festival web site.
You have 20 minutes to create this design for  
browsers on desktop, tablet, and smartphone.

Check oﬀ what features you’ll be including  
on your home page for each device.
Designing Products for the Responsive Web
Based on the features you “bought” in the previous activity, sketch how those features
should appear on the home page for your 10-Second Film Festival website.
Upload videos to enter festival
Watch video entries on website
Search video entries on website
Vote on video entries on website
Share videos from website
Comment on video entries
Browse video entries by category
Save favorite video entries to view later
My paper prototype for Desktop will include:

Block oﬀ where you think features will go on  
ALL the devices before you start sketching.
(The video player aspect ratio is the primary constraint.)

browse
watch
browse
vote
upload
comment

Giveyourteamafistbump!

You’ve only got two eyeballs.

Keep people focused.

Thanks for joining us!
©2016 LinkedIn Corporation
Drew Bridewell
dbridewell@linkedin.com
@abridewell
David Sherwin
david@changeorderblog.com
@changeorder

You’ve Only Got Two Eyeballs: Designing Products for the Responsive Web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a You’ve Only Got Two Eyeballs: Designing Products for the Responsive Web

Similar a You’ve Only Got Two Eyeballs: Designing Products for the Responsive Web (20)

Más de David Sherwin

Más de David Sherwin (15)

Último

Último (20)

You’ve Only Got Two Eyeballs: Designing Products for the Responsive Web