WVPDX 2014 - Hammering Responsive Web Design Into Shape
Upcoming SlideShare
Loading in...5
×
 

WVPDX 2014 - Hammering Responsive Web Design Into Shape

on

  • 1,523 views

Presented at WebVisions, Portland 2014 ...

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

Statistics

Views

Total Views
1,523
Views on SlideShare
1,405
Embed Views
118

Actions

Likes
2
Downloads
17
Comments
0

2 Embeds 118

https://twitter.com 116
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WVPDX 2014 - Hammering Responsive Web Design Into Shape WVPDX 2014 - Hammering Responsive Web Design Into Shape Presentation Transcript

  • ! 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:apache2conf /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:apache2confextra /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:apache2conf /etc/apache2/
  • # Virtual hosts Include /private/etc/apache2/extra/ httpd-vhosts.conf
  • Edit: hosts Where? windowssystem32driversetc /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