Sticks,
Spit, &
Ducttape

Who am I?

( Josh Broton! )

Who am I?

( Josh Broton! )

Responsive == ?

1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries used to determine layout

Why Do Responsive?

Some Stats

• 55%: US Adults that access the web via mobile devices
• 31%: US Adults whose primary browsing device is mobile
• 2013: The year mobile phones will overtake PCs as the most common Web access devices

Desktop vs. Mobile

Desktop vs. Mobile

• 480 million: Android devices activated
• 400 million: iOS devices activated
• 1 billion: Total Windows machines as of June 2012

More Stats

• 1,038,000,000: smartphones IN USE. (10/16).
• Q3 2012: When smartphones shipments surpassed PC shipments
• 600%: Growth in mobile web traffic since 2010

Impact?

• 61% leave a site if it isn't mobile-ready
• 79% search for another site
• 50% look outside an established relationship
• 48% said if a site didn't work on a mobile device, they didn't feel the company valued their business

Native vs. Mobile

"But my users..."

Staggering Change

Making the Web Responsive

Layout Options

• Floats
• display: table-cell
• FlexBox
• CSS3 Template Layout

Demo

box-sizing: border-box

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Demo

CSS3 Flex Box

section {
    display:box;
    box-orient:horizontal;
}

CSS3 Flex Box

section {
    display:flexbox;
    flex();
}

CSS3 Flex Box

section {
    display:flex;
    box-orient:horizontal;
}

Flexbox Explained (sort of)

Flexbox Explained (sort of)

Demo

justify-content Values

Demo

flex-align Values

Demo

align-content Values

Demo

CSS3 Grid Layout Template

body {
    display: 'a'
             'b'
             'c'
             'd';
}

CSS3 Grid Layout Template

body {
    display: 'a a a'
             'b b c'
             'd d d';
}

CSS3 Grid Layout Template

body {
  display: 'aaaaaaaaaaaa'
           'bbbbbbbbcccc'
           'dddddddddddd';
}

Responsive Images

img srcset

<img alt="The Breakfast Combo"
    src="banner.jpeg"
    srcset="banner-HD.jpeg 2x, 
	banner-phone.jpeg 100w, 
	 banner-phone-HD.jpeg 100w 2x">

Responsive Images

Picture Element

<picture alt="Description of image subject.">
    <source srcset="small.jpg 1x, small-highres.jpg 2x">
    <source media="(min-width: 768px)" 
            srcset="med.jpg 1x, med-highres.jpg 2x"> 
    <source media="(min-width: 1382px)" 
            srcset="large.jpg 1x, large-highres.jpg 2x"> 
    <img src="small.jpg" alt="Description of image subject."> 
</picture>

Are responsive images available now?

<script src="picturefill.js" type="text/javascript"></script>
<div data-picture data-alt="A giant stone face at The Bayon temple">
    <div data-src="small.jpg"></div>
    <div data-src="medium.jpg"     
         data-media="(min-width: 400px)"></div>
    <div data-src="large.jpg"      
         data-media="(min-width: 800px)"></div>
    <div data-src="extralarge.jpg" 
         data-media="(min-width: 1000px)"></div>
    <!-- Fallback content for non-JS browsers. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="A giant stone face">
    </noscript>
</div>

Demo

Media Queries in JS

if (window.matchMedia("(min-width: 400px)").matches) {
	/* the view port is at least 400 pixels wide */
} else {
	/* the view port is less than 400 pixels wide */
}

THANK YOU!