This video is a recording of the presentation given by Boston Interactive CEO, Chuck Murphy and CTO, Scott Noonan at Google's New York Offices. The presentation discusses the benefits of responsive web design specifically in comparison to mDot mobile solutions.

1. Chuck Murphy & Scott Noonan, Boston Interactive
Responsive Web Design
May 22, 2013 | Google New York Offices

2. Background
§ Founded 1999
§ 35 Full-time Professionals
§ 300 Clients | 400+ Websites
Boston Interactive

3. Expertise
§ User Experience
§ Metrics-Driven Design
§ Content Management
Boston Interactive

4. Differentiators
§ Personalization
§ Responsive Design
§ Eye Tracking
Boston Interactive

5. § Genzyme
§ Sonus Networks
§ Palomar Medical
§ Iron Mountain
§ Rockland Trust
§ TechTarget
§ Workscape
§ American Humane
§ Stratus
§ Appalachian Mountain Club
§ ASPCA
§ Endeca (Oracle)
§ IDG
§ Foley Hoag
§ Virgin Health
Boston Interactive

6. Website Framework

7. Website Framework

8. Website Framework

9. Website Framework

10. Website Framework

11. Website Framework

12. Personalization

13. Personalization

14. Personalization

15. Personalization

16. Personalization

17. Personalization

18. Personalization

19. What is Responsive Design?

20. What is Responsive Design?
§ Flexible Grid
§ Use of ‘Media Queries”
§ Ethan Marcotte publishes an article in
“A List Apart” coining the term
responsive design (2010)

21. What is Responsive Design?
Flexible Grid
§Designing your site to
grow or shrink with the
size of the viewport

22. §Determine the width of
the viewport
§Use this information to
relayout certain
portions of the page
What is Responsive Design?
Media Queries

23. What is Responsive Design?
We can now build a website that will respond to the
viewport of the device on which it is being viewed

24. What is Responsive Design?

25. What is Responsive Design?

26. What is Responsive Design?

27. What is Responsive Design?

28. What is Responsive Design?

29. What is Responsive Design?

30. What is Responsive Design?

31. What is Responsive Design?

32. What is Responsive Design?

33. § Complete user experience for any user on any device
Responsive Web Design enables a website
to be consumed anywhere:
What is Responsive Design?
§ Single site architecture and content repository
§ Future friendly

35. Tackling A Responsive Project

36. Tackling A Responsive Project
1. Content Inventory

37. Tackling A Responsive Project
1. Content Inventory

38. Tackling A Responsive Project
1. Content Inventory

39. Tackling A Responsive Project
1. Content Inventory

40. Tackling A Responsive Project
1. Content Inventory

41. Tackling A Responsive Project
2. User Experience/Design

42. 2. User Experience/Design
Tackling A Responsive Project

43. 2. User Experience/Design
Tackling A Responsive Project

44. 2. User Experience/Design
Tackling A Responsive Project

45. 2. User Experience/Design
Tackling A Responsive Project

46. 2. User Experience/Design
Tackling A Responsive Project

47. Tackling A Responsive Project
2. User Experience/Design

48. Tackling A Responsive Project
3. Testing & Validation

49. Tackling A Responsive Project
3. Testing & Validation

50. Tackling A Responsive Project
3. Testing & Validation

51. Tackling A Responsive Project
3. Testing & Validation

52. 3. Testing & Validation
Tackling A Responsive Project

53. Tackling A Responsive Project
3. Testing & Validation

54. Responsive Examples

55. Responsive Examples
Top Menu:

56. Top Menu:
Responsive Examples

57. Responsive Examples
Side Navigation:

58. Responsive Examples
General Content:

59. Responsive Examples
General Content:

60. Responsive Examples
General Content:

61. Considerations

62. Considerations
§ Bandwidth

63. Considerations
§ Bandwidth
§Tyopgraphy

64. Considerations
§ Bandwidth
§Tyopgraphy
§Spacing

65. Considerations
§Progressive
Enhancement
§ Bandwidth
§Tyopgraphy
§Spacing

66. §not just a technical decision
§not simply resizing your website
Responsive Is...
§not a mobile strategy

67. §device agnostic
§about the future - be ‘future friendly’
Responsive Is...
§part of your overall content delivery strategy

68. §about content
§about the user experience
Responsive Is...