Intro To Responsive Web Design

633 views
556 views

Published on

DevBridge Group presents an Intro to Responsive Web Design (RWD). Responsive Web Design addresses the growing need to cater online content to a variety of devices through a single website: from tablets, to smartphones, to desktops. The class will cover industry insights and trends, creative workflow for designing responsive websites, and a technology workshop explaining media queries and advantages of RWD.

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
633
On SlideShare
0
From Embeds
0
Number of Embeds
125
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Intro To Responsive Web Design

  1. 1. RESPONSIVE WEB DESIGNDevBridge Group Presents:DEVBRIDGE.COMKristin DuhaimeVlad Shapochnikovkristin@devbridge.comvlad.shapochnikov@devbridge.com
  2. 2. RESPONSIVE WEB DESIGNDevBridge Group Presents:DEVBRIDGE.COMKristin DuhaimeVlad Shapochnikovkristin@devbridge.comvlad.shapochnikov@devbridge.com
  3. 3. WHAT’S HAPPENING IN US MARKET?
  4. 4. Shi! in how we are accessing the internet.
  5. 5. THE MOBILE INVASION
  6. 6. Earth population Active mobile connections(phones, tablets, readers, etc.)7 BILLION 6 BILLION
  7. 7. Market Saturation37% of the US populationare smartphone owners.
  8. 8. In 201558% of the US populationwill be smartphone ownersin 2015.
  9. 9. Web Traffic23% of web traffic was frommobile devices
  10. 10. What about the tablet?0100,000200,000300,000400,000500,0002012 2013 2014 2017PC (Desk-Based and Notebook) Tablet
  11. 11. This mass invasion of Smartphonesand Tablets changes the way weview the web.
  12. 12. WHAT DOES THIS MEAN FOR OURFRIEND THE WEBSITE
  13. 13. Clumsy & Awkward
  14. 14. Old Context
  15. 15. New Contexts
  16. 16. 25% own tablet50% own smartphoneFrom laptop ownersDistribution
  17. 17. Smartphone vs. Tablet017.53552.570Books Movies TV Shows News Social Networking Downloaded MusicTablet Smartphone
  18. 18. THE SOLUTION
  19. 19. A website that is designed to livebeyond the device, context, ortechnology that they were originallyintended for.
  20. 20. Your Options
  21. 21. Your OptionsChoose Wisely
  22. 22. NATIVEAPPSHYBRIDAPPSWEBAPPSSEMINATIVEMOBILESITESRWDPlatform IndependenceDevice Hardware Integration
  23. 23. NATIVEAPPSHYBRIDAPPSWEBAPPSSEMINATIVEMOBILESITESRWDPer platform (iOS, Android, Windows RT)
  24. 24. NATIVEAPPSHYBRIDAPPSWEBAPPSSEMINATIVEMOBILESITESRWDOne solution for all platforms
  25. 25. Choose the solution that best suits theneeds of the user.
  26. 26. They all want a great experience.
  27. 27. WHY GO RESPONSIVE?
  28. 28. “This is Google’s recommendedconfiguration.“
  29. 29. Easy To ManageSingle Publishing Platform1
  30. 30. Future FriendlyAdapts to all web enabled devices2
  31. 31. User & Content FocusedDevice specific elements become secondary3
  32. 32. Great For CommerceAn increase in mobile transactions4
  33. 33. Increase in Page VisitsDecrease in bounce rates5
  34. 34. ESTIMATING AND BUDGETING FORRESPONSIVE WEB DESIGN
  35. 35. Value vs. CostTwo vs. Multiple Breakpoints
  36. 36. A dedicated mobile site will havemaintenance redundancy and,therefore, reoccurring costs.
  37. 37. Maintenance on a responsive sitedecreases over time.
  38. 38. How do you budget for aresponsive project?
  39. 39. Set aside time to educate both theclient and the team.1
  40. 40. Set aside time to educate both theclient and the team.1Built in time for process changes2
  41. 41. Set aside time to educate both theclient and the team.1Built in time for process changes2More Testing and QA Time3
  42. 42. ADAPTING TO ARESPONSIVE WORKFLOW
  43. 43. WHY WE CANNOT USE OUR USUALCREATIVE PROCESS
  44. 44. No Longer One Size Fits All
  45. 45. New Things To Consider
  46. 46. New Things To Consider
  47. 47. CHANGE IN WORKFLOW
  48. 48. Piece by Piece
  49. 49. CONTENTFIRSTWIREFRAMESSKETCH LAYOUTSOur Puzzle Pieces
  50. 50. CONTENT & MOBILE FIRST
  51. 51. “Content precedes design. Designin the absence of content is notdesign, it’s decoration.“JEFFREY ZELDMANHAPPY COG
  52. 52. Lorem Ipsum is not content.Having actual content will help you create moreaccurate designs.
  53. 53. Why Mobile First?
  54. 54. Core Message &Functionality1
  55. 55. Core Message &Functionality1Focused Designers2
  56. 56. Core Message &Functionality1Focused Designers2Early Detection ofUsability Issues3
  57. 57. Progressive Enhancement
  58. 58. Simplify rather than Reduce
  59. 59. “Mobile must never be adumbed-down, limitedexperience.“STEVEN HOOBERO’REILLY
  60. 60. SKETCHING & WIREFRAMES
  61. 61. UI Stencils
  62. 62. The key for mapping content in differentcontexts in which it will appear.Content Reference Wireframes
  63. 63. 1.1 Logo1.2 Navigation2.1 Info Panel2.2 Info Panel2.3 Info Panel2.4 Info Panel3.1 Code3.2 Savings Info4.1 Main Article4.2 Secondary Article4.3 Secondary Article5.0 Stories6.0 Subscribe7.0 Footer1.12.13.14.14.25777666554.34.14.24.34.14.24.33.23.1 3.2 3.13.22.2 2.3 2.4 2.12.22.32.42.12.22.32.41.2 1.1 1.2 1.1 1.2
  64. 64. PATTERNS & LAYOUTS
  65. 65. Mostly Fluid1 1 12 2 233333
  66. 66. Mostly Fluid
  67. 67. Mostly Fluid
  68. 68. Column Drop1 1 12 2 23433 44
  69. 69. Column Drop
  70. 70. Column Drop
  71. 71. Layout Shi"er1 1 12 22333444444
  72. 72. Layout Shifter
  73. 73. Layout Shifter
  74. 74. Tiny Tweaks1 1 12 2 2
  75. 75. Tiny Tweaks
  76. 76. Tiny Tweaks
  77. 77. TECHNICALINTRODUCTION
  78. 78. VIEWPORT
  79. 79. What is it?
  80. 80. The viewport is the part of the webpage thatthe user can currently see. The scroll bars movethe viewport to show other parts of the page.What is it?
  81. 81. How to use it and its properties?
  82. 82. Used to set Viewport width, height, andinitial scale on mobile devices.Lives in the <head></head> portion of the HTML
  83. 83. MEDIA QUERIES
  84. 84. What is a “Media Query”?
  85. 85. What is a “Media Query”?“Media Type” (screen, print, all, TV, etc.)“Media Condition” (width, height, device-width,device-height, orientation, aspect-ratio, etc.)
  86. 86. By combining a media type and acondition you can specify how the webcontent will appear on a particulardevice. (Phone, Tablet, TV, etc.)
  87. 87. video demo
  88. 88. Most media conditions accept optional“min-” or “max-” prefixes to express“greater or equal to” or “smaller orequal to” constrains.
  89. 89. RESPONSIVE MEDIA
  90. 90. What is it?
  91. 91. How do you make “responsive media”?
  92. 92. How do you make “responsive media”?
  93. 93. What about mymonthly 3GBData Plan?!Data plans are expensiveand no one likes having topay overage fees.
  94. 94. Small file sizes make everyone happy! :)
  95. 95. Serving up different size and qualityvideo is already easy.
  96. 96. What about images?
  97. 97. What about images?There is no single solution...yet
  98. 98. Proposed SolutionW3C Working Dra!: February 26th, 2013
  99. 99. HI-RES OR “RETINA” DISPLAYS
  100. 100. Device Pixel Densities
  101. 101. Proposed SolutionW3C Working Dra!: February 26th, 2013
  102. 102. That is the future.
  103. 103. That is the future.What about today?
  104. 104. Credit: github.com/scottjehl/picturefill
  105. 105. Testing & PreviewResponsivePX.comScreenQueri.esQuirkTools.comResonsinator.com
  106. 106. TEAM WORK & COMMUNICATION
  107. 107. THANKYOU!DEVBRIDGE.COMKristin DuhaimeVlad Shapochnikovkristin@devbridge.comvlad.shapochnikov@devbridge.com
  108. 108. THANKYOU!DEVBRIDGE.COMKristin DuhaimeVlad Shapochnikovkristin@devbridge.comvlad.shapochnikov@devbridge.com

×