Your SlideShare is downloading. ×
WVPDX 2014 - Hammering Responsive Web Design Into Shape
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WVPDX 2014 - Hammering Responsive Web Design Into Shape

1,547
views

Published on

Presented at WebVisions, Portland 2014 …

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,547
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×