Responsive Web Design - Introduction & Workflow Overview
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
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Responsive Web Design - Introduction & Workflow Overview
Similaire à Responsive Web Design - Introduction & Workflow Overview (20)
Plus de Aidan Foster
Plus de Aidan Foster (11)
Dernier
Dernier (20)
Responsive Web Design - Introduction & Workflow Overview
- 1. FOSTER INTERACTIVE Web Development + Design Discovery Design Production Launch RESPONSIVEDESIGN.CA @finteractive (Drupal / Personal) Questions? Post to the linkedIn Group @responsivDesign (RWD Tips) http://linkedin.responsivedesign.ca
- 2. I “borrowed” this whole sequence from Luke Wroblewski http://www.lukew.com/ff/entry.asp?1506
- 5. 371 K 378K Babies born per day iPhones sold per day
- 6. 378K iPhones sold per day 371 K Babies born per day
- 7. 378K iPhones sold per day 562K iOS devices 371 K Babies born per day
- 8. 378K iPhones sold per day 562K iOS devices 700K Android devices activated per day 371 K Babies born per day
- 9. 378K iPhones sold per day 562K iOS devices 700K Android devices activated per day 371 K 200K Nokia smartphones Babies born per day
- 10. 378K iPhones sold per day 562K iOS devices 700K Android devices activated per day 371 K 200K Nokia smartphones Babies born per day 143k Blackberry devices
- 11. 1,983,000! Purchases / Activations of mobile Devices 371 K Babies born per day
- 12. Sales on Paypal Black Friday vs. 2010 IDC Predictions
- 14. The Challenge / Opportunity Image Credit: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
- 15. Existing Mobile Solutions Make an App!
- 16. Existing Mobile Solutions mobile website “m.website.com” “website.mobi”
- 17. 2010 (SPRING)
- 18. Ethan Marcotte’s Lab - (Artist’s impression) Let there be... Responsive Design
- 20. 2011 (SEPTEMBER)
- 21. Bostonglobe.com
- 22. barakobama.com
- 24. greygoose.com
- 25. microsoft.com
- 27. USE (and HTML5shiv) http://www.flickr.com/photos/22290288@N03/
- 28. Explore html5boilerplate.com
- 29. HAVE http://sass-lang.com/
- 30. FireBug + FireSass
- 32. Don’t Settle for
- 36. BAD UX
- 37. #1 - Fluid Images #2 - Flexible Grids #3 - CSS3 Media Queries
- 38. #1 - Fluid Images
- 40. #2 - Flexible Grids
- 42. Messy Grids use HTML markup http://foundation.zurb.com/docs/grid.php
- 43. Messy Grids use HTML markup 5 Classes! What’s Up with That?
- 44. Good Grids put style in the CSS http://susy.oddbird.net/
- 45. #3 - CSS3 Media Queries
- 47. Media Query Basics - Breakpoint in css
- 48. USE EMs for Breakpoints (They Scale with zooming)
- 49. Breakpoint Mixin For Compass https://github.com/canarymason/breakpoint
- 50. Responsive Web Design http://www.abookapart.com/products/ responsive-web-design
- 51. Progressive Enhancement (aka Adaptive Design)
- 52. Example: Menu Big Screen Small Screen
- 53. Example: Menu Big Screen Small Screen
- 54. Example: Touch
- 58. Mobile First (Content First)
- 59. Mobile First - Design Strategy http://www.abookapart.com/products/mobile-first
- 60. Streamlined Functions Mobile HAS to be Task Based Simple to be USABLE Direct Messaging
- 61. NO! We Must fit “Message From The Board” on the mobile Homepage!
- 62. Who Benefits? - Everyone Image Credit: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
- 63. Mobile First (Website Structure) DEFAULT STYLES
- 64. @media (min-width: 25em) DEFAULT MEDIUM-ISH STYLES STYLES
- 65. @media (min-width: 50em) LARGE STYLES
- 66. Breakpoint Mixin For Compass https://github.com/canarymason/breakpoint
- 67. (Generally) Put Media Queries in CSS not the HTML Header
- 70. Same as always custom styles sheets (we tend to go fixed width)
- 71. Responsive Design Workflow
- 72. Conventional “Waterfall” Workflow Discovery Visual Design Coding Launch
- 74. Desktop
- 75. Tablets
- 76. that just ONE page
- 77. 5 Breakpoints x 5 Layouts (Home, Blog List, Article, Case Study, Resources)
- 78. 5 Breakpoints x 5 Layouts (Home, Blog List, Article, Case Study, Resources) = 25 Files!
- 79. 5 Breakpoints x 5 Layouts (Home, Blog List, Article, Case Study, Resources) = Crazy Maintenance
- 80. Style Tiles - Design Systems http://iallenkelhet.no/2012/05/24/5-lessons-learned-from-a-mobile-first- responsive-design-process/
- 81. Discovery Visual Design Coding Launch
- 84. Prototype HTML Code Mobile First
- 86. (Go Back a bit) Breakpoint!
- 87. Repeat until you’re at your largest size
- 88. Get Team’s Feedback on real devices
- 89. Adobe Edge Inspect (formerly Adobe Shadow)
- 91. 1-2 templates & repeat design / code cycle Review Visual Design Coding Launch
- 92. I Wrote a book review on responsivedesign.ca http://www.implementingresponsivedesign.com/
- 93. FREE CHAPTER ON RESPONSIVE MEDIA http://www.implementingresponsivedesign.com/ sample_chapter.pdf
- 94. 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
- 96. Costs vs Desktop Only ~50% more
- 97. Costs vs Mobile Alternatives
- 98. Conclusion Establish the Value of Mobile Web Demo Responsive Design Establish Credibility w/ Big Sites First out of the gate - Big Advantage Compare $$$ to mobile Alternatives
- 99. We are Looking for a Responsive Design Front End Designer http://fosterinteractive.com/job/designer
- 100. Hey @HTML5_Toronto, I want to go to @FITC's Spotlight Responsive Design on Dec.1 in TO #HTML5TO DECEMBER 1 http://www.fitc.ca/events/about/?event=140
- 101. THANK YOU http://linkedin.responsivedesign.ca @finteractive (Drupal / Personal) @responsivDesign (RWD Tips)