wvpdx 2014 - hammering responsive web design into shape

!

Hammering Responsive Web Design Into Shape

!

!

@KenTabor

Visionary

bit.ly/KenSlideShare

Adapt Respond Overcome

“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

“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

I figure you already buy into responsive, adaptive, or fluid

design

Let’s focus on the challenge of RWD - testing against a

multitude of form-factors

Production servers are sweet for users

Production servers are a drag for testing

Get your own server

Install Apache

Win7?

Download the installer at httpd.apache.org

OS X?

Apache is already on your MacBook

Apache configuration is not ideal out of the box

Let’s tell Apache from where to serve your files

Edit what? httpd.conf Where?

c:\apache2\conf

/etc/apache2/

#Before DocumentRoot “/Library/WebServer/Documents” !

#After DocumentRoot “/Users/ken/trees”

#Before <Directory “/Library/WebServer/Documents”>!

#After<Directory “/Users/ken/trees”>

After editing httpd.conf restart Apache

Localhost, the best host ❤️

Rapid turn around and absolute control

Level Up

Leapfrog your peers?

Gain advantage over the competition?

Serve your teammates?

Share with the community?

Will the mobile browser on phones and tablets hit our

work OS X laptop?

Yes! And it’s fantastic!

Laptop is on wifi

iPhone is on wifi

Shared network is easiest

System Preferences

Network

http://192.168.0.244

Phone or tablet browser hits the laptop URL

Tickles Apache to serve

Laptop + Devices => #Joy

Will the mobile browser on phones and tablets hit our

work Win7 laptop?

Laptop is on wifi

iPhone is on wifi

Shared network is easiest

Firewall turned off

Phone or tablet browser hits the laptop URL

Tickles Apache to serve

Open a Command Prompt

“ipconfig” Look for ip address

Expert pro-tip: Apache web server “Virtual Host”

This is optional

Adds power-up bonus points

Maps (a folder) /Users/ken/trees/AnnaSpellingWords

to (a URL) www.annaspellingwords.local

Edit: httpd-vhosts.conf Where?

c:\apache2\conf\extra

/etc/apache2/extra

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

Edit what? httpd.conf Where?

c:\apache2\conf

/etc/apache2/

# Virtual hosts Include /private/etc/apache2/extra/httpd-vhosts.conf

Edit: hosts Where?

\windows\system32\drivers\etc

/etc

127.0.0.1 annaspellingwords.local

When you’re back home and in the lab enjoy a coffee

Experiment and have fun

Who is “Ken Tabor?”

I’m a product engineer

at Sabre building TripCase

Internet Inspirations

mediaqueri.es

responsivedesign.is

html5up.net

responsive.is

Responsive Testing Tool

Easily preview your site given typical device resolutions

Runs on localhost for convenience & security

github.com/mattkersley/Responsive-Design-Testing

ResponsizerJS

Drop it into your web site

Helps resize browser when matching device sizes

github.com/KDawg/Responsizer.js

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

Can’t find the right tool?

Then build it and share!

How big are your users?

How do we know the screen sizes and devices our

customers have?

Using Google Analytics?

You have a wealth of data Draw reports on it

Screen Size

Device Brand

O/S Name & Version

Browser Type

Using this data informs your interface design with fact-based

reality

Surviving CSS by thriving with Sass

sass-lang.com

Lovely syntactic sugar

Compiles to CSS

Makes life more joyful

$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%; }}

Nested media queries

Expressive variables

More rational looking

Breakpoint

breakpoint-sass.com

$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%; }}

Fun with PhantomJS

phantomjs.org Headless Webkit browser

phantomjs.org/download.html

brew install phantomjs

Take screen shots of websites

Record at varying device sizes

Needs some JavaScript coding to be the awesome

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

Script could take parameters:

width and height

url

picture filename

ImageMagick processing

imagemagick.org Selection of command-line image processing tools

www.imagemagick.org/script/binary-releases.php

brew install imagemagick

Compare two images

Produce a third one

“Annotates distortions”

XOR Bitwise Operator

0 XOR 0 = false 0 XOR 1 = true 1 XOR 0 = true 1 XOR 1 = false

compare image1.png image2.png image3.png

Automate this

Collect visual history

Detect design divergence

Responses?

!

Have Fun! bit.ly/KenSlideShare

!

!

@KenTabor