Your SlideShare is downloading. ×
0
Hammering Responsive
Web Design Into Shape
@KenTabor
Thursday, October 17, 13
Shared

bit.ly/KenBigD13

Thursday, October 17, 13
I’m Not Selling RWD

Assuming you already buy into
responsive, fluid, what-have-you, design

Thursday, October 17, 13
Challenge: Many Devices

Now let’s focus on the challenge of
testing a multitude of form-factors

Thursday, October 17, 13
Freedom!

Production servers are a drag for testing

Thursday, October 17, 13
Install a Web Server

Get you some Apache for starters
Lots of solid how-to tutorials online

Thursday, October 17, 13
Apache Setup

Tell Apache where to serve files from

Thursday, October 17, 13
Editing Config Files

NotePad++ on Win
TextWrangler on OSX

Thursday, October 17, 13
httpd.conf

DocumentRoot "/Users/ken/trees"
<Directory "/Users/ken/trees">

Thursday, October 17, 13
httpd-vhosts.conf

<VirtualHost *:80>
DocumentRoot "/Users/ken/trees"
ServerName localhost
</VirtualHost>

Thursday, Octob...
Localhost, the Best Host

Rapid turn around and total control

Thursday, October 17, 13
Laptop + Device => #Joy

Can we attach mobile devices to our
development laptop? Yes! Apache helps.

Thursday, October 17,...
Devices + Localhost

Laptop is hard-wired to router
iPad and iPhone both on wifi router
Flat & common topology is key

Thur...
System Prefs => Sharing

Thursday, October 17, 13
iPhone Calling MacBook

http://Kens-MacBook-Air.local

Thursday, October 17, 13
Browsing the File Server

Choose files as per Apache file sharing
including your website/app

Thursday, October 17, 13
iPhone Perspective?

Thursday, October 17, 13
Thursday, October 17, 13
Advanced: OSX Hotspot

Create a wireless hotspot allowing
mobile devices direct connect to laptop

Thursday, October 17, 1...
Win7 Device Connect

Easy stuff, just flatten the connections

Thursday, October 17, 13
Devices + Localhost

Laptop is hard-wired to router
iPad and iPhone both on wifi router

Thursday, October 17, 13
Connection

Laptop has Apache, firewall off
Website files in VirtualHost directory
Get the ip address, iPhone and iPad hit i...
Thursday, October 17, 13
Who Am I?

I’m a front-end product engineer
At Sabre Holdings building TripCase

Thursday, October 17, 13
Thursday, October 17, 13
Internet Inspirations

mediaqueri.es

Thursday, October 17, 13
Internet Resources

responsive.is

Thursday, October 17, 13
responsive.is

Thursday, October 17, 13
responsive.is

Thursday, October 17, 13
Internet Resources

screenqueri.es

Thursday, October 17, 13
screenqueri.es

Thursday, October 17, 13
screenqueri.es

Thursday, October 17, 13
Responsive Testing Repo

Easily preview your site on form factors
from a convenient localhost page

Thursday, October 17, ...
Responsive Testing Repo

github.com/mattkersley/ResponsiveDesign-Testing

Thursday, October 17, 13
Localhost Install

Thursday, October 17, 13
ResponsizerJS

Drop it into your web site helping resize
browser window when matching devices

Thursday, October 17, 13
Responsizer GitHub

github.com/KDawg/Responsizer.js

Thursday, October 17, 13
Responsizer index.html

<script src="resources/code/Responsizer.js"
type="text/javascript"></script>

Thursday, October 17...
Responsizer Measuring

Inject it into any site to learn from them

Thursday, October 17, 13
Injecting Responsizer

Google Chrome
View => Developer Tools => JavaScript
Console

Thursday, October 17, 13
Injecting Responsizer

$('body').append('<script type="text/javascript"
src="http://localhost/Responsizer.js/
Responsizer....
How Big Are Your Users?

How do we know what size devices our
customers use?

Thursday, October 17, 13
Google Analytics

If you’re using Google Analytics you have
a wealth of information to report

Thursday, October 17, 13
Analytics Dashboard

Thursday, October 17, 13
Analytics Informs

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

Thursday, October 17, 13
Sass is CSS Done Better

sass-lang.com

Thursday, October 17, 13
Sass - What is it?

Meta language, lovely syntactic sugar,
compiles to CSS, makes dev life joyful

Thursday, October 17, 1...
Sass Media Queries
.popup {
left: 25%;
position: fixed;
width: 50%;
z-index: 20;
@media screen and (max-width: 320px) {
le...
Sass Makes It Look Good

The media query nesting Sass affords
leads to organized and rational code

Thursday, October 17, ...
Fun with PhantomJS

phantomjs.org
Headless Webkit browser

Thursday, October 17, 13
Imagemagick Processing

imagemagick.org
Selection of command-line image tools

Thursday, October 17, 13
Install Both Tools

brew install phantomjs
brew install imagemagick

Thursday, October 17, 13
PhantomJS Photos

Take screenshots vs online and localhost
See what sites look like on devices

Thursday, October 17, 13
PhantomJS - screenie.js
var webpage = require('webpage');
var page;
page = webpage.create();
page.viewportSize = {width: 1...
Imagemagick Comparing

Use it to compare two images producing
a third showing what’s different

Thursday, October 17, 13
Revealing Changes

compare image1.png image2.png
image3.png

Thursday, October 17, 13
Compare Design Drift

Thursday, October 17, 13
imagemagick insanity

Can this be automated?
Does visual history help debugging?
Can we detect design diverging?

Thursday...
Questions?

Thursday, October 17, 13
Thank-You

bit.ly/KenBigD13
@KenTabor
Thursday, October 17, 13
Upcoming SlideShare
Loading in...5
×

Hammering Responsive Web Design Into Shape

2,001

Published 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 the most difficult things we can tackle building websites and webapps.

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
2,001
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Hammering Responsive Web Design Into Shape"

  1. 1. Hammering Responsive Web Design Into Shape @KenTabor Thursday, October 17, 13
  2. 2. Shared bit.ly/KenBigD13 Thursday, October 17, 13
  3. 3. I’m Not Selling RWD Assuming you already buy into responsive, fluid, what-have-you, design Thursday, October 17, 13
  4. 4. Challenge: Many Devices Now let’s focus on the challenge of testing a multitude of form-factors Thursday, October 17, 13
  5. 5. Freedom! Production servers are a drag for testing Thursday, October 17, 13
  6. 6. Install a Web Server Get you some Apache for starters Lots of solid how-to tutorials online Thursday, October 17, 13
  7. 7. Apache Setup Tell Apache where to serve files from Thursday, October 17, 13
  8. 8. Editing Config Files NotePad++ on Win TextWrangler on OSX Thursday, October 17, 13
  9. 9. httpd.conf DocumentRoot "/Users/ken/trees" <Directory "/Users/ken/trees"> Thursday, October 17, 13
  10. 10. httpd-vhosts.conf <VirtualHost *:80> DocumentRoot "/Users/ken/trees" ServerName localhost </VirtualHost> Thursday, October 17, 13
  11. 11. Localhost, the Best Host Rapid turn around and total control Thursday, October 17, 13
  12. 12. Laptop + Device => #Joy Can we attach mobile devices to our development laptop? Yes! Apache helps. Thursday, October 17, 13
  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. 14. System Prefs => Sharing Thursday, October 17, 13
  15. 15. iPhone Calling MacBook http://Kens-MacBook-Air.local Thursday, October 17, 13
  16. 16. Browsing the File Server Choose files as per Apache file sharing including your website/app Thursday, October 17, 13
  17. 17. iPhone Perspective? Thursday, October 17, 13
  18. 18. Thursday, October 17, 13
  19. 19. Advanced: OSX Hotspot Create a wireless hotspot allowing mobile devices direct connect to laptop Thursday, October 17, 13
  20. 20. Win7 Device Connect Easy stuff, just flatten the connections Thursday, October 17, 13
  21. 21. Devices + Localhost Laptop is hard-wired to router iPad and iPhone both on wifi router Thursday, October 17, 13
  22. 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. 23. Thursday, October 17, 13
  24. 24. Who Am I? I’m a front-end product engineer At Sabre Holdings building TripCase Thursday, October 17, 13
  25. 25. Thursday, October 17, 13
  26. 26. Internet Inspirations mediaqueri.es Thursday, October 17, 13
  27. 27. Internet Resources responsive.is Thursday, October 17, 13
  28. 28. responsive.is Thursday, October 17, 13
  29. 29. responsive.is Thursday, October 17, 13
  30. 30. Internet Resources screenqueri.es Thursday, October 17, 13
  31. 31. screenqueri.es Thursday, October 17, 13
  32. 32. screenqueri.es Thursday, October 17, 13
  33. 33. Responsive Testing Repo Easily preview your site on form factors from a convenient localhost page Thursday, October 17, 13
  34. 34. Responsive Testing Repo github.com/mattkersley/ResponsiveDesign-Testing Thursday, October 17, 13
  35. 35. Localhost Install Thursday, October 17, 13
  36. 36. ResponsizerJS Drop it into your web site helping resize browser window when matching devices Thursday, October 17, 13
  37. 37. Responsizer GitHub github.com/KDawg/Responsizer.js Thursday, October 17, 13
  38. 38. Responsizer index.html <script src="resources/code/Responsizer.js" type="text/javascript"></script> Thursday, October 17, 13
  39. 39. Responsizer Measuring Inject it into any site to learn from them Thursday, October 17, 13
  40. 40. Injecting Responsizer Google Chrome View => Developer Tools => JavaScript Console Thursday, October 17, 13
  41. 41. Injecting Responsizer $('body').append('<script type="text/javascript" src="http://localhost/Responsizer.js/ Responsizer.js>"</script>') Thursday, October 17, 13
  42. 42. How Big Are Your Users? How do we know what size devices our customers use? Thursday, October 17, 13
  43. 43. Google Analytics If you’re using Google Analytics you have a wealth of information to report Thursday, October 17, 13
  44. 44. Analytics Dashboard Thursday, October 17, 13
  45. 45. Analytics Informs Using this data informs your interface design with fact-based reality Thursday, October 17, 13
  46. 46. Sass is CSS Done Better sass-lang.com Thursday, October 17, 13
  47. 47. Sass - What is it? Meta language, lovely syntactic sugar, compiles to CSS, makes dev life joyful Thursday, October 17, 13
  48. 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. 49. Sass Makes It Look Good The media query nesting Sass affords leads to organized and rational code Thursday, October 17, 13
  50. 50. Fun with PhantomJS phantomjs.org Headless Webkit browser Thursday, October 17, 13
  51. 51. Imagemagick Processing imagemagick.org Selection of command-line image tools Thursday, October 17, 13
  52. 52. Install Both Tools brew install phantomjs brew install imagemagick Thursday, October 17, 13
  53. 53. PhantomJS Photos Take screenshots vs online and localhost See what sites look like on devices Thursday, October 17, 13
  54. 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. 55. Imagemagick Comparing Use it to compare two images producing a third showing what’s different Thursday, October 17, 13
  56. 56. Revealing Changes compare image1.png image2.png image3.png Thursday, October 17, 13
  57. 57. Compare Design Drift Thursday, October 17, 13
  58. 58. imagemagick insanity Can this be automated? Does visual history help debugging? Can we detect design diverging? Thursday, October 17, 13
  59. 59. Questions? Thursday, October 17, 13
  60. 60. Thank-You bit.ly/KenBigD13 @KenTabor Thursday, October 17, 13
  1. A particular slide catching your eye?

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

×