you’ve only got two eyeballs: designing products for the responsive web

You’ve Only Got Two Eyeballs:

Designing Products for the Responsive Web

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

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

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…

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

Responsive web design is…

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

Content Strategy

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

Content Strategy

Lynda.com Course

Lynda.com Course Understand

Lynda.com Course

Navigate courseRead course overviewAdd to playlistSee related courses

Watch videoRead transcriptWrite notes

Download exercise filesParticipate in quizzesPractice in coding window

Understand

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

Yes YesYes 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

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 partnerTake 2 minutes to get to know each other. You’re a team.

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.

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 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?

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

Total Cost Per Feature

Total Cost for App

Debate which featureshave the most valuefor your users.

Total Cost for App

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.

Total Cost for App

CONSTRAINT

Total Cost for App

Identify the tradeoffs.

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

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

Content Strategy

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

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

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

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

My paper prototype for Desktop will include:

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

browse

upload

comment

browse

upload

comment

Give your team a fist bump!

Course pagefrom 2014

New design

You’ve only got two eyeballs.

Keep people focused.

Thanks for joining us!

Drew Bridewell dbridewell@linkedin.com @abridewell

David Sherwin david@changeorderblog.com @changeorder

you’ve only got two eyeballs: designing products for the responsive web

Design

you’ve got an entire continent waiting for you. places...

dylan bardoe · dylan bardoe plastic eyeballs 4 august - 29...

data driven marketing - egos & eyeballs dont pay the bills

how brands can leverage their digital eyeballs to embrace...

content authoring for responsive design - madcap...

eyeballs, north dakota, and other adventures of a

e.1 eyeballs 3d: videos of patients, models, dogs

engaging eyeballs

happy eyeballs for the dns - blabs.apnic.net · 2015. 9....

eproc.punjab.gov.pk · 20 service manual with soft copy....

given enough eyeballs, all bugs are shallow? 1 introduction

great eyeballs in alkmaar

grows &...

100 skulls, bones, skeletons & eyeballs photoshop brushes...

happy eyeballs: success with dual-stack hosts...happy...

happy eyeballs for the dns geoff huston, george michaelson...

you've got their eyeballs, now get their earholes: why...

i was up to my eyeballs in the delicious & demanding

monster slime monster eyeballs monster tongues monster

how to get more eyeballs on slideshare