New Tools For Responsive Design
65
Twitter @finteractive FOSTER INTERACTIVE Web Development + Design NEW TOOLS FOR RESPONSIVE DESIGN
-
Upload
aidan-foster -
Category
Design
-
view
3.090 -
download
0
description
(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.
Transcript of New Tools For Responsive Design
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”
