FOSTER INTERACTIVEWeb Development + Design           NEW TOOLS              FOR           RESPONSIVE             DESIGN   ...
WHY DO WE NEED NEW TOOLS?
http://responsivedesign.ca
Conventional “Waterfall” Workflow           Discovery          Visual Design             Coding            Launch
Device Breakpoints
Desktop
Tablets
Phones
HomeCase StudyBlog ListBlog PostResources
Let’s Make that shade of blue a bit darker                        $!@&$@#!
1024768
Natural Breakpoints
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
Conventional “Waterfall” Workflow            Discovery           Visual Design              Coding             Launch
Responsive Workflow                DiscoveryVisual Design    Review     Coding                 Launch
DESIGN TOOLS ?
?
<HTML>color:red;
http://www.zurb.com/playground/     responsive-sketchsheets
PROJECT NOTEShttp://jeremypalford.com/arch-journal/ responsive-web-design-sketch-sheets
responsivedesignsketchbook.com
1024768http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
Paragraph/Characters similar to CSS
Master TemplatesLayout “Variations”
GOOD: LinkedContent in textBlocks acrosslayout variationsBAD: One wayrelationshipsBAD: ParagraphStyles count asoverrides
Indesign Places Your Other Docs
Indesign Places Your Other Docs
Indesign Places Your Other Docs
Use             If... If you’re Good at it  You’ve got lots of creative to manageDesigning Every Comp  @ all breakpoints  ...
styletil.eshttp://styletil.es/
Pattern Primer (HTML Style Tiles)https://github.com/adactio/Pattern-Primer
IN-BROWSER DESIGN
Set Bad Client Expectations  Encourages Device Based        1024768       Breakpoints Wastes Time as the resultsaren’t act...
Mason Wendell - thecodingdesigner.com/
FRONT END TOOLS
http://sass-lang.com/http://leveluptuts.com/tutorials/sass-tutorials
Basic Examples
•   http://leveluptuts.com/tutorials/compass-tutorials                               http://sass-lang.com/
NO VENDOR PREFIX
Sprites w/ Compass                     1024768
MAIN VALUE OF SASS+COMPASS IS THE    3RD PARTY Awesome Plugins      and “mixin” (functions)
Good Grids put style in the CSS     http://susy.oddbird.net/
https://github.com/canarymason/breakpoint
Breakpoint Mixin For Compasshttps://github.com/canarymason/breakpoint
<html class=”no-svg”>   <html class=”svg”>
(with image fallback)
http://www.joshuasortino.com/journal/creating-a-responsive-svghttp://coding.smashingmagazine.com/2012/01/16/resolution-ind...
Dev Browser Kit            Chrome        (Good inspector)
Live Reload (mac)http://livereload.com
Chrome Extension - Window Resizer   https://chrome.google.com/webstore/detail/window-resizer/               kkelicaakdanhi...
Chrome Extension - SASS Inspector   https://chrome.google.com/webstore/detail/sass-inspector/              lkofmbmllpgfbno...
Adobe Edge Inspecthttp://html.adobe.com/edge/inspect/
Adobe Edge Inspect (formerly Adobe Shadow)
Not Substitute for actual devices http://quirktools.com/screenfly/
THANK YOUhttp://linkedin.responsivedesign.ca“Responsive Design - Real World Applications”           @finteractive (Aidan Fo...
New Tools For Responsive Design
New Tools For Responsive Design
New Tools For Responsive Design
New Tools For Responsive Design
New Tools For Responsive Design
Upcoming SlideShare
Loading in...5
×

New Tools For Responsive Design

2,482

Published on

(Here's a video of the presentation on vimeo (https://vimeo.com/54855871)

Originally presented Dec 1, 2012 at FITC's spotlight on Responsive Design

Responsive design introduces new concepts and workflows to website development. Get an quick overview of tools and strategies to use on your next project. Learn about methods such as “in-browser” design, HTML wireframe prototypes, and using tools like Indesign CS6 for creative comps. Discover strategies for running collaborative project reviews using Adobe Edge Inspect and get a brief introduction to tools to help coders work faster by using CSS pre-compliers like SASS and responsive grid systems.

Published in: Design
1 Comment
6 Likes
Statistics
Notes
  • Speaking of new tools, here is a new one for you. Recently released a responsive css preprocessor. Simply add @joy(context, font-size) to the css declaration you'd like to be fluid. Run it through the preprocessor and you're done. This helps to make RWD development easy and manageable, even if you need to change things. Check out JOY! Responsive CSS Preprocessor at joyresponsivecss.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,482
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
55
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

New Tools For Responsive Design

  1. 1. FOSTER INTERACTIVEWeb Development + Design NEW TOOLS FOR RESPONSIVE DESIGN Twitter @finteractive
  2. 2. WHY DO WE NEED NEW TOOLS?
  3. 3. http://responsivedesign.ca
  4. 4. Conventional “Waterfall” Workflow Discovery Visual Design Coding Launch
  5. 5. Device Breakpoints
  6. 6. Desktop
  7. 7. Tablets
  8. 8. Phones
  9. 9. HomeCase StudyBlog ListBlog PostResources
  10. 10. Let’s Make that shade of blue a bit darker $!@&$@#!
  11. 11. 1024768
  12. 12. Natural Breakpoints
  13. 13. Natural Breakpoints
  14. 14. Design the Extremes
  15. 15. Prototype HTML Code Mobile First
  16. 16. Stretch Until Ugly
  17. 17. (Go Back a bit) Breakpoint!
  18. 18. Repeat until you’re at your largest size
  19. 19. Conventional “Waterfall” Workflow Discovery Visual Design Coding Launch
  20. 20. Responsive Workflow DiscoveryVisual Design Review Coding Launch
  21. 21. DESIGN TOOLS ?
  22. 22. ?
  23. 23. <HTML>color:red;
  24. 24. http://www.zurb.com/playground/ responsive-sketchsheets
  25. 25. PROJECT NOTEShttp://jeremypalford.com/arch-journal/ responsive-web-design-sketch-sheets
  26. 26. responsivedesignsketchbook.com
  27. 27. 1024768http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
  28. 28. Paragraph/Characters similar to CSS
  29. 29. Master TemplatesLayout “Variations”
  30. 30. GOOD: LinkedContent in textBlocks acrosslayout variationsBAD: One wayrelationshipsBAD: ParagraphStyles count asoverrides
  31. 31. Indesign Places Your Other Docs
  32. 32. Indesign Places Your Other Docs
  33. 33. Indesign Places Your Other Docs
  34. 34. Use If... If you’re Good at it You’ve got lots of creative to manageDesigning Every Comp @ all breakpoints = Waste of Time
  35. 35. styletil.eshttp://styletil.es/
  36. 36. Pattern Primer (HTML Style Tiles)https://github.com/adactio/Pattern-Primer
  37. 37. IN-BROWSER DESIGN
  38. 38. Set Bad Client Expectations Encourages Device Based 1024768 Breakpoints Wastes Time as the resultsaren’t actually usable directly
  39. 39. Mason Wendell - thecodingdesigner.com/
  40. 40. FRONT END TOOLS
  41. 41. http://sass-lang.com/http://leveluptuts.com/tutorials/sass-tutorials
  42. 42. Basic Examples
  43. 43. • http://leveluptuts.com/tutorials/compass-tutorials http://sass-lang.com/
  44. 44. NO VENDOR PREFIX
  45. 45. Sprites w/ Compass 1024768
  46. 46. MAIN VALUE OF SASS+COMPASS IS THE 3RD PARTY Awesome Plugins and “mixin” (functions)
  47. 47. Good Grids put style in the CSS http://susy.oddbird.net/
  48. 48. https://github.com/canarymason/breakpoint
  49. 49. Breakpoint Mixin For Compasshttps://github.com/canarymason/breakpoint
  50. 50. <html class=”no-svg”> <html class=”svg”>
  51. 51. (with image fallback)
  52. 52. http://www.joshuasortino.com/journal/creating-a-responsive-svghttp://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
  53. 53. Dev Browser Kit Chrome (Good inspector)
  54. 54. Live Reload (mac)http://livereload.com
  55. 55. Chrome Extension - Window Resizer https://chrome.google.com/webstore/detail/window-resizer/ kkelicaakdanhinjdeammmilcgefonfh
  56. 56. Chrome Extension - SASS Inspector https://chrome.google.com/webstore/detail/sass-inspector/ lkofmbmllpgfbnonmnenkiakimpgoamn
  57. 57. Adobe Edge Inspecthttp://html.adobe.com/edge/inspect/
  58. 58. Adobe Edge Inspect (formerly Adobe Shadow)
  59. 59. Not Substitute for actual devices http://quirktools.com/screenfly/
  60. 60. THANK YOUhttp://linkedin.responsivedesign.ca“Responsive Design - Real World Applications” @finteractive (Aidan Foster)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×