Presented at WebVisions, Portland 2014 This talk isn’t about deciding if responsive web design is a good idea or worth pursuing. We’re assuming you’ve already made up your mind that it is. This is a session dedicated to helping you develop, and more importantly debug, RWD. Why? Because it’s not easy! The speaker will share nuts-and-bolts concepts helping audience members more safely navigate one of the most difficult things we tackle - building websites that respond to a world of device sizes. In this energetic talk attendees will see real-time demos and illustrative slides serving an audience of technically minded designers by reviewing practical topics such as: • Resources for pouring your pages into simulated device screen sizes forgoing expensive hardware purchases as long as possible • Reviewing reasons for setting up a web server on Win7 and OS X laptops for emulating production environments for quicker work iterations • Demonstrating better CSS through Sass showing cleaner looking @media rules offering more easily maintained RWD styles • Showing an experimental tool automatically mass-producing website screenshots of multiple sizes using NodeJS and PhantomJS

1. !
Hammering Responsive
Web Design Into Shape
!
!
@KenTabor

2. Visionary

4. bit.ly/KenSlideShare

5. Adapt Respond Overcome

6. “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

7. “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

8. I figure you already buy into
responsive, adaptive, or fluid
design

9. Let’s focus on the challenge of
RWD - testing against a
multitude of form-factors

10. Production servers are sweet
for users

11. Production servers are a drag
for testing

12. Get your own server
Install Apache

13. Win7?
Download the installer at
httpd.apache.org

14. OS X?
Apache is already on your
MacBook

17. Apache configuration is not
ideal out of the box
Let’s tell Apache from where
to serve your files

18. Edit what? httpd.conf
Where?
c:apache2conf
/etc/apache2/

19. #Before
DocumentRoot “/Library/WebServer/
Documents”
!
#After
DocumentRoot “/Users/ken/trees”

20. #Before
<Directory “/Library/WebServer/
Documents”>
!
#After
<Directory “/Users/ken/trees”>

21. After editing httpd.conf
restart Apache

23. Localhost, the best host ❤️
Rapid turn around and
absolute control

24. Level Up

25. Leapfrog your peers?
Gain advantage over the
competition?

26. Serve your teammates?
Share with the community?

27. Will the mobile browser on
phones and tablets hit our
work OS X laptop?

28. Yes! And it’s fantastic!

29. Laptop is on wifi
iPhone is on wifi
Shared network is easiest

30. System Preferences
Network

32. http://192.168.0.244

33. Phone or tablet browser hits
the laptop URL
Tickles Apache to serve

36. Laptop + Devices => #Joy

37. Will the mobile browser on
phones and tablets hit our
work Win7 laptop?

38. Laptop is on wifi
iPhone is on wifi
Shared network is easiest

39. Firewall turned off
Phone or tablet browser hits
the laptop URL
Tickles Apache to serve

40. Open a Command Prompt
“ipconfig”
Look for ip address

43. Expert pro-tip:Apache web
server “Virtual Host”

44. This is optional
Adds power-up bonus points

45. Maps (a folder)
/Users/ken/trees/AnnaSpellingWords
to (a URL)
www.annaspellingwords.local

46. Edit: httpd-vhosts.conf
Where?
c:apache2confextra
/etc/apache2/extra

47. <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>

48. Edit what? httpd.conf
Where?
c:apache2conf
/etc/apache2/

49. # Virtual hosts
Include /private/etc/apache2/extra/
httpd-vhosts.conf

50. Edit: hosts
Where?
windowssystem32driversetc
/etc

51. 127.0.0.1 annaspellingwords.local

53. When you’re back home and in
the lab enjoy a coffee
Experiment and have fun

54. Who is “Ken Tabor?”

55. I’m a product engineer
at Sabre building TripCase

57. Internet Inspirations

58. mediaqueri.es

59. responsivedesign.is

60. html5up.net

61. responsive.is

64. Responsive Testing Tool

65. Easily preview your site given
typical device resolutions
Runs on localhost for
convenience & security

67. github.com/mattkersley/
Responsive-Design-Testing

68. ResponsizerJS

69. Drop it into your web site
Helps resize browser when
matching device sizes

70. github.com/KDawg/
Responsizer.js

71. <script src=“resources/code/
Responsizer.js”
type=“text/javascript”>
</script>

72. Can’t find the right tool?
Then build it and share!

73. How big are your users?

74. How do we know the screen
sizes and devices our
customers have?

75. Using Google Analytics?
You have a wealth of data
Draw reports on it

77. Screen Size
Device Brand
O/S Name &Version
Browser Type

78. Using this data informs your
interface design with fact-based
reality

79. Surviving CSS by thriving with
Sass

80. sass-lang.com

81. Lovely syntactic sugar
Compiles to CSS
Makes life more joyful

82. $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%;
}
}

83. Nested media queries
Expressive variables
More rational looking

84. Breakpoint

85. breakpoint-sass.com

86. $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%;
}
}

87. Fun with PhantomJS

88. phantomjs.org
Headless Webkit browser

89. phantomjs.org/download.html
brew install phantomjs

90. Take screen shots of websites
Record at varying device sizes

91. Needs some JavaScript
coding to be the awesome

92. 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

93. Script could take parameters:
width and height
url
picture filename

94. ImageMagick processing

95. imagemagick.org
Selection of command-line
image processing tools

96. www.imagemagick.org/script/
binary-releases.php
brew install imagemagick

97. Compare two images
Produce a third one
“Annotates distortions”

98. XOR Bitwise Operator

99. 0 XOR 0 = false
0 XOR 1 = true
1 XOR 0 = true
1 XOR 1 = false

100. compare image1.png
image2.png image3.png

102. Automate this
Collect visual history
Detect design divergence

103. Responses?

104. !
Have Fun!
bit.ly/KenSlideShare
!
!
@KenTabor