New Tools For Responsive Design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

New Tools For Responsive Design

  • 3,124 views
Uploaded on

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

(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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,124
On Slideshare
3,101
From Embeds
23
Number of Embeds
4

Actions

Shares
Downloads
51
Comments
1
Likes
6

Embeds 23

https://twitter.com 18
http://twitter.com 3
http://www.twylah.com 1
https://si0.twimg.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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