adapting to your users

54
responsive design

Upload: vince-baskerville

Post on 22-Apr-2015

849 views

Category:

Technology


1 download

DESCRIPTION

This was presented at the Penn State Web 2012 Conference.With the flood of consumers using various media devices, web designers & developers now have to try and create products that will retain the same aesthetic look & feel on multiple platforms. With the screen real-estate ranging from a 27″ desktop monitor, 13″ laptop monitor set at a 800×600 video resolution, tablet devices like the iPad, and a plethora of mobile phones with a wide variety of sizes. However, by taking advantage of some of the new syntax, creatives can create a dynamic website that can alter a pages’ visual layout while still maintaining control of the overall user experience. This presentation will help explain the importance of why it is necessary to plan ahead to build an adaptive website versus just 'getting it done'

TRANSCRIPT

Page 1: Adapting to Your Users

responsive design

Page 2: Adapting to Your Users

responsivedesign

r!"p#$"%v!

&!"%'$respon

sivedesign�������

�����

RESPONSIVEDESIGN

Page 3: Adapting to Your Users

ADAPTING TO YOUR USERSPresentation by: Vince Baskerville | VP of Product TripLingo

Page 4: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 5: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

IHAZTHIS

Page 6: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 7: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

PEOPLE USING *MOBILE WEB* WILL SURPASS DESKTOP USAGE BY 2015

Page 8: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

BUT YOU KNOW THIS ALREADY RIGHT?

Page 9: Adapting to Your Users
Page 10: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Q: HOW DO WE MAKE OUR WEBSITE EXPERIENCE BETTER?

A: WE MAKE IT RESPONSIVE

Page 11: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

•Media Queries

•Adaptive grids, images & media

•???????

•Guaranteed ROI

Page 12: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 13: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 14: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 15: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

“ When you start looking at a problem and it seems really simple with all these simple solutions, you don’t really understand the complexity of the problem. And your solutions are way too oversimplified, and they don’t work. ”

Page 16: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

RWD isn’t the absolute answer to solve *all your

problems*

Page 17: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 18: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 19: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Throughout the design process, our work should be situated in the context

where it will be used

Page 20: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

“THE PURPOSE BEHIND ‘RESPONSIVE DESIGN’—THE

CONCEPT OF WHAT IT STRIVES TO ACHIEVE—SHOULD BE SEPARATED FROM THE SPECIfiC TECHNIQUES

USED TO ACHIEVE IT.”

- JEFFREY ZELDMAN

Page 21: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 22: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

2 types of users:

Internal & External

Page 23: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

&'&(()"!'%#!&"

!"#$rpr$#%#!&"

Page 24: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

“THE CHALLENGE IS GETTING PEOPLE TO ADAPT, AGREE TO

YOUR IDEA ACTUALLY MAKING IT THROUGH THE ORGANIZATION”

- SOMEONE

Page 25: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 26: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 27: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 28: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 29: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 30: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 31: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

MOBILE CONTEXT

Page 32: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 33: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 34: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

“THE CONSTRAINTS IN MOBILE DEVICES FORCE US TO FOCUS ON

WHAT REALLY MATTERS EMPHASIZE THE MOST VALUABLE PARTS [..] NOT JUST THE PARTS OF OUR OffERING

WE THINK ‘MAKE SENSE.”

- LUKE WROBLEWSKI

Page 35: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 36: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

TEST, YOU MUST!

Page 37: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

A/B testing?

Page 38: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Multivariate?

Page 39: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 40: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

How do you measure KPI’s?

Page 41: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 42: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Home Page

Page 43: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 44: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Data wins arguments.

Page 45: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Page 46: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

Heuristic Evaluations +Quantitative UX Data +

MEASURE & EVALUATE AGAINST KPI’S

Page 47: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

ALIGN WITH STRATEGIC EDU GOALS

Create Case Studies +Survey key internal +

influencers

Page 48: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

“Coding is long. Design is short. Paper is cheap.”

Page 49: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

RESOURCES

Page 52: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

http://mediaqueri.es

Page 53: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

http://mustache.github.com

Page 54: Adapting to Your Users

VINCENT BASKERVILLE | VP of PRODUCT

AU REVOIRVINCE BASKERVILLE

@[email protected]