!
Hammering Responsive
Web Design Into Shape	

!
!
@KenTabor
Visionary
bit.ly/KenSlideShare
Adapt Respond Overcome
“Recently, an emergent discipline called
‘responsive architecture’ has begun
asking how physical spaces can respond
to the...
“Rather than tailoring disconnected
designs to each of an ever-increasing
number of web devices, we can treat
them as face...
I figure you already buy into
responsive, adaptive, or fluid
design
Let’s focus on the challenge of
RWD - testing against a
multitude of form-factors
Production servers are sweet
for users
Production servers are a drag
for testing
Get your own server	

Install Apache
Win7? 	

Download the installer at
httpd.apache.org
OS X?	

Apache is already on your
MacBook
Apache configuration is not
ideal out of the box	

Let’s tell Apache from where
to serve your files
Edit what? httpd.conf	

Where?	

c:apache2conf	

/etc/apache2/
#Before
DocumentRoot “/Library/WebServer/
Documents”
!
#After
DocumentRoot “/Users/ken/trees”
#Before
<Directory “/Library/WebServer/
Documents”>

!
#After

<Directory “/Users/ken/trees”>
After editing httpd.conf
restart Apache
Localhost, the best host ❤️	

Rapid turn around and
absolute control
Level Up
Leapfrog your peers?	

Gain advantage over the
competition?
Serve your teammates?	

Share with the community?
Will the mobile browser on
phones and tablets hit our
work OS X laptop?
Yes! And it’s fantastic!
Laptop is on wifi	

iPhone is on wifi	

Shared network is easiest
System Preferences	

Network
http://192.168.0.244
Phone or tablet browser hits
the laptop URL	

Tickles Apache to serve
Laptop + Devices => #Joy
Will the mobile browser on
phones and tablets hit our
work Win7 laptop?
Laptop is on wifi	

iPhone is on wifi	

Shared network is easiest
Firewall turned off	

Phone or tablet browser hits
the laptop URL 	

Tickles Apache to serve
Open a Command Prompt	

“ipconfig”
Look for ip address
Expert pro-tip:Apache web
server “Virtual Host”
This is optional	

Adds power-up bonus points
Maps (a folder)	

/Users/ken/trees/AnnaSpellingWords	

to (a URL)	

www.annaspellingwords.local
Edit: httpd-vhosts.conf	

Where?	

c:apache2confextra	

/etc/apache2/extra
<VirtualHost *:80>

DocumentRoot “/Users/ken/trees/AnnaSpellingWords”

ServerName annaspellingwords.local
!
<Directory “/U...
Edit what? httpd.conf	

Where?	

c:apache2conf	

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

Where?	

windowssystem32driversetc	

/etc
127.0.0.1 annaspellingwords.local
When you’re back home and in
the lab enjoy a coffee	

Experiment and have fun
Who is “Ken Tabor?”
I’m a product engineer	

at Sabre building TripCase
Internet Inspirations
mediaqueri.es
responsivedesign.is
html5up.net
responsive.is
Responsive Testing Tool
Easily preview your site given
typical device resolutions	

Runs on localhost for
convenience & security
github.com/mattkersley/
Responsive-Design-Testing
ResponsizerJS
Drop it into your web site	

Helps resize browser when
matching device sizes
github.com/KDawg/
Responsizer.js
<script src=“resources/code/
Responsizer.js”
type=“text/javascript”>
</script>
Can’t find the right tool? 	

Then build it and share!
How big are your users?
How do we know the screen
sizes and devices our
customers have?
Using Google Analytics?	

You have a wealth of data	

Draw reports on it
Screen Size	

Device Brand	

O/S Name &Version	

Browser Type
Using this data informs your
interface design with fact-based
reality
Surviving CSS by thriving with
Sass
sass-lang.com
Lovely syntactic sugar	

Compiles to CSS	

Makes life more joyful
$phone-width: 320px;

$laptop-width: 1024px;
!
.popup {

left: 25%;

position: fixed;

width: 50%;

z-index: 20;



@media...
Nested media queries	

Expressive variables	

More rational looking
Breakpoint
breakpoint-sass.com
$phone-width: max-width 320px;

$laptop-width: min-width 1024px;



.popup {

left: 25%;

position: fixed;

width: 50%;

z...
Fun with PhantomJS
phantomjs.org
Headless Webkit browser
phantomjs.org/download.html
brew install phantomjs
Take screen shots of websites	

Record at varying device sizes
Needs some JavaScript
coding to be the awesome
var webpage = require('webpage');

var page;



page = webpage.create();
page.viewportSize = {width: 1024, height: 768};
p...
Script could take parameters: 	

width and height	

url	

picture filename
ImageMagick processing
imagemagick.org
Selection of command-line
image processing tools
www.imagemagick.org/script/
binary-releases.php
brew install imagemagick
Compare two images	

Produce a third one	

“Annotates distortions”
XOR Bitwise Operator
0 XOR 0 = false
0 XOR 1 = true
1 XOR 0 = true
1 XOR 1 = false
compare image1.png
image2.png image3.png
Automate this	

Collect visual history	

Detect design divergence
Responses?
!
Have Fun!
bit.ly/KenSlideShare	

!
!
@KenTabor
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
WVPDX 2014 - Hammering Responsive Web Design Into Shape
Upcoming SlideShare
Loading in...5
×

WVPDX 2014 - Hammering Responsive Web Design Into Shape

1,711

Published on

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

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,711
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

WVPDX 2014 - Hammering Responsive Web Design Into Shape

  1. 1. ! Hammering Responsive Web Design Into Shape ! ! @KenTabor
  2. 2. Visionary
  3. 3. bit.ly/KenSlideShare
  4. 4. Adapt Respond Overcome
  5. 5. “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
  6. 6. “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
  7. 7. I figure you already buy into responsive, adaptive, or fluid design
  8. 8. Let’s focus on the challenge of RWD - testing against a multitude of form-factors
  9. 9. Production servers are sweet for users
  10. 10. Production servers are a drag for testing
  11. 11. Get your own server Install Apache
  12. 12. Win7? Download the installer at httpd.apache.org
  13. 13. OS X? Apache is already on your MacBook
  14. 14. Apache configuration is not ideal out of the box Let’s tell Apache from where to serve your files
  15. 15. Edit what? httpd.conf Where? c:apache2conf /etc/apache2/
  16. 16. #Before DocumentRoot “/Library/WebServer/ Documents” ! #After DocumentRoot “/Users/ken/trees”
  17. 17. #Before <Directory “/Library/WebServer/ Documents”>
 ! #After
 <Directory “/Users/ken/trees”>
  18. 18. After editing httpd.conf restart Apache
  19. 19. Localhost, the best host ❤️ Rapid turn around and absolute control
  20. 20. Level Up
  21. 21. Leapfrog your peers? Gain advantage over the competition?
  22. 22. Serve your teammates? Share with the community?
  23. 23. Will the mobile browser on phones and tablets hit our work OS X laptop?
  24. 24. Yes! And it’s fantastic!
  25. 25. Laptop is on wifi iPhone is on wifi Shared network is easiest
  26. 26. System Preferences Network
  27. 27. http://192.168.0.244
  28. 28. Phone or tablet browser hits the laptop URL Tickles Apache to serve
  29. 29. Laptop + Devices => #Joy
  30. 30. Will the mobile browser on phones and tablets hit our work Win7 laptop?
  31. 31. Laptop is on wifi iPhone is on wifi Shared network is easiest
  32. 32. Firewall turned off Phone or tablet browser hits the laptop URL Tickles Apache to serve
  33. 33. Open a Command Prompt “ipconfig” Look for ip address
  34. 34. Expert pro-tip:Apache web server “Virtual Host”
  35. 35. This is optional Adds power-up bonus points
  36. 36. Maps (a folder) /Users/ken/trees/AnnaSpellingWords to (a URL) www.annaspellingwords.local
  37. 37. Edit: httpd-vhosts.conf Where? c:apache2confextra /etc/apache2/extra
  38. 38. <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>
  39. 39. Edit what? httpd.conf Where? c:apache2conf /etc/apache2/
  40. 40. # Virtual hosts Include /private/etc/apache2/extra/ httpd-vhosts.conf
  41. 41. Edit: hosts Where? windowssystem32driversetc /etc
  42. 42. 127.0.0.1 annaspellingwords.local
  43. 43. When you’re back home and in the lab enjoy a coffee Experiment and have fun
  44. 44. Who is “Ken Tabor?”
  45. 45. I’m a product engineer at Sabre building TripCase
  46. 46. Internet Inspirations
  47. 47. mediaqueri.es
  48. 48. responsivedesign.is
  49. 49. html5up.net
  50. 50. responsive.is
  51. 51. Responsive Testing Tool
  52. 52. Easily preview your site given typical device resolutions Runs on localhost for convenience & security
  53. 53. github.com/mattkersley/ Responsive-Design-Testing
  54. 54. ResponsizerJS
  55. 55. Drop it into your web site Helps resize browser when matching device sizes
  56. 56. github.com/KDawg/ Responsizer.js
  57. 57. <script src=“resources/code/ Responsizer.js” type=“text/javascript”> </script>
  58. 58. Can’t find the right tool? Then build it and share!
  59. 59. How big are your users?
  60. 60. How do we know the screen sizes and devices our customers have?
  61. 61. Using Google Analytics? You have a wealth of data Draw reports on it
  62. 62. Screen Size Device Brand O/S Name &Version Browser Type
  63. 63. Using this data informs your interface design with fact-based reality
  64. 64. Surviving CSS by thriving with Sass
  65. 65. sass-lang.com
  66. 66. Lovely syntactic sugar Compiles to CSS Makes life more joyful
  67. 67. $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%;
 }
 }
  68. 68. Nested media queries Expressive variables More rational looking
  69. 69. Breakpoint
  70. 70. breakpoint-sass.com
  71. 71. $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%;
 }
 }
  72. 72. Fun with PhantomJS
  73. 73. phantomjs.org Headless Webkit browser
  74. 74. phantomjs.org/download.html brew install phantomjs
  75. 75. Take screen shots of websites Record at varying device sizes
  76. 76. Needs some JavaScript coding to be the awesome
  77. 77. 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
  78. 78. Script could take parameters: width and height url picture filename
  79. 79. ImageMagick processing
  80. 80. imagemagick.org Selection of command-line image processing tools
  81. 81. www.imagemagick.org/script/ binary-releases.php brew install imagemagick
  82. 82. Compare two images Produce a third one “Annotates distortions”
  83. 83. XOR Bitwise Operator
  84. 84. 0 XOR 0 = false 0 XOR 1 = true 1 XOR 0 = true 1 XOR 1 = false
  85. 85. compare image1.png image2.png image3.png
  86. 86. Automate this Collect visual history Detect design divergence
  87. 87. Responses?
  88. 88. ! Have Fun! bit.ly/KenSlideShare ! ! @KenTabor
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×