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.
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.
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
49. Get in Touch
Mason Wendell
twitter/d.o/github/irc:
@canarymason
theCodingDesigner.com
BirdsAndMonkeys.com
zivtech.com
Notes de l'éditeur
\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
