Upload
ken-tabor
View
1.626
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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
Citation preview
!
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