10 Responsive Design Tools To Make Sure Your Website Is Not Messy
New Tools For Responsive Design
-
Upload
aidan-foster -
Category
Design
-
view
3.090 -
download
0
description
Transcript of New Tools For Responsive Design
![Page 1: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/1.jpg)
Twitter @finteractive
FOSTER INTERACTIVEWeb Development + Design
NEW TOOLS FOR
RESPONSIVE DESIGN
![Page 2: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/2.jpg)
WHY DO WE NEED NEW TOOLS?
![Page 3: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/3.jpg)
http://responsivedesign.ca
![Page 4: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/4.jpg)
Discovery
Visual Design
Coding
Launch
Conventional “Waterfall” Workflow
![Page 5: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/5.jpg)
Device Breakpoints
![Page 6: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/6.jpg)
Desktop
![Page 7: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/7.jpg)
Tablets
![Page 8: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/8.jpg)
Phones
![Page 9: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/9.jpg)
Home
Case Study
Blog List
Blog Post
Resources
![Page 10: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/10.jpg)
Let’s Make that shadeof blue a bit darker
$!@&$@#!
![Page 11: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/11.jpg)
1024768
![Page 12: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/12.jpg)
Natural Breakpoints
![Page 13: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/13.jpg)
Natural Breakpoints
![Page 14: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/14.jpg)
Design the Extremes
![Page 15: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/15.jpg)
Prototype HTML
CodeMobile First
![Page 16: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/16.jpg)
Stretch Until Ugly
![Page 17: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/17.jpg)
(Go Back a bit) Breakpoint!
![Page 18: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/18.jpg)
Repeat until you’re at your largest size
![Page 19: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/19.jpg)
Discovery
Visual Design
Coding
Launch
Conventional “Waterfall” Workflow
![Page 20: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/20.jpg)
Discovery
Visual Design Coding
Launch
Responsive Workflow
Review
![Page 21: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/21.jpg)
DESIGN TOOLS ?
![Page 22: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/22.jpg)
?
![Page 23: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/23.jpg)
<HTML>color:red;
![Page 24: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/24.jpg)
http://www.zurb.com/playground/responsive-sketchsheets
![Page 25: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/25.jpg)
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
PRO
JEC
T!N
OTE
S
![Page 26: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/26.jpg)
responsivedesignsketchbook.com
![Page 27: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/27.jpg)
1024768
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
![Page 28: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/28.jpg)
Paragraph/Characters similar to CSS
![Page 29: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/29.jpg)
Layout “Variations”
Master Templates
![Page 30: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/30.jpg)
![Page 31: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/31.jpg)
![Page 32: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/32.jpg)
![Page 33: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/33.jpg)
GOOD: Linked Content in text Blocks across layout variations
BAD: One way relationships
BAD: Paragraph Styles count as overrides
![Page 34: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/34.jpg)
Indesign Places Your Other Docs
![Page 35: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/35.jpg)
Indesign Places Your Other Docs
![Page 36: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/36.jpg)
Indesign Places Your Other Docs
![Page 37: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/37.jpg)
If you’re Good at it
You’ve got lots of creative to manage
Use If...
Designing Every Comp @ all breakpoints= Waste of Time
![Page 38: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/38.jpg)
styletil.es
http://styletil.es/
![Page 39: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/39.jpg)
![Page 40: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/40.jpg)
Pattern Primer (HTML Style Tiles)
https://github.com/adactio/Pattern-Primer
![Page 41: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/41.jpg)
IN-BROWSER DESIGN
![Page 42: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/42.jpg)
1024768
Wastes Time as the results aren’t actually usable directly
Set Bad Client Expectations
Encourages Device Based Breakpoints
![Page 43: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/43.jpg)
Mason Wendell - thecodingdesigner.com/
![Page 44: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/44.jpg)
FRONT END TOOLS
![Page 45: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/45.jpg)
http://leveluptuts.com/tutorials/sass-tutorials
http://sass-lang.com/
![Page 46: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/46.jpg)
Basic Examples
![Page 47: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/47.jpg)
http://sass-lang.com/• http://leveluptuts.com/tutorials/compass-tutorials
![Page 48: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/48.jpg)
NO VENDOR PREFIX
![Page 49: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/49.jpg)
1024768
Sprites w/ Compass
![Page 50: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/50.jpg)
MAIN VALUE OF SASS+COMPASS IS THE 3RD PARTY Awesome Plugins
and “mixin” (functions)
![Page 51: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/51.jpg)
Good Grids put style in the CSS
http://susy.oddbird.net/
![Page 52: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/52.jpg)
![Page 53: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/53.jpg)
https://github.com/canarymason/breakpoint
![Page 54: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/54.jpg)
Breakpoint Mixin For Compass
https://github.com/canarymason/breakpoint
![Page 55: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/55.jpg)
<html class=”no-svg”> <html class=”svg”>
![Page 56: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/56.jpg)
(with image fallback)
![Page 57: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/57.jpg)
http://www.joshuasortino.com/journal/creating-a-responsive-svg
http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
![Page 58: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/58.jpg)
Dev Browser Kit
Chrome(Good inspector)
![Page 60: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/60.jpg)
Chrome Extension - Window Resizer
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
![Page 61: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/61.jpg)
Chrome Extension - SASS Inspector
https://chrome.google.com/webstore/detail/sass-inspector/lkofmbmllpgfbnonmnenkiakimpgoamn
![Page 62: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/62.jpg)
Adobe Edge Inspect
http://html.adobe.com/edge/inspect/
![Page 63: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/63.jpg)
Adobe Edge Inspect (formerly Adobe Shadow)
![Page 64: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/64.jpg)
http://quirktools.com/screenfly/
Not Substitute for actual devices
![Page 65: New Tools For Responsive Design](https://reader035.fdocuments.us/reader035/viewer/2022070312/553866d74a79590a7f8b46fe/html5/thumbnails/65.jpg)
http://linkedin.responsivedesign.ca
@finteractive (Aidan Foster)
THANK YOU
“Responsive Design - Real World Applications”