New Tools For Responsive Design
•
6 j'aime•2,941 vues
(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.
Recommandé
Recommandé
Contenu connexe
Plus de Aidan Foster
Plus de Aidan Foster (7)
Dernier
Dernier (20)
New Tools For Responsive Design
- 1. FOSTER INTERACTIVE Web Development + Design NEW TOOLS FOR RESPONSIVE DESIGN Twitter @finteractive
- 2. WHY DO WE NEED NEW TOOLS?
- 4. Conventional “Waterfall” Workflow Discovery Visual Design Coding Launch
- 6. Desktop
- 7. Tablets
- 8. Phones
- 9. Home Case Study Blog List Blog Post Resources
- 10. Let’s Make that shade of blue a bit darker $!@&$@#!
- 11. 1024768
- 15. Prototype HTML Code Mobile First
- 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 Discovery Visual Design Review Coding Launch
- 21. DESIGN TOOLS ?
- 22. ?
- 24. http://www.zurb.com/playground/ responsive-sketchsheets
- 28. Paragraph/Characters similar to CSS
- 33. GOOD: Linked Content in text Blocks across layout variations BAD: One way relationships BAD: Paragraph Styles count as overrides
- 34. Indesign Places Your Other Docs
- 35. Indesign Places Your Other Docs
- 36. Indesign Places Your Other Docs
- 37. Use If... If you’re Good at it You’ve got lots of creative to manage Designing Every Comp @ all breakpoints = Waste of Time
- 40. Pattern Primer (HTML Style Tiles) https://github.com/adactio/Pattern-Primer
- 42. Set Bad Client Expectations Encourages Device Based 1024768 Breakpoints Wastes Time as the results aren’t actually usable directly
- 43. Mason Wendell - thecodingdesigner.com/
- 44. FRONT END TOOLS
- 46. Basic Examples
- 47. • http://leveluptuts.com/tutorials/compass-tutorials http://sass-lang.com/
- 48. NO VENDOR PREFIX
- 49. Sprites w/ Compass 1024768
- 50. MAIN VALUE OF SASS+COMPASS IS THE 3RD PARTY Awesome Plugins and “mixin” (functions)
- 51. Good Grids put style in the CSS http://susy.oddbird.net/
- 54. Breakpoint Mixin For Compass https://github.com/canarymason/breakpoint
- 55. <html class=”no-svg”> <html class=”svg”>
- 58. Dev Browser Kit Chrome (Good inspector)
- 60. Chrome Extension - Window Resizer https://chrome.google.com/webstore/detail/window-resizer/ kkelicaakdanhinjdeammmilcgefonfh
- 61. Chrome Extension - SASS Inspector https://chrome.google.com/webstore/detail/sass-inspector/ lkofmbmllpgfbnonmnenkiakimpgoamn
- 63. Adobe Edge Inspect (formerly Adobe Shadow)
- 64. Not Substitute for actual devices http://quirktools.com/screenfly/
- 65. THANK YOU http://linkedin.responsivedesign.ca “Responsive Design - Real World Applications” @finteractive (Aidan Foster)