WVPDX 2014 - Hammering Responsive Web Design Into Shape

2,164 views
2,043 views

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
2,164
On SlideShare
0
From Embeds
0
Number of Embeds
132
Actions
Shares
0
Downloads
20
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

×