Uploaded byAidan Foster
Responsive Web Design - Introduction & Workflow Overview
The document covers various aspects of responsive web design, including strategies for mobile-first design and the importance of using CSS and media queries to adapt layouts. It references significant resources and tools for implementing responsive design effectively, while highlighting the challenges and opportunities in the mobile landscape. The content also emphasizes collaboration and feedback in the design process, aiming to enhance user experience across devices.
More Related Content
Similar to Responsive Web Design - Introduction & Workflow Overview
![Responsive Design & Beyond [Code & Creativity Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codecreativityworkshop1-140506164731-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
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” thiswhole 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 BlackFriday 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.
- 18. Ethan Marcotte’s Lab- (Artist’s impression) Let there be... Responsive Design
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. USE (and HTML5shiv) http://www.flickr.com/photos/22290288@N03/
- 28. Explore html5boilerplate.com
- 29. HAVE http://sass-lang.com/
- 30. FireBug + FireSass
- 31.
- 32.
- 33.
- 34.
- 36.
- 37. #1 - FluidImages #2 - Flexible Grids #3 - CSS3 Media Queries
- 38. #1 - FluidImages
- 40. #2 - FlexibleGrids
- 42. Messy Grids useHTML markup http://foundation.zurb.com/docs/grid.php
- 43. Messy Grids useHTML markup 5 Classes! What’s Up with That?
- 44. Good Grids putstyle in the CSS http://susy.oddbird.net/
- 45. #3 - CSS3Media Queries
- 47. Media Query Basics- Breakpoint in css
- 48. USE EMs for Breakpoints (They Scale with zooming)
- 49. Breakpoint Mixin ForCompass 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.
- 55.
- 56.
- 57.
- 58. Mobile First (ContentFirst)
- 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 Mustfit “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 (WebsiteStructure) DEFAULT STYLES
- 64. @media (min-width: 25em) DEFAULT MEDIUM-ISH STYLES STYLES
- 65. @media (min-width: 50em) LARGE STYLES
- 66. Breakpoint Mixin ForCompass https://github.com/canarymason/breakpoint
- 67. (Generally) Put MediaQueries 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
- 73.
- 74.
- 75.
- 76. that just ONEpage
- 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
- 82.
- 83.
- 84. Prototype HTML Code Mobile First
- 85.
- 86. (Go Back abit) Breakpoint!
- 87. Repeat until you’reat your largest size
- 88. Get Team’s Feedback onreal devices
- 89. Adobe Edge Inspect(formerly Adobe Shadow)
- 91. 1-2 templates &repeat design / code cycle Review Visual Design Coding Launch
- 92. I Wrote abook review on responsivedesign.ca http://www.implementingresponsivedesign.com/
- 93. FREE CHAPTER ON RESPONSIVE MEDIA http://www.implementingresponsivedesign.com/ sample_chapter.pdf
- 94. The Jargon • ResponsiveDesign 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
- 95.
- 96. Costs vs DesktopOnly ~50% more
- 97. Costs vs MobileAlternatives
- 98. Conclusion Establish the Valueof 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, Iwant 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)