Sticks,
Spit, &
Duct Tape

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
• text-align: justify
• Flexbox
• CSS3 Grid Template Layout

Float

.item1 {
    float: left;
    width: 50%; 
}
.item2 {
    float: left;
    width: 50%; 
}

Demo

Float awesomeness

• Easy to wrap
• Very flexible
• Align left AND right sides
• Fully supported in all browsers

Float problems

• No height
• Needs clearfix or extra markup

display: table-cell;

.parent {
    display: table;
}
.item1 {
    display: table-cell;
}
.item2 {
    display: table-cell;
}

Demo

display: table-cell awesomeness

• Matching heights
• Vertical align: middle;
• Fully supported in all browsers

display: table-cell problems

• Widths are a suggestion
• No functional wrapping
• Extra markup (div with display:table;)

text-align: justify;

.parent {
    text-align: justify;
}
.item {
    display: inline-block;
    width: 20%;
}

Demo

text-align: justify awesomeness

• No calculating margins
• Easy wrapping
• Align left, right AND top sides
• Supported in IE8+ and all modern browsers

text-align: justify problems

• Extra markup
• Typographic "issues" from inline-block

Flexbox Syntax

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

Flexbox Syntax

section {
    display:flexbox;
    flex();
}

Flexbox Syntax

section {
    display:flex;
}

IE10 Flexbox Syntax

section {
    display:flexbox;
    flex();
}

Flexbox Explained (sort of)

Flexbox Explained (sort of)

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

Demo

Flexbox awesomeness

• Code is easy to write
• Very flexible
• Vertical and horizontal centering

Flexbox problems

• Three different syntax
• Only supported by IE10+, Chrome, Safari

Sassquatch

CSS3 Grid Layout Template

.header { flow: 'a'; }
.main   { flow: 'b'; }
.sidebar{ flow: 'c'; }
.footer { flow: 'd'; }

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

CSS3 Grid Layout Template

body {
  display:'aaa'
          'bbc'
          'ddd';
}

CSS3 Grid Layout Template

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

Other Tips

box-sizing: border-box

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

CSS3 Calc

.sidebar {
    width: 20em;
}
.main-content {
    width: calc(100% - 20em);
}

EMs in Media Queries

@media onlys screen and (min-width: 48em) {
    /* styles here */
}

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">
  <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"> 
</picture>

Are responsive images available now?

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <span data-src="small.jpg"></span>
    <span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
    <span data-src="large.jpg" data-media="(min-width: 800px)"></span>
    <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</span>

Another Responsive Image Strategy

1. Create the image at 2.2x maximum width needed
2. Save at 0% quality in Photoshop
3. Use for all screen sizes

Media Queries in JS

if (window.matchMedia("(min-width: 48em)").matches) {
	/* the view port is >400 pixels wide */
} else {
	/* the view port is <400 pixels wide */
}

THANK YOU!