Responsive Web Design: May 2013 at Google

580 views

Published on

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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
580
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design: May 2013 at Google

  1. 1. Chuck Murphy & Scott Noonan, Boston InteractiveResponsive Web DesignMay 22, 2013 | Google New York Offices
  2. 2. Background§ Founded 1999§ 35 Full-time Professionals§ 300 Clients | 400+ WebsitesBoston Interactive
  3. 3. Expertise§ User Experience§ Metrics-Driven Design§ Content ManagementBoston Interactive
  4. 4. Differentiators§ Personalization§ Responsive Design§ Eye TrackingBoston Interactive
  5. 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 HealthBoston Interactive
  6. 6. Website Framework
  7. 7. Website Framework
  8. 8. Website Framework
  9. 9. Website Framework
  10. 10. Website Framework
  11. 11. Website Framework
  12. 12. Personalization
  13. 13. Personalization
  14. 14. Personalization
  15. 15. Personalization
  16. 16. Personalization
  17. 17. Personalization
  18. 18. Personalization
  19. 19. What is Responsive Design?
  20. 20. What is Responsive Design?§ Flexible Grid§ Use of ‘Media Queries”§ Ethan Marcotte publishes an article in“A List Apart” coining the termresponsive design (2010)
  21. 21. What is Responsive Design?Flexible Grid§Designing your site togrow or shrink with thesize of the viewport
  22. 22. §Determine the width ofthe viewport§Use this information torelayout certainportions of the pageWhat is Responsive Design?Media Queries
  23. 23. What is Responsive Design?We can now build a website that will respond to theviewport of the device on which it is being viewed
  24. 24. What is Responsive Design?
  25. 25. What is Responsive Design?
  26. 26. What is Responsive Design?
  27. 27. What is Responsive Design?
  28. 28. What is Responsive Design?
  29. 29. What is Responsive Design?
  30. 30. What is Responsive Design?
  31. 31. What is Responsive Design?
  32. 32. What is Responsive Design?
  33. 33. § Complete user experience for any user on any deviceResponsive Web Design enables a websiteto be consumed anywhere:What is Responsive Design?§ Single site architecture and content repository§ Future friendly
  34. 34. Tackling A Responsive Project
  35. 35. Tackling A Responsive Project1. Content Inventory
  36. 36. Tackling A Responsive Project1. Content Inventory
  37. 37. Tackling A Responsive Project1. Content Inventory
  38. 38. Tackling A Responsive Project1. Content Inventory
  39. 39. Tackling A Responsive Project1. Content Inventory
  40. 40. Tackling A Responsive Project2. User Experience/Design
  41. 41. 2. User Experience/DesignTackling A Responsive Project
  42. 42. 2. User Experience/DesignTackling A Responsive Project
  43. 43. 2. User Experience/DesignTackling A Responsive Project
  44. 44. 2. User Experience/DesignTackling A Responsive Project
  45. 45. 2. User Experience/DesignTackling A Responsive Project
  46. 46. Tackling A Responsive Project2. User Experience/Design
  47. 47. Tackling A Responsive Project3. Testing & Validation
  48. 48. Tackling A Responsive Project3. Testing & Validation
  49. 49. Tackling A Responsive Project3. Testing & Validation
  50. 50. Tackling A Responsive Project3. Testing & Validation
  51. 51. 3. Testing & ValidationTackling A Responsive Project
  52. 52. Tackling A Responsive Project3. Testing & Validation
  53. 53. Responsive Examples
  54. 54. Responsive ExamplesTop Menu:
  55. 55. Top Menu:Responsive Examples
  56. 56. Responsive ExamplesSide Navigation:
  57. 57. Responsive ExamplesGeneral Content:
  58. 58. Responsive ExamplesGeneral Content:
  59. 59. Responsive ExamplesGeneral Content:
  60. 60. Considerations
  61. 61. Considerations§ Bandwidth
  62. 62. Considerations§ Bandwidth§Tyopgraphy
  63. 63. Considerations§ Bandwidth§Tyopgraphy§Spacing
  64. 64. Considerations§ProgressiveEnhancement§ Bandwidth§Tyopgraphy§Spacing
  65. 65. §not just a technical decision§not simply resizing your websiteResponsive Is...§not a mobile strategy
  66. 66. §device agnostic§about the future - be ‘future friendly’Responsive Is...§part of your overall content delivery strategy
  67. 67. §about content§about the user experienceResponsive Is...

×