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, October 17, 13

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

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

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 it

Thursday, October 17, 13

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

Responsive Testing Repo

github.com/mattkersley/Responsive-Design-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, 13

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.js>"</script>')

Thursday, October 17, 13

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

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

Sass Makes It Look Good

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

Thursday, October 17, 13

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

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, October 17, 13

Questions?

Thursday, October 17, 13

Thank-Youbit.ly/KenBigD13

@KenTabor

Thursday, October 17, 13