• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hammering Responsive Web Design Into Shape
 

Hammering Responsive Web Design Into Shape

on

  • 1,683 views

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

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.

Statistics

Views

Total Views
1,683
Views on SlideShare
1,491
Embed Views
192

Actions

Likes
1
Downloads
5
Comments
1

2 Embeds 192

http://localhost 188
https://twitter.com 4

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

11 of 1 previous next

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

    Hammering Responsive Web Design Into Shape Hammering Responsive Web Design Into Shape Presentation Transcript

    • 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/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, 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 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: 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-You bit.ly/KenBigD13 @KenTabor Thursday, October 17, 13