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 appsiOS Android Windows 8
OSX Windows
Apple TV Roku
TV appsDesktop apps
Anytime, anywhere learning via our apps
@abridewell + @changeorder • #rwpd • HOW Design Live
Mobile + tablet web
Anytime, anywhere learning in the browser
@abridewell + @changeorder • #rwpd • HOW Design Live
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
@abridewell + @changeorder • #rwpd • HOW Design Live
This workshop is about planning the creation of responsive web products
Part 1
Prioritizing Features for Responsive Web Products
@abridewell + @changeorder • #rwpd • HOW Design Live
Responsive web design is…when you resize your browser window and the website does this cool thing where it changes the layout
@abridewell + @changeorder • #rwpd • HOW Design Live
@abridewell + @changeorder • #rwpd • HOW Design Live
Responsive web design is…when you resize your browser window and the website does this cool thing where it changes the layout
Responsive web design is…
@abridewell + @changeorder • #rwpd • HOW Design Live
Fluid grid, flexibile images, media queries (a la Ethan Marcotte)
Responsive web design is…
@abridewell + @changeorder • #rwpd • HOW Design Live
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
@abridewell + @changeorder • #rwpd • HOW Design Live
@abridewell + @changeorder • #rwpd • HOW Design Live
But our courses don’t always talk about the hard tradeoffs that happen when you plan and design web applications on select Internet-connected devices.
Course pagefrom 2014
Our design process
Content Strategy
Project Goals Feature Prioritization
Information Architecture
Iterative Prototyping & Testing
Engineering & QA A/B Testing
@abridewell + @changeorder • #rwpd • HOW Design Live
Content Strategy
Project Goals Feature Prioritization
Information Architecture
Iterative Prototyping & Testing
Engineering & QA A/B Testing
@abridewell + @changeorder • #rwpd • HOW Design Live
Project goals
@abridewell + @changeorder • #rwpd • HOW Design Live
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 efficacy.
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
@abridewell + @changeorder • #rwpd • HOW Design Live
Content Strategy
Project Goals Feature Prioritization
Information Architecture
Iterative Prototyping & Testing
Engineering & QA A/B Testing
@abridewell + @changeorder • #rwpd • HOW Design Live
Lynda.com Course
@abridewell + @changeorder • #rwpd • HOW Design Live
Lynda.com Course Understand
Apply
@abridewell + @changeorder • #rwpd • HOW Design Live
Plan
Lynda.com Course
Navigate courseRead course overviewAdd to playlistSee related courses
Watch videoRead transcriptWrite notes
Download exercise filesParticipate in quizzesPractice in coding window
@abridewell + @changeorder • #rwpd • HOW Design Live
Understand
Apply
Plan
Navigate courseRead course overviewAdd to playlistSee related courses
Watch videoRead transcriptWrite notes
Download exercise filesParticipate in quizzesPractice in coding window
Prioritizing responsive web features across devices
@abridewell + @changeorder • #rwpd • HOW Design Live
Yes YesYes YesYes YesYes Yes
Yes YesYes YesYes Yes
Yes YesYes YesYes Yes
XL Desktop Desktop Tablet Smartphone
Yes YesYes YesYes YesYes Yes
Yes YesNo NoNo No
No NoYes NoNo 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?
@abridewell + @changeorder • #rwpd • HOW Design Live
Features
Content
Context
Questions to ask your team
Activity 1
Feature Prioritization Bingo
@abridewell + @changeorder • #rwpd • HOW Design Live
Find a partnerTake 2 minutes to get to know each other. You’re a team.
@abridewell + @changeorder • #rwpd • HOW Design Live
10-Second Film FestivalA 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.
@abridewell + @changeorder • #rwpd • HOW Design Live
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.
@abridewell + @changeorder • #rwpd • HOW Design Live
Designing Products for the Responsive Web: Feature Prioritization BingoYour 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
XL Desktop Desktop Tablet Smartphone
$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 featureshave the most valuefor your users.
@abridewell + @changeorder • #rwpd • HOW Design Live
Designing Products for the Responsive Web: Feature Prioritization BingoYour 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
XL Desktop Desktop Tablet Smartphone
$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 featureshave the most valuefor your users.
@abridewell + @changeorder • #rwpd • HOW Design Live
Designing Products for the Responsive Web: Feature Prioritization BingoYour 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
XL Desktop Desktop Tablet Smartphone
$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 featureshave the most valuefor your users.
@abridewell + @changeorder • #rwpd • HOW Design Live
CONSTRAINT
Every feature you decide to include for the app must support the XL Desktop breakpoint.
CONSTRAINT
Every feature you decide to include for the app must support the XL Desktop breakpoint.
CONSTRAINT
Every feature you decide to include for the app must support the XL Desktop breakpoint.
CONSTRAINT
Every feature you decide to include must support the XL Desktop breakpoint.
Designing Products for the Responsive Web: Feature Prioritization BingoYour 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
XL Desktop Desktop Tablet Smartphone
$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
$
$
$
$
$
$
$
$
$
18
@abridewell + @changeorder • #rwpd • HOW Design Live
Debate which featureshave the most valuefor your users.
CONSTRAINT
Every feature you decide to include for the app must support the XL Desktop breakpoint.
CONSTRAINT
Every feature you decide to include for the app must support the XL Desktop breakpoint.
CONSTRAINT
Every feature you decide to include for the app must support the XL Desktop breakpoint.
CONSTRAINT
Every feature you decide to include must support the XL Desktop breakpoint.
Designing Products for the Responsive Web: Feature Prioritization BingoYour 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
XL Desktop Desktop Tablet Smartphone
$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
$
$
$
$
$
$
$
$
$
18
8
Identify the tradeoffs.
@abridewell + @changeorder • #rwpd • HOW Design Live
Debate which featureshave the most valuefor your users.
CONSTRAINT
Every feature you decide to include for the app must support the XL Desktop breakpoint.
CONSTRAINT
Every feature you decide to include for the app must support the XL Desktop breakpoint.
CONSTRAINT
Every feature you decide to include for the app must support the XL Desktop breakpoint.
CONSTRAINT
Every feature you decide to include must support the XL Desktop breakpoint.
Share with another team
@abridewell + @changeorder • #rwpd • HOW Design Live
Show them your worksheet and the prioritization decisions you made. Take only 2 minutes per team.
Great job, everyone!
@abridewell + @changeorder • #rwpd • HOW Design Live
You’ve Only Got Two Eyeballs:
Designing Products for the Responsive Web
@abridewell + @changeorder • #rwpd • HOW Design Live • ©2016 LinkedIn Corporation
See you back here at 11:30 sharp for Part 2!
You’ve Only Got Two Eyeballs:
Designing Products for the Responsive Web
@abridewell + @changeorder • #rwpd • HOW Design Live • ©2016 LinkedIn Corporation
Part two of a workshop by Drew Bridewell + David Sherwin
@abridewell + @changeorder • #rwpd • HOW Design Live
10:15 AM–11:00 AM
[second phase - 11:30-12:15]
11:30 AM–12:15 PM
Prioritizing Features for Responsive Web Products
Modular Design Approaches for Responsive Web Products
This workshop is about planning the creation of responsive web products
Part 2
Modular Design Approachesfor Responsive Web Products
@abridewell + @changeorder • #rwpd • HOW Design Live
Content Strategy
Project Goals Feature Prioritization
Information Architecture
Iterative Prototyping & Testing
Engineering & QA A/B Testing
@abridewell + @changeorder • #rwpd • HOW Design Live
Now that you’ve prioritized your features, it’s time to define your grid…
@abridewell + @changeorder • #rwpd • HOW Design Live
@abridewell + @changeorder • #rwpd • HOW Design Live
2:02 / 5:16
Contents Notebook
2:02 / 5:16
Contents Notebook
Contents Notebook
Create prototypes on the grid
@abridewell + @changeorder • #rwpd • HOW Design Live
2:02 / 5:16
Certain features will not live on all screens
@abridewell + @changeorder • #rwpd • HOW Design Live
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
@abridewell + @changeorder • #rwpd • HOW Design Live
Course page modules and patterns on Lynda.com
@abridewell + @changeorder • #rwpd • HOW Design Live
Activity 2
“All at Once” Design
@abridewell + @changeorder • #rwpd • HOW Design Live
Get back with your team.Snag your Feature Prioritization worksheet from Part 1.If you just joined us, find a team to work with.
@abridewell + @changeorder • #rwpd • HOW Design Live
10-Second Film FestivalA 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.
@abridewell + @changeorder • #rwpd • HOW Design Live
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.
@abridewell + @changeorder • #rwpd • HOW Design Live
Check off 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.
©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
My paper prototype for Desktop will include:
@abridewell + @changeorder • #rwpd • HOW Design Live
Block off where you think features will go on ALL the devices before you start sketching.
(The video player aspect ratio is the primary constraint.)
@abridewell + @changeorder • #rwpd • HOW Design Live
@abridewell + @changeorder • #rwpd • HOW Design Live
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.
©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
My paper prototype for Desktop will include:
browse
watch
browse
vote
upload
comment
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.
©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
My paper prototype for Desktop will include:
browse
watch
browse
vote
upload
comment
Give your team a fist bump!
@abridewell + @changeorder • #rwpd • HOW Design Live
Course pagefrom 2014
New design
@abridewell + @changeorder • #rwpd • HOW Design Live • ©2016 LinkedIn Corporation
You’ve only got two eyeballs.
@abridewell + @changeorder • #rwpd • HOW Design Live • ©2016 LinkedIn Corporation
Keep people focused.
Thanks for joining us!
©2016 LinkedIn Corporation
Drew Bridewell [email protected] @abridewell
David Sherwin [email protected] @changeorder