Hammering Responsive Web Design Into Shape

  • 1,773 views
Uploaded on

This BigDesign 2013 session helps you develop and more importantly debug responsive web design. Why? Because it’s not easy. These are nuts and bolts hands-on concepts to help you get through one of …

This BigDesign 2013 session helps you develop and more importantly debug responsive web design. Why? Because it’s not easy. These are nuts and bolts hands-on concepts to help you get through one of the most difficult things we can tackle building websites and webapps.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,773
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
5
Comments
1
Likes
1

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