0
The Coding Designers     Survival Kit   Markup, CSS, and JavaScript tools     for Designing in the Browser
The Coding Designers     Survival Kit    And, yes, a Drupal theme, too.
Present in the   Browser
What Happens When  I Mouse Over?•   Can’t show interactions well, if at all•   It takes two images to show a mouseover
How About           Animations?•   Javascript, CSS3, Flash•   Slow & Classy•   vs. Fast & Exciting
Hard to Change•   Some changes are trivial with CSS•   Fonts & Global Typography•   Color Palate•   Be careful of changes ...
Last Minute Panic•   Browser support•   Interactions & Animations•   Type renderingThe worst time to have theses discussio...
No OneWants to Guess    Don’t make them.  They like not guessing.
Designing in Code      Do I ha a?
Who is Doing This?            •   Not just Craig.            •   Dan Cederholm                @simplebits            •   A...
Design Thinking in CSS •   Play and experiment •   CSS becomes your new tool palate •   Work out parts of your design in P...
Don’t Design the  Impossible!Easy in Photoshop != Easy in CSS
Don’t Design the    Impossible!Hard in Photoshop might = Easy in CSS
Markup Asks          Questions          That Photoshop Does Not•   What to do if this headline wraps?•   Have you designed...
The Coding Designer’s     Survival Kit            The Anti-GUI A starter set of code and design tools   All bundled up and...
The Coding Designer’s     Survival Kit               Whats included?•   HTML5 Boilerplate•   Elements and pages to design ...
The Coding Designer’s     Survival Kit               Whats required?•   Stuff you need to install•   Sass, Compass•   Susy,...
BC   Before CodingBest to use as simple a tool as you can,      until you need more power.
HTML
Modular HTML
HTML5 Elements
HTML UI Patterns
Javascript•   jQuery UI•   Modernizr•   Selectivizr•   Formalize•   Respond.js
Javascript•   Dynamic Carousel•   Lettering.js•   FitText•   Geared Scrolling•   more all the time
CSS:Sass & Compass
Sass                 sass-lang.com•   Adds more power to the process of    writing CSS•   Variables, Mixins, Selector Nest...
Sass                 sass-lang.com•   Two Syntaxes•   SCSS: looks like CSS    You’ll be comfortable.•   Sass: clean and te...
Sass Variables    sass-lang.com
Sass Mixins  sass-lang.com
Sass                   sass-lang.com•   $variables•   +mixins•   math & color•   conditionals•   @media
Sass             sass-lang.com•   @media•   CREATE AN EXAMPLE HERE
Compass               compass-style.org•   Stylesheet framework built around Sass•   Built-in mixins for CSS3    and commo...
Compass CSS3   compass-style.org
Compass CSS3   compass-style.org
Compass                compass-style.org•   Sprite Generation•   Typography•   Text Replacement•   Trig (what?!)
Compass Plugins          compass-style.org/frameworks•   Zen Theme•   Fancy Buttons & Sassy Buttons    makes pretty button...
Kit CSS:         Step-by-Step•   First, Do no harm.•   Add functionality,    not CSS you don’t need.•   Considered default...
Kit Flavors:   Basic
Kit Flavors:  Naked
Kit Flavors: Style Tile
Kit Flavors: Style Tile
Podcast
Drupal Theme•   In active development•   Focus is on CSS•   Modules can handle the JS•   drupal.org/project/survivalkit
The Coding Designer’s     Survival Kit         The Kit & Podcast:      theCodingDesigner.com            The Theme:    drup...
Resources                                             1                        HARDBOILED                        WEB DESIG...
ResourcesCSS3 for Web Designers
ResourcesResponsive Web Design
Resourcessass-lang.comcompass-style.org
Get in Touch   Mason Wendell twitter/d.o/github/irc:   @canarymasontheCodingDesigner.com BirdsAndMonkeys.com      zivtech....
Upcoming SlideShare
Loading in...5
×

The Coding Designer's Survival Kit - Capital Camp

2,201

Published on

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,201
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \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
  • Transcript of "The Coding Designer's Survival Kit - Capital Camp"

    1. 1. The Coding Designers Survival Kit Markup, CSS, and JavaScript tools for Designing in the Browser
    2. 2. The Coding Designers Survival Kit And, yes, a Drupal theme, too.
    3. 3. Present in the Browser
    4. 4. What Happens When I Mouse Over?• Can’t show interactions well, if at all• It takes two images to show a mouseover
    5. 5. How About Animations?• Javascript, CSS3, Flash• Slow & Classy• vs. Fast & Exciting
    6. 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. 7. Last Minute Panic• Browser support• Interactions & Animations• Type renderingThe worst time to have theses discussionsis at the end of the project.
    8. 8. No OneWants to Guess Don’t make them. They like not guessing.
    9. 9. Designing in Code Do I ha a?
    10. 10. Who is Doing This? • Not just Craig. • Dan Cederholm @simplebits • Andy Clarke @malarkey • Meagan Fisher @owltastic • More and more of us
    11. 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. 12. Don’t Design the Impossible!Easy in Photoshop != Easy in CSS
    13. 13. Don’t Design the Impossible!Hard in Photoshop might = Easy in CSS
    14. 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. 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. 16. The Coding Designer’s Survival Kit Whats included?• HTML5 Boilerplate• Elements and pages to design for• Modernizr & Selectivizr• Lettering.js and other js tools• Sass / Compass mixins galore
    17. 17. The Coding Designer’s Survival Kit Whats required?• Stuff you need to install• Sass, Compass• Susy, Other Compass Plugins• Livereload for auto-refreshing browsers
    18. 18. BC Before CodingBest to use as simple a tool as you can, until you need more power.
    19. 19. HTML
    20. 20. Modular HTML
    21. 21. HTML5 Elements
    22. 22. HTML UI Patterns
    23. 23. Javascript• jQuery UI• Modernizr• Selectivizr• Formalize• Respond.js
    24. 24. Javascript• Dynamic Carousel• Lettering.js• FitText• Geared Scrolling• more all the time
    25. 25. CSS:Sass & Compass
    26. 26. Sass sass-lang.com• Adds more power to the process of writing CSS• Variables, Mixins, Selector Nesting
    27. 27. Sass sass-lang.com• Two Syntaxes• SCSS: looks like CSS You’ll be comfortable.• Sass: clean and terse You’ll be faster.
    28. 28. Sass Variables sass-lang.com
    29. 29. Sass Mixins sass-lang.com
    30. 30. Sass sass-lang.com• $variables• +mixins• math & color• conditionals• @media
    31. 31. Sass sass-lang.com• @media• CREATE AN EXAMPLE HERE
    32. 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. 33. Compass CSS3 compass-style.org
    34. 34. Compass CSS3 compass-style.org
    35. 35. Compass compass-style.org• Sprite Generation• Typography• Text Replacement• Trig (what?!)
    36. 36. Compass Plugins compass-style.org/frameworks• Zen Theme• Fancy Buttons & Sassy Buttons makes pretty buttons• Sassafras color schemes
    37. 37. Kit CSS: Step-by-Step• First, Do no harm.• Add functionality, not CSS you don’t need.• Considered defaults• Flavors
    38. 38. Kit Flavors: Basic
    39. 39. Kit Flavors: Naked
    40. 40. Kit Flavors: Style Tile
    41. 41. Kit Flavors: Style Tile
    42. 42. Podcast
    43. 43. Drupal Theme• In active development• Focus is on CSS• Modules can handle the JS• drupal.org/project/survivalkit
    44. 44. The Coding Designer’s Survival Kit The Kit & Podcast: theCodingDesigner.com The Theme: drupal.org/project/survivalkit
    45. 45. Resources 1 HARDBOILED WEB DESIGN BY ANDY CLARKEHardboiled Web Design
    46. 46. ResourcesCSS3 for Web Designers
    47. 47. ResourcesResponsive Web Design
    48. 48. Resourcessass-lang.comcompass-style.org
    49. 49. Get in Touch Mason Wendell twitter/d.o/github/irc: @canarymasontheCodingDesigner.com BirdsAndMonkeys.com zivtech.com
    1. A particular slide catching your eye?

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

    ×