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'

1. responsive design

2. on veRESPO
si N
sp gn SIVE
re sie
densiv
o r
sp ign e
DESI
G
re es N
d sp
d si on
esv
ige
n

3. ADAPTING TO
YOUR USERS
Presentation by:
Vince Baskerville | VP of Product TripLingo

4. VINCENT BASKERVILLE | VP of PRODUCT

5. IHAZTHIS
VINCENT BASKERVILLE | VP of PRODUCT

6. VINCENT BASKERVILLE | VP of PRODUCT

7. PEOPLE USING *MOBILE WEB*
WILL SURPASS DESKTOP
USAGE BY 2015
VINCENT BASKERVILLE | VP of PRODUCT

8. BUT YOU KNOW THIS
ALREADY RIGHT?
VINCENT BASKERVILLE | VP of PRODUCT

10. Q: HOW DO WE MAKE OUR
WEBSITE EXPERIENCE BETTER?
A: WE MAKE IT RESPONSIVE
VINCENT BASKERVILLE | VP of PRODUCT

11. • Media Queries
• Adaptive grids, images & media
• ???????
• Guaranteed ROI
VINCENT BASKERVILLE | VP of PRODUCT

12. VINCENT BASKERVILLE | VP of PRODUCT

13. VINCENT BASKERVILLE | VP of PRODUCT

14. VINCENT BASKERVILLE | VP of PRODUCT

15. “ 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. ”
VINCENT BASKERVILLE | VP of PRODUCT

16. RWD isn’t the absolute
answer to solve *all your
problems*
VINCENT BASKERVILLE | VP of PRODUCT

17. VINCENT BASKERVILLE | VP of PRODUCT

18. VINCENT BASKERVILLE | VP of PRODUCT

19. Throughout the design
process, our work should
be situated in the context
where it will be used
VINCENT BASKERVILLE | VP of PRODUCT

20. “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
VINCENT BASKERVILLE | VP of PRODUCT

21. VINCENT BASKERVILLE | VP of PRODUCT

22. 2 types of users:
Internal & External
VINCENT BASKERVILLE | VP of PRODUCT

23. interpre
tation
commun
& ication
VINCENT BASKERVILLE | VP of PRODUCT

24. “THE CHALLENGE IS GETTING
PEOPLE TO ADAPT, AGREE TO
YOUR IDEA ACTUALLY MAKING IT
THROUGH THE ORGANIZATION”
- SOMEONE
VINCENT BASKERVILLE | VP of PRODUCT

25. VINCENT BASKERVILLE | VP of PRODUCT

26. VINCENT BASKERVILLE | VP of PRODUCT

27. VINCENT BASKERVILLE | VP of PRODUCT

28. VINCENT BASKERVILLE | VP of PRODUCT

29. VINCENT BASKERVILLE | VP of PRODUCT

30. VINCENT BASKERVILLE | VP of PRODUCT

31. MOBILE CONTEXT
VINCENT BASKERVILLE | VP of PRODUCT

32. VINCENT BASKERVILLE | VP of PRODUCT

33. VINCENT BASKERVILLE | VP of PRODUCT

34. “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
VINCENT BASKERVILLE | VP of PRODUCT

35. VINCENT BASKERVILLE | VP of PRODUCT

36. TEST, YOU MUST!
VINCENT BASKERVILLE | VP of PRODUCT

37. A/B testing?
VINCENT BASKERVILLE | VP of PRODUCT

38. Multivariate?
VINCENT BASKERVILLE | VP of PRODUCT

39. VINCENT BASKERVILLE | VP of PRODUCT

40. How do you measure KPI’s?
VINCENT BASKERVILLE | VP of PRODUCT

41. VINCENT BASKERVILLE | VP of PRODUCT

42. Home Pag
e
VINCENT BASKERVILLE | VP of PRODUCT

43. VINCENT BASKERVILLE | VP of PRODUCT

44. Data wins arguments.
VINCENT BASKERVILLE | VP of PRODUCT

45. VINCENT BASKERVILLE | VP of PRODUCT

46. MEASURE & EVALUATE
AGAINST KPI’S
Heuristic Evaluations +
Quantitative UX Data +
VINCENT BASKERVILLE | VP of PRODUCT

47. ALIGN WITH STRATEGIC
EDU GOALS
Create Case Studies +
Survey key internal +
influencers
VINCENT BASKERVILLE | VP of PRODUCT

48. “Coding is long. Design is
short. Paper is cheap.”
VINCENT BASKERVILLE | VP of PRODUCT

49. RESOURCES
VINCENT BASKERVILLE | VP of PRODUCT

50. http://www.alistapart.com
VINCENT BASKERVILLE | VP of PRODUCT

51. http://www.lukew.com
VINCENT BASKERVILLE | VP of PRODUCT

52. http://mediaqueri.es
VINCENT BASKERVILLE | VP of PRODUCT

53. http://mustache.github.com
VINCENT BASKERVILLE | VP of PRODUCT

54. AU REVOIR
VINCE BASKERVILLE
@WHOISVINCE
VINCE@TRIPLINGO.COM
VINCENT BASKERVILLE | VP of PRODUCT