Responsive Web Design - Introduction & Workflow Overview

7,737
-1

Published on

Responsive Design's is a way of making a single website that works well on mobile, tablet, and desktop browsers. Back in 2010 Ethan Marcotte, first coined the term "responsive design" and described it as having 3 components:

Flexible Images
Fluid Grids
CSS Media Queries

Well it seems Ethan let quite a few cats of out bag with this one, and we've been trying to herd those cats ever since.

What started as exclusively a front-end web design technique has expanded to include a whole new range of both front-end and server-side programming techniques. The real challenge came when we also suddenly discovered that tried and true practices for project management, and creative concept development all started to fall apart. It’s not practical to create photoshop mockups of ever page in a site at every device size - There’s simply too many variables to account for in graphic design software.

Responsive Design requires a new process for creating websites, and new ways of interacting with teams and clients.

This presentation will outline a birds-eye-view of Responsive Techniques, Strategies, Tools, and Gotchas of RWD. It will focus on some of the new workflow techniques needed and cover some suggestions for where to go to learn more.

Slide Summary

1-25: History of Responsive Design
26-50: Coding Basics (Developer Focused)
51-57: Progressive Enhancement
58-70: Mobile First
71-93: Responsive Workflows
96-99: Selling Responsive Design

Published in: Technology
1 Comment
11 Likes
Statistics
Notes
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company.Responsive Web Design
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,737
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

Responsive Web Design - Introduction & Workflow Overview

  1. 1. FOSTER INTERACTIVE Web Development + Design Discovery Design Production LaunchRESPONSIVEDESIGN.CA @finteractive (Drupal / Personal)Questions? Post to the linkedIn Group @responsivDesign (RWD Tips)http://linkedin.responsivedesign.ca
  2. 2. I “borrowed” this whole sequence from Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?1506
  3. 3. 371 K 378KBabies born per day iPhones sold per day
  4. 4. 378K iPhones sold per day 371 KBabies born per day
  5. 5. 378K iPhones sold per day 562K iOS devices 371 KBabies born per day
  6. 6. 378K iPhones sold per day 562K iOS devices 700K Android devices activated per day 371 KBabies born per day
  7. 7. 378K iPhones sold per day 562K iOS devices 700K Android devices activated per day 371 K 200K Nokia smartphonesBabies born per day
  8. 8. 378K iPhones sold per day 562K iOS devices 700K Android devices activated per day 371 K 200K Nokia smartphonesBabies born per day 143k Blackberry devices
  9. 9. 1,983,000! Purchases / Activations of mobile Devices 371 KBabies born per day
  10. 10. Sales on PaypalBlack Friday vs. 2010 IDC Predictions
  11. 11. The Challenge / OpportunityImage Credit: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  12. 12. Existing Mobile Solutions Make an App!
  13. 13. Existing Mobile Solutions mobile website “m.website.com” “website.mobi”
  14. 14. 2010 (SPRING)
  15. 15. Ethan Marcotte’s Lab - (Artist’s impression)Let there be...Responsive Design
  16. 16. http://www.alistapart.com/articles/responsive-web-design/
  17. 17. 2011 (SEPTEMBER)
  18. 18. Bostonglobe.com
  19. 19. barakobama.com
  20. 20. barakobama.com (redo)
  21. 21. greygoose.com
  22. 22. microsoft.com
  23. 23. Before StartingResponsive Design
  24. 24. USE(and HTML5shiv) http://www.flickr.com/photos/22290288@N03/
  25. 25. Explore html5boilerplate.com
  26. 26. HAVE http://sass-lang.com/
  27. 27. FireBug +FireSass
  28. 28. Navigate with http://compass-style.org
  29. 29. Don’t Settle for
  30. 30. ResponsiveDesign Basics
  31. 31. Viewport Meta Tag
  32. 32. BADUX
  33. 33. #1 - Fluid Images#2 - Flexible Grids#3 - CSS3 Media Queries
  34. 34. #1 - Fluid Images
  35. 35. #2 - Flexible Grids
  36. 36. Messy Grids use HTML markuphttp://foundation.zurb.com/docs/grid.php
  37. 37. Messy Grids use HTML markup5 Classes! What’s Up with That?
  38. 38. Good Grids put style in the CSS http://susy.oddbird.net/
  39. 39. #3 - CSS3 Media Queries
  40. 40. Media Query Basics - Breakpoint in css
  41. 41. USE EMs for Breakpoints(They Scale with zooming)
  42. 42. Breakpoint Mixin For Compasshttps://github.com/canarymason/breakpoint
  43. 43. Responsive Web Designhttp://www.abookapart.com/products/ responsive-web-design
  44. 44. Progressive Enhancement (aka Adaptive Design)
  45. 45. Example: Menu Big Screen Small Screen
  46. 46. Example: Menu Big Screen Small Screen
  47. 47. Example: Touch
  48. 48. Example: Location
  49. 49. http://modernizr.com/
  50. 50. http://filamentgroup.com/dwpe/http://easy-readers.net/books/adaptive-web-design/
  51. 51. Mobile First (Content First)
  52. 52. Mobile First - Design Strategyhttp://www.abookapart.com/products/mobile-first
  53. 53. Streamlined Functions Mobile HAS to be Task BasedSimple to be USABLE Direct Messaging
  54. 54. NO! We Must fit“Message From The Board” on the mobile Homepage!
  55. 55. Who Benefits? - EveryoneImage Credit: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  56. 56. Mobile First (Website Structure) DEFAULT STYLES
  57. 57. @media (min-width: 25em)DEFAULT MEDIUM-ISH STYLES STYLES
  58. 58. @media (min-width: 50em) LARGE STYLES
  59. 59. Breakpoint Mixin For Compasshttps://github.com/canarymason/breakpoint
  60. 60. (Generally) Put Media Queries in CSS not the HTML Header
  61. 61. Same as always custom styles sheets (we tend to go fixed width)
  62. 62. Responsive Design Workflow
  63. 63. Conventional “Waterfall” Workflow Discovery Visual Design Coding Launch
  64. 64. Device Breakpoints
  65. 65. Desktop
  66. 66. Tablets
  67. 67. that just ONE page
  68. 68. 5 Breakpoints x 5 Layouts(Home, Blog List, Article, Case Study, Resources)
  69. 69. 5 Breakpoints x 5 Layouts(Home, Blog List, Article, Case Study, Resources) = 25 Files!
  70. 70. 5 Breakpoints x 5 Layouts (Home, Blog List, Article, Case Study, Resources)= Crazy Maintenance
  71. 71. Style Tiles - Design Systemshttp://iallenkelhet.no/2012/05/24/5-lessons-learned-from-a-mobile-first-responsive-design-process/
  72. 72. DiscoveryVisual Design Coding Launch
  73. 73. Natural Breakpoints
  74. 74. Design the Extremes
  75. 75. Prototype HTML Code Mobile First
  76. 76. Stretch Until Ugly
  77. 77. (Go Back a bit) Breakpoint!
  78. 78. Repeat until you’re at your largest size
  79. 79. Get Team’sFeedback on real devices
  80. 80. Adobe Edge Inspect (formerly Adobe Shadow)
  81. 81. 1-2 templates & repeat design / code cycle ReviewVisual Design Coding Launch
  82. 82. I Wrote a book review on responsivedesign.cahttp://www.implementingresponsivedesign.com/
  83. 83. FREE CHAPTER ON RESPONSIVE MEDIAhttp://www.implementingresponsivedesign.com/sample_chapter.pdf
  84. 84. The Jargon• Responsive Design CSS & Media Queries to change layout• AdaptiveDesign /Progressive Enhancement Default Website Presents simplest Markup, JS & Other techniques layer on additional complexity• Mobile First Design & Structural Strategy for implementation
  85. 85. Nav Patternshttp://bradfrostweb.com/blog/web/responsive-nav-patterns/http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/Layout Patternshttp://www.lukew.com/ff/entry.asp?1514
  86. 86. Costs vs Desktop Only ~50% more
  87. 87. Costs vs Mobile Alternatives
  88. 88. ConclusionEstablish the Value of Mobile WebDemo Responsive DesignEstablish Credibility w/ Big SitesFirst out of the gate - Big AdvantageCompare $$$ to mobile Alternatives
  89. 89. We are Looking for a Responsive Design Front End Designerhttp://fosterinteractive.com/job/designer
  90. 90. Hey @HTML5_Toronto, I want to go to @FITCs Spotlight Responsive Design on Dec.1 in TO #HTML5TO DECEMBER 1http://www.fitc.ca/events/about/?event=140
  91. 91. THANK YOU http://linkedin.responsivedesign.ca@finteractive (Drupal / Personal) @responsivDesign (RWD Tips)

×