WVPDX 2014 - Hammering Responsive Web Design Into Shape
description
Transcript of WVPDX 2014 - Hammering Responsive Web Design Into Shape
![Page 1: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/1.jpg)
!
Hammering Responsive Web Design Into Shape
!
!
@KenTabor
![Page 2: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/2.jpg)
Visionary
![Page 3: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/3.jpg)
![Page 4: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/4.jpg)
bit.ly/KenSlideShare
![Page 5: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/5.jpg)
Adapt Respond Overcome
![Page 6: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/6.jpg)
“Recently, an emergent discipline called ‘responsive architecture’ has begun
asking how physical spaces can respond to the presence of people passing
through them.”
-Ethan Marcotte
![Page 7: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/7.jpg)
“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat
them as facets of the same experience.”
-Ethan Marcotte
![Page 8: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/8.jpg)
I figure you already buy into responsive, adaptive, or fluid
design
![Page 9: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/9.jpg)
Let’s focus on the challenge of RWD - testing against a
multitude of form-factors
![Page 10: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/10.jpg)
Production servers are sweet for users
![Page 11: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/11.jpg)
Production servers are a drag for testing
![Page 12: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/12.jpg)
Get your own server
Install Apache
![Page 13: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/13.jpg)
Win7?
Download the installer at httpd.apache.org
![Page 14: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/14.jpg)
OS X?
Apache is already on your MacBook
![Page 15: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/15.jpg)
![Page 16: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/16.jpg)
![Page 17: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/17.jpg)
Apache configuration is not ideal out of the box
Let’s tell Apache from where to serve your files
![Page 18: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/18.jpg)
Edit what? httpd.conf Where?
c:\apache2\conf
/etc/apache2/
![Page 19: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/19.jpg)
#Before DocumentRoot “/Library/WebServer/Documents” !
#After DocumentRoot “/Users/ken/trees”
![Page 20: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/20.jpg)
#Before <Directory “/Library/WebServer/Documents”>!
#After<Directory “/Users/ken/trees”>
![Page 21: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/21.jpg)
After editing httpd.conf restart Apache
![Page 22: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/22.jpg)
![Page 23: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/23.jpg)
Localhost, the best host ❤️
Rapid turn around and absolute control
![Page 24: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/24.jpg)
Level Up
![Page 25: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/25.jpg)
Leapfrog your peers?
Gain advantage over the competition?
![Page 26: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/26.jpg)
Serve your teammates?
Share with the community?
![Page 27: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/27.jpg)
Will the mobile browser on phones and tablets hit our
work OS X laptop?
![Page 28: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/28.jpg)
Yes! And it’s fantastic!
![Page 29: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/29.jpg)
Laptop is on wifi
iPhone is on wifi
Shared network is easiest
![Page 30: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/30.jpg)
System Preferences
Network
![Page 31: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/31.jpg)
![Page 32: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/32.jpg)
http://192.168.0.244
![Page 33: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/33.jpg)
Phone or tablet browser hits the laptop URL
Tickles Apache to serve
![Page 34: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/34.jpg)
![Page 35: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/35.jpg)
![Page 36: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/36.jpg)
Laptop + Devices => #Joy
![Page 37: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/37.jpg)
Will the mobile browser on phones and tablets hit our
work Win7 laptop?
![Page 38: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/38.jpg)
Laptop is on wifi
iPhone is on wifi
Shared network is easiest
![Page 39: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/39.jpg)
Firewall turned off
Phone or tablet browser hits the laptop URL
Tickles Apache to serve
![Page 40: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/40.jpg)
Open a Command Prompt
“ipconfig” Look for ip address
![Page 41: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/41.jpg)
![Page 42: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/42.jpg)
![Page 43: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/43.jpg)
Expert pro-tip: Apache web server “Virtual Host”
![Page 44: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/44.jpg)
This is optional
Adds power-up bonus points
![Page 45: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/45.jpg)
Maps (a folder) /Users/ken/trees/AnnaSpellingWords
to (a URL) www.annaspellingwords.local
![Page 46: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/46.jpg)
Edit: httpd-vhosts.conf Where?
c:\apache2\conf\extra
/etc/apache2/extra
![Page 47: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/47.jpg)
<VirtualHost *:80> DocumentRoot “/Users/ken/trees/AnnaSpellingWords” ServerName annaspellingwords.local ! <Directory “/Users/ken/trees/AnnaSpellingWords”> Options Indexes FollowSymLinks AllowOverride All Order allow,deny Allow from all </Directory> </VirtualHost>
![Page 48: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/48.jpg)
Edit what? httpd.conf Where?
c:\apache2\conf
/etc/apache2/
![Page 49: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/49.jpg)
# Virtual hosts Include /private/etc/apache2/extra/httpd-vhosts.conf
![Page 50: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/50.jpg)
Edit: hosts Where?
\windows\system32\drivers\etc
/etc
![Page 51: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/51.jpg)
127.0.0.1 annaspellingwords.local
![Page 52: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/52.jpg)
![Page 53: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/53.jpg)
When you’re back home and in the lab enjoy a coffee
Experiment and have fun
![Page 54: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/54.jpg)
Who is “Ken Tabor?”
![Page 55: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/55.jpg)
I’m a product engineer
at Sabre building TripCase
![Page 57: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/57.jpg)
Internet Inspirations
![Page 58: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/58.jpg)
mediaqueri.es
![Page 59: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/59.jpg)
responsivedesign.is
![Page 60: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/60.jpg)
html5up.net
![Page 61: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/61.jpg)
responsive.is
![Page 62: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/62.jpg)
![Page 63: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/63.jpg)
![Page 64: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/64.jpg)
Responsive Testing Tool
![Page 65: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/65.jpg)
Easily preview your site given typical device resolutions
Runs on localhost for convenience & security
![Page 66: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/66.jpg)
![Page 67: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/67.jpg)
github.com/mattkersley/Responsive-Design-Testing
![Page 68: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/68.jpg)
ResponsizerJS
![Page 69: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/69.jpg)
Drop it into your web site
Helps resize browser when matching device sizes
![Page 70: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/70.jpg)
github.com/KDawg/Responsizer.js
![Page 71: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/71.jpg)
<script src=“resources/code/ Responsizer.js” type=“text/javascript”> </script>
![Page 72: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/72.jpg)
Can’t find the right tool?
Then build it and share!
![Page 73: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/73.jpg)
How big are your users?
![Page 74: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/74.jpg)
How do we know the screen sizes and devices our
customers have?
![Page 75: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/75.jpg)
Using Google Analytics?
You have a wealth of data Draw reports on it
![Page 76: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/76.jpg)
![Page 77: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/77.jpg)
Screen Size
Device Brand
O/S Name & Version
Browser Type
![Page 78: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/78.jpg)
Using this data informs your interface design with fact-based
reality
![Page 79: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/79.jpg)
Surviving CSS by thriving with Sass
![Page 80: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/80.jpg)
sass-lang.com
![Page 81: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/81.jpg)
Lovely syntactic sugar
Compiles to CSS
Makes life more joyful
![Page 82: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/82.jpg)
$phone-width: 320px;$laptop-width: 1024px; !.popup { left: 25%; position: fixed; width: 50%; z-index: 20; @media screen and (max-width: $phone-width) { left: 10%; width: 80%; } @media screen and (min-width: $laptop-width) { font-size: 2em; left: 15%; width: 70%; }}
![Page 83: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/83.jpg)
Nested media queries
Expressive variables
More rational looking
![Page 84: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/84.jpg)
Breakpoint
![Page 85: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/85.jpg)
breakpoint-sass.com
![Page 86: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/86.jpg)
$phone-width: max-width 320px;$laptop-width: min-width 1024px;.popup { left: 25%; position: fixed; width: 50%; z-index: 20; @include breakpoint($phone-width) { left: 10%; width: 80%; } @include breakpoint($laptop-width) { font-size: 2em; left: 15%; width: 70%; }}
![Page 87: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/87.jpg)
Fun with PhantomJS
![Page 88: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/88.jpg)
phantomjs.org Headless Webkit browser
![Page 89: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/89.jpg)
phantomjs.org/download.html
brew install phantomjs
![Page 90: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/90.jpg)
Take screen shots of websites
Record at varying device sizes
![Page 91: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/91.jpg)
Needs some JavaScript coding to be the awesome
![Page 92: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/92.jpg)
var webpage = require('webpage'); var page; page = webpage.create(); page.viewportSize = {width: 1024, height: 768}; page.clipRect = {top: 0, left: 0, width: 1024, height: 768}; page.open('http://www.microsoft.com', function() { page.render('screenie_1024_768.png'); phantom.exit();});
phantomjs screenie.js
![Page 93: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/93.jpg)
Script could take parameters:
width and height
url
picture filename
![Page 94: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/94.jpg)
ImageMagick processing
![Page 95: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/95.jpg)
imagemagick.org Selection of command-line image processing tools
![Page 96: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/96.jpg)
www.imagemagick.org/script/binary-releases.php
brew install imagemagick
![Page 97: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/97.jpg)
Compare two images
Produce a third one
“Annotates distortions”
![Page 98: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/98.jpg)
XOR Bitwise Operator
![Page 99: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/99.jpg)
0 XOR 0 = false 0 XOR 1 = true 1 XOR 0 = true 1 XOR 1 = false
![Page 100: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/100.jpg)
compare image1.png image2.png image3.png
![Page 101: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/101.jpg)
![Page 102: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/102.jpg)
Automate this
Collect visual history
Detect design divergence
![Page 103: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/103.jpg)
Responses?
![Page 104: WVPDX 2014 - Hammering Responsive Web Design Into Shape](https://reader034.fdocuments.net/reader034/viewer/2022052211/5582ea60d8b42a2c168b45d2/html5/thumbnails/104.jpg)
!
Have Fun! bit.ly/KenSlideShare
!
!
@KenTabor