FOSTER INTERACTIVE                                                  Web Development + Design                              ...
I “borrowed” this whole sequence        from Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?1506
371 K              378KBabies born per day   iPhones sold per day
378K                      iPhones sold per day 371 KBabies born per day
378K                      iPhones sold per day                      562K                      iOS devices 371 KBabies born...
378K                      iPhones sold per day                      562K                      iOS devices                 ...
378K                      iPhones sold per day                      562K                      iOS devices                 ...
378K                      iPhones sold per day                      562K                      iOS devices                 ...
1,983,000!                      Purchases / Activations                      of mobile Devices 371 KBabies born per day
Sales on PaypalBlack Friday vs. 2010   IDC Predictions
The Challenge / OpportunityImage Credit: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Existing Mobile Solutions             Make an App!
Existing Mobile Solutions         mobile website              “m.website.com” “website.mobi”
2010 (SPRING)
Ethan Marcotte’s Lab - (Artist’s impression)Let there be...Responsive  Design
http://www.alistapart.com/articles/responsive-web-design/
2011 (SEPTEMBER)
Bostonglobe.com
barakobama.com
barakobama.com (redo)
greygoose.com
microsoft.com
Before StartingResponsive Design
USE(and HTML5shiv)                  http://www.flickr.com/photos/22290288@N03/
Explore          html5boilerplate.com
HAVE       http://sass-lang.com/
FireBug    +FireSass
Navigate with http://compass-style.org
Don’t Settle for
ResponsiveDesign Basics
Viewport Meta Tag
BADUX
#1 - Fluid Images#2 - Flexible Grids#3 - CSS3 Media Queries
#1 - Fluid Images
#2 - Flexible Grids
Messy Grids use HTML markuphttp://foundation.zurb.com/docs/grid.php
Messy Grids use HTML markup5 Classes! What’s Up with That?
Good Grids put style in the CSS     http://susy.oddbird.net/
#3 - CSS3 Media Queries
Media Query Basics - Breakpoint in css
USE EMs     for Breakpoints(They Scale with zooming)
Breakpoint Mixin For Compasshttps://github.com/canarymason/breakpoint
Responsive Web Designhttp://www.abookapart.com/products/        responsive-web-design
Progressive Enhancement     (aka Adaptive Design)
Example: Menu    Big Screen   Small Screen
Example: Menu    Big Screen   Small Screen
Example: Touch
Example: Location
http://modernizr.com/
http://filamentgroup.com/dwpe/http://easy-readers.net/books/adaptive-web-design/
Mobile First (Content First)
Mobile First - Design Strategyhttp://www.abookapart.com/products/mobile-first
Streamlined Functions  Mobile HAS to be                            Task BasedSimple to be USABLE                         D...
NO! We Must fit“Message From The Board” on the mobile Homepage!
Who Benefits? - EveryoneImage Credit: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First (Website Structure)           DEFAULT            STYLES
@media (min-width: 25em)DEFAULT   MEDIUM-ISH STYLES           STYLES
@media (min-width: 50em)          LARGE STYLES
Breakpoint Mixin For Compasshttps://github.com/canarymason/breakpoint
(Generally) Put Media Queries in CSS not the HTML Header
Same as always   custom styles sheets (we tend to go fixed width)
Responsive Design    Workflow
Conventional “Waterfall” Workflow            Discovery           Visual Design              Coding             Launch
Device Breakpoints
Desktop
Tablets
that just ONE page
5 Breakpoints         x     5 Layouts(Home, Blog List, Article, Case Study, Resources)
5 Breakpoints         x     5 Layouts(Home, Blog List, Article, Case Study, Resources)  = 25 Files!
5 Breakpoints            x        5 Layouts   (Home, Blog List, Article,    Case Study, Resources)= Crazy Maintenance
Style Tiles - Design Systemshttp://iallenkelhet.no/2012/05/24/5-lessons-learned-from-a-mobile-first-responsive-design-proce...
DiscoveryVisual Design               Coding                 Launch
Natural Breakpoints
Design the Extremes
Prototype HTML      Code    Mobile First
Stretch Until Ugly
(Go Back a bit)   Breakpoint!
Repeat until you’re at your       largest size
Get Team’sFeedback on real    devices
Adobe Edge Inspect (formerly Adobe Shadow)
1-2 templates & repeat       design / code cycle                ReviewVisual Design            Coding                Launch
I Wrote a book review on                       responsivedesign.cahttp://www.implementingresponsivedesign.com/
FREE CHAPTER ON                     RESPONSIVE MEDIAhttp://www.implementingresponsivedesign.com/sample_chapter.pdf
The Jargon• Responsive Design  CSS & Media Queries to change layout• AdaptiveDesign /Progressive Enhancement Default Websi...
Nav Patternshttp://bradfrostweb.com/blog/web/responsive-nav-patterns/http://bradfrostweb.com/blog/web/complex-navigation-p...
Costs vs Desktop Only      ~50% more
Costs vs Mobile Alternatives
ConclusionEstablish the Value of Mobile WebDemo Responsive DesignEstablish Credibility w/ Big SitesFirst out of the gate -...
We are                     Looking for a                      Responsive                     Design Front                 ...
Hey @HTML5_Toronto, I want to go            to @FITCs Spotlight Responsive            Design on Dec.1 in TO #HTML5TO      ...
THANK YOU   http://linkedin.responsivedesign.ca@finteractive (Drupal / Personal)   @responsivDesign   (RWD Tips)
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow Overview
Prochain SlideShare
Chargement dans... 5
×

Responsive Web Design - Introduction & Workflow Overview

7,146

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: Technologies
1 Comment
11 mentions J'aime
Statistiques
Remarques
  • 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
       Répondre 
    Êtes-vous sûr de vouloir  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Total des vues
7,146
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
15
Actions
Partages
0
Téléchargements
0
Commentaires
1
J'aime
11
Ajouts 0
No embeds

No notes for slide

Transcript of "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)

×