Sticks,
Spit, &
Duct Tape

joshbroton.com  //  @joshbroton

Who am I?

( Josh Broton! )

  • Front-end developer for KidBlog.org
    • Largest educational blog system in the world
    • 3rd largest WP Multisite install in the world (3.25M users)
      (unconfirmed)Largest WP MultiSite with single db
  • joshbroton.com
  • twitter.com/joshbroton


Responsive == ?

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

Why Do Responsive?

How do you access the Internet?

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-only sites need to die.

Desktop vs. Mobile

  • 480 million: Android devices activated
  • 400 million: iOS devices activated
  • 1 billion: Total Windows machines as of June 2012
Android and iOS have been around for 4 years. Windows 1 was released on Nov. 20, 1985.

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

2.5/month vs. 24/day
(user app downloads vs. user site visits)
source: zeldman.com



"But my users..."

11% -> 22%: WVU's mobile traffic doubled within one month.

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

Demo

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

CSS3 Flexbox

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

CSS3 Flexbox

Weird, In-Between Syntax
section {
    display:flexbox;
    flex();
}

CSS3 Flexbox

Newest Syntax
section {
    display:flex;
}

Flexbox Explained (sort of)

Flexbox Explained (sort of)

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

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;
}
Supported by IE8+

CSS3 Calc

.sidebar {
    width: 20em;
}
.main-content {
    width: calc(100% - 20em);
}
Supported by IE9+
Fallback to < IE9 with Modernizr:
.no-csscalc .main-content {}

EMs in Media Queries

@media onlys screen and (min-width: 48em) {
    /* styles here */
}
Supported by IE9+
Fallback to < IE9 by serving single-column layout to legacy browsers

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?

<script src="picturefill.js" type="text/javascript"></script>
  <div data-picture data-alt="A stone face">
  <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="small.jpg" alt="A stone face">
  </noscript>
</div>

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!


Questions?


twitter.com/joshbroton
joshbroton.com