The document discusses various techniques for testing responsive web design across multiple devices locally, including setting up Apache on a laptop to serve files to connected devices like an iPad or iPhone over WiFi. It recommends tools like Responsizer.js to simulate device sizes in the browser, and PhantomJS and ImageMagick for taking screenshots of a site on different devices and comparing visual differences between versions.

1. Hammering Responsive
Web Design Into Shape
@KenTabor
Thursday, October 17, 13

2. Shared
bit.ly/KenBigD13
Thursday, October 17, 13

3. I’m Not Selling RWD
Assuming you already buy into
responsive, fluid, what-have-you, design
Thursday, October 17, 13

4. Challenge: Many Devices
Now let’s focus on the challenge of
testing a multitude of form-factors
Thursday, October 17, 13

5. Freedom!
Production servers are a drag for testing
Thursday, October 17, 13

6. Install a Web Server
Get you some Apache for starters
Lots of solid how-to tutorials online
Thursday, October 17, 13

7. Apache Setup
Tell Apache where to serve files from
Thursday, October 17, 13

8. Editing Config Files
NotePad++ on Win
TextWrangler on OSX
Thursday, October 17, 13

9. httpd.conf
DocumentRoot "/Users/ken/trees"
<Directory "/Users/ken/trees">
Thursday, October 17, 13

10. httpd-vhosts.conf
<VirtualHost *:80>
DocumentRoot "/Users/ken/trees"
ServerName localhost
</VirtualHost>
Thursday, October 17, 13

11. Localhost, the Best Host
Rapid turn around and total control
Thursday, October 17, 13

12. Laptop + Device => #Joy
Can we attach mobile devices to our
development laptop? Yes! Apache helps.
Thursday, October 17, 13

13. Devices + Localhost
Laptop is hard-wired to router
iPad and iPhone both on wifi router
Flat & common topology is key
Thursday, October 17, 13

14. System Prefs => Sharing
Thursday, October 17, 13

15. iPhone Calling MacBook
http://Kens-MacBook-Air.local
Thursday, October 17, 13

16. Browsing the File Server
Choose files as per Apache file sharing
including your website/app
Thursday, October 17, 13

17. iPhone Perspective?
Thursday, October 17, 13

18. Thursday, October 17, 13

19. Advanced: OSX Hotspot
Create a wireless hotspot allowing
mobile devices direct connect to laptop
Thursday, October 17, 13

20. Win7 Device Connect
Easy stuff, just flatten the connections
Thursday, October 17, 13

21. Devices + Localhost
Laptop is hard-wired to router
iPad and iPhone both on wifi router
Thursday, October 17, 13

22. Connection
Laptop has Apache, firewall off
Website files in VirtualHost directory
Get the ip address, iPhone and iPad hit it
Thursday, October 17, 13

23. Thursday, October 17, 13

24. Who Am I?
I’m a front-end product engineer
At Sabre Holdings building TripCase
Thursday, October 17, 13

25. Thursday, October 17, 13

26. Internet Inspirations
mediaqueri.es
Thursday, October 17, 13

27. Internet Resources
responsive.is
Thursday, October 17, 13

28. responsive.is
Thursday, October 17, 13

29. responsive.is
Thursday, October 17, 13

30. Internet Resources
screenqueri.es
Thursday, October 17, 13

31. screenqueri.es
Thursday, October 17, 13

32. screenqueri.es
Thursday, October 17, 13

33. Responsive Testing Repo
Easily preview your site on form factors
from a convenient localhost page
Thursday, October 17, 13

34. Responsive Testing Repo
github.com/mattkersley/ResponsiveDesign-Testing
Thursday, October 17, 13

35. Localhost Install
Thursday, October 17, 13

36. ResponsizerJS
Drop it into your web site helping resize
browser window when matching devices
Thursday, October 17, 13

37. Responsizer GitHub
github.com/KDawg/Responsizer.js
Thursday, October 17, 13

38. Responsizer index.html
<script src="resources/code/Responsizer.js"
type="text/javascript"></script>
Thursday, October 17, 13

39. Responsizer Measuring
Inject it into any site to learn from them
Thursday, October 17, 13

40. Injecting Responsizer
Google Chrome
View => Developer Tools => JavaScript
Console
Thursday, October 17, 13

41. Injecting Responsizer
$('body').append('<script type="text/javascript"
src="http://localhost/Responsizer.js/
Responsizer.js>"</script>')
Thursday, October 17, 13

42. How Big Are Your Users?
How do we know what size devices our
customers use?
Thursday, October 17, 13

43. Google Analytics
If you’re using Google Analytics you have
a wealth of information to report
Thursday, October 17, 13

44. Analytics Dashboard
Thursday, October 17, 13

45. Analytics Informs
Using this data informs your interface
design with fact-based reality
Thursday, October 17, 13

46. Sass is CSS Done Better
sass-lang.com
Thursday, October 17, 13

47. Sass - What is it?
Meta language, lovely syntactic sugar,
compiles to CSS, makes dev life joyful
Thursday, October 17, 13

48. Sass Media Queries
.popup {
left: 25%;
position: fixed;
width: 50%;
z-index: 20;
@media screen and (max-width: 320px) {
left: 10%;
width: 80%
}
@media screen and (min-width: 1024px) {
font-size: 2em;
left: 15%;
width: 70%;
}
}
Thursday, October 17, 13

49. Sass Makes It Look Good
The media query nesting Sass affords
leads to organized and rational code
Thursday, October 17, 13

50. Fun with PhantomJS
phantomjs.org
Headless Webkit browser
Thursday, October 17, 13

51. Imagemagick Processing
imagemagick.org
Selection of command-line image tools
Thursday, October 17, 13

52. Install Both Tools
brew install phantomjs
brew install imagemagick
Thursday, October 17, 13

53. PhantomJS Photos
Take screenshots vs online and localhost
See what sites look like on devices
Thursday, October 17, 13

54. PhantomJS - screenie.js
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
Thursday, October 17, 13

55. Imagemagick Comparing
Use it to compare two images producing
a third showing what’s different
Thursday, October 17, 13

56. Revealing Changes
compare image1.png image2.png
image3.png
Thursday, October 17, 13

57. Compare Design Drift
Thursday, October 17, 13

58. imagemagick insanity
Can this be automated?
Does visual history help debugging?
Can we detect design diverging?
Thursday, October 17, 13

59. Questions?
Thursday, October 17, 13

60. Thank-You
bit.ly/KenBigD13
@KenTabor
Thursday, October 17, 13