Recommended
More Related Content
What's hot
What's hot (20)
Similar to The Coding Designer's Survival Kit - Capital Camp
Similar to The Coding Designer's Survival Kit - Capital Camp (20)
Recently uploaded
Recently uploaded (20)
The Coding Designer's Survival Kit - Capital Camp
- 1. The Coding Designer's Survival Kit Markup, CSS, and JavaScript tools for Designing in the Browser
- 2. The Coding Designer's Survival Kit And, yes, a Drupal theme, too.
- 3. Present in the Browser
- 4. What Happens When I Mouse Over? • Can’t show interactions well, if at all • It takes two images to show a mouseover
- 5. How About Animations? • Javascript, CSS3, Flash • Slow & Classy • vs. Fast & Exciting
- 6. Hard to Change • Some changes are trivial with CSS • Fonts & Global Typography • Color Palate • Be careful of changes that are costly, but don’t add more creative energy.
- 7. Last Minute Panic • Browser support • Interactions & Animations • Type rendering The worst time to have theses discussions is at the end of the project.
- 8. No One Wants to Guess Don’t make them. They like not guessing.
- 9. Designing in Code Do I ha a?
- 10. Who is Doing This? • Not just Craig. • Dan Cederholm @simplebits • Andy Clarke @malarkey • Meagan Fisher @owltastic • More and more of us
- 11. Design Thinking in CSS • Play and experiment • CSS becomes your new tool palate • Work out parts of your design in PS Speak CSS natively
- 12. Don’t Design the Impossible! Easy in Photoshop != Easy in CSS
- 13. Don’t Design the Impossible! Hard in Photoshop might = Easy in CSS
- 14. Markup Asks Questions That Photoshop Does Not • What to do if this headline wraps? • Have you designed for all possible list types? Tables? Form elements? • Fluid layouts • Responsive design
- 15. The Coding Designer’s Survival Kit The Anti-GUI A starter set of code and design tools All bundled up and ready to rock
- 16. The Coding Designer’s Survival Kit What's included? • HTML5 Boilerplate • Elements and pages to design for • Modernizr & Selectivizr • Lettering.js and other js tools • Sass / Compass mixins galore
- 17. The Coding Designer’s Survival Kit What's required? • Stuff you need to install • Sass, Compass • Susy, Other Compass Plugins • Livereload for auto-refreshing browsers
- 18. BC Before Coding Best to use as simple a tool as you can, until you need more power.
- 19. HTML
- 20. Modular HTML
- 21. HTML5 Elements
- 22. HTML UI Patterns
- 23. Javascript • jQuery UI • Modernizr • Selectivizr • Formalize • Respond.js
- 24. Javascript • Dynamic Carousel • Lettering.js • FitText • Geared Scrolling • more all the time
- 26. Sass sass-lang.com • Adds more power to the process of writing CSS • Variables, Mixins, Selector Nesting
- 27. Sass sass-lang.com • Two Syntaxes • SCSS: looks like CSS You’ll be comfortable. • Sass: clean and terse You’ll be faster.
- 28. Sass Variables sass-lang.com
- 29. Sass Mixins sass-lang.com
- 30. Sass sass-lang.com • $variables • +mixins • math & color • conditionals • @media
- 31. Sass sass-lang.com • @media • CREATE AN EXAMPLE HERE
- 32. Compass compass-style.org • Stylesheet framework built around Sass • Built-in mixins for CSS3 and common tasks like list formatting • Use frameworks like Susy, Blueprint, and 960 semantically • Add your own framework
- 33. Compass CSS3 compass-style.org
- 34. Compass CSS3 compass-style.org
- 35. Compass compass-style.org • Sprite Generation • Typography • Text Replacement • Trig (what?!)
- 36. Compass Plugins compass-style.org/frameworks • Zen Theme • Fancy Buttons & Sassy Buttons makes pretty buttons • Sassafras color schemes
- 37. Kit CSS: Step-by-Step • First, Do no harm. • Add functionality, not CSS you don’t need. • Considered defaults • Flavors
- 38. Kit Flavors: Basic
- 39. Kit Flavors: Naked
- 40. Kit Flavors: Style Tile
- 41. Kit Flavors: Style Tile
- 42. Podcast
- 43. Drupal Theme • In active development • Focus is on CSS • Modules can handle the JS • drupal.org/project/survivalkit
- 44. The Coding Designer’s Survival Kit The Kit & Podcast: theCodingDesigner.com The Theme: drupal.org/project/survivalkit
- 45. Resources 1 HARDBOILED WEB DESIGN BY ANDY CLARKE Hardboiled Web Design
- 46. Resources CSS3 for Web Designers
- 49. Get in Touch Mason Wendell twitter/d.o/github/irc: @canarymason theCodingDesigner.com BirdsAndMonkeys.com zivtech.com
Editor's Notes
- \n
- \n
- show designs in the proper context\nshow true colors and typography\nshow interactions\nshow in different devices\nfaster, more agile process\n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- These kind of changes are costly, and don’t add more creative energy. \n- fonts & global typography \n- color palate \n- "just a few small changes" translation: You'll have to tweak your whole document, and all documents for the whole site \n
- The worst time to have these discussions is at the end of the project. \nNo one wants to reset the project at that stage\nDecide with your client how much effort you will put into MAKING OLD BROWSERS LOOK LIKE NEW BROWSERS\n
- \n
- \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover.  \n- How do you demo the speed and easing of a javascript slideshow? \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- not a replacement for sketching and wireframing, but a combination of photoshop and front end development\n\nSketch\nWireframe\n“Blue Sky” Thinking\n
- Techniques from HTML5 Boilerplate\nEmpty index.html\nsample files for common markupHTML5UI PatternsForms\n
- Techniques from HTML5 Boilerplate\nEmpty index.html\nsample files for common markupHTML5UI PatternsForms\n
- Techniques from HTML5 Boilerplate\nEmpty index.html\nsample files for common markupHTML5UI PatternsForms\n
- Techniques from HTML5 Boilerplate\nEmpty index.html\nsample files for common markupHTML5UI PatternsForms\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- Every couple weeks\nTalk about design in the browser\nSass, CSS3, JS, etc\n\nthecodingdesigner.com\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n