Post on 22-Apr-2015
description
Twitter @finteractive
FOSTER INTERACTIVEWeb Development + Design
NEW TOOLS FOR
RESPONSIVE DESIGN
WHY DO WE NEED NEW TOOLS?
http://responsivedesign.ca
Discovery
Visual Design
Coding
Launch
Conventional “Waterfall” Workflow
Device Breakpoints
Desktop
Tablets
Phones
Home
Case Study
Blog List
Blog Post
Resources
Let’s Make that shadeof blue a bit darker
$!@&$@#!
1024768
Natural Breakpoints
Natural Breakpoints
Design the Extremes
Prototype HTML
CodeMobile First
Stretch Until Ugly
(Go Back a bit) Breakpoint!
Repeat until you’re at your largest size
Discovery
Visual Design
Coding
Launch
Conventional “Waterfall” Workflow
Discovery
Visual Design Coding
Launch
Responsive Workflow
Review
DESIGN TOOLS ?
?
<HTML>color:red;
http://www.zurb.com/playground/responsive-sketchsheets
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
PRO
JEC
T!N
OTE
S
responsivedesignsketchbook.com
1024768
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
Paragraph/Characters similar to CSS
Layout “Variations”
Master Templates
GOOD: Linked Content in text Blocks across layout variations
BAD: One way relationships
BAD: Paragraph Styles count as overrides
Indesign Places Your Other Docs
Indesign Places Your Other Docs
Indesign Places Your Other Docs
If you’re Good at it
You’ve got lots of creative to manage
Use If...
Designing Every Comp @ all breakpoints= Waste of Time
styletil.es
http://styletil.es/
Pattern Primer (HTML Style Tiles)
https://github.com/adactio/Pattern-Primer
IN-BROWSER DESIGN
1024768
Wastes Time as the results aren’t actually usable directly
Set Bad Client Expectations
Encourages Device Based Breakpoints
Mason Wendell - thecodingdesigner.com/
FRONT END TOOLS
http://leveluptuts.com/tutorials/sass-tutorials
http://sass-lang.com/
Basic Examples
http://sass-lang.com/• http://leveluptuts.com/tutorials/compass-tutorials
NO VENDOR PREFIX
1024768
Sprites w/ Compass
MAIN VALUE OF SASS+COMPASS IS THE 3RD PARTY Awesome Plugins
and “mixin” (functions)
Good Grids put style in the CSS
http://susy.oddbird.net/
https://github.com/canarymason/breakpoint
Breakpoint Mixin For Compass
https://github.com/canarymason/breakpoint
<html class=”no-svg”> <html class=”svg”>
(with image fallback)
http://www.joshuasortino.com/journal/creating-a-responsive-svg
http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
Dev Browser Kit
Chrome(Good inspector)
Chrome Extension - Window Resizer
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
Chrome Extension - SASS Inspector
https://chrome.google.com/webstore/detail/sass-inspector/lkofmbmllpgfbnonmnenkiakimpgoamn
Adobe Edge Inspect
http://html.adobe.com/edge/inspect/
Adobe Edge Inspect (formerly Adobe Shadow)
http://quirktools.com/screenfly/
Not Substitute for actual devices
http://linkedin.responsivedesign.ca
@finteractive (Aidan Foster)
THANK YOU
“Responsive Design - Real World Applications”