The Next Steps in RWD

Justin Avery @justinavery

ami.responsivedesign.isresponsivedesign.is

1. Responsive Images

2. Improving Performance

3. Responsive Typography

4. Media queries in JavaScript

5. Layout

#1 Responsive Images

#1 Responsive Images

#1 Responsive Images

#1 Responsive Images

#1 Responsive Images

http://moto.oakley.com/

#1 Responsive Images

http://www.ricg.org

#1 Responsive Images

http://www.ricg.org

1. The kilobyte size of the image we were sending over the wire;

2. The physical size of the image we were sending to high DPI devices; and

3. The image crop in the form of art direction for the particular size of the viewport.

#1 Responsive Images

10kB 20kB 45kB 73kB

#1 Responsive Images

200px 400px 800px 1600px

#1 Responsive Images

300px 400px 800px 1600px

600px 800px 1600px 3200px

#1 Responsive Images

http://www.html5rocks.com/en/tutorials/responsive/picture-element/

#1 Responsive Images

http://www.html5rocks.com/en/tutorials/responsive/picture-element/

#1 Responsive Images

picture/srcset

#1 Responsive Images

<img

src="horse-350.jpg"

srcset="horse-350.jpg 350w,

horse-500.jpg 500w,

horse-1024.jpg 1024w,

horse.jpg 2000w"

sizes="(min-width: 64em) 70vw,

(min-width: 37.5em) 95vw,

100vw"

alt="A horse" />

#1 Responsive Images

<img

src="horse-350.jpg"

srcset="horse-350.jpg 350w,

horse-500.jpg 500w,

horse-1024.jpg 1024w,

horse.jpg 2000w"

sizes="(min-width: 64em) 70vw,

(min-width: 37.5em) 95vw,

100vw"

alt="A horse" />

#1 Responsive Images

<img

src="horse-350.jpg"

srcset="horse-350.jpg 350w,

horse-500.jpg 500w,

horse-1024.jpg 1024w,

horse.jpg 2000w"

sizes="(min-width: 64em) 70vw,

(min-width: 37.5em) 95vw,

100vw"

alt="A horse" />

#1 Responsive Images

<img

src="horse-350.jpg"

srcset="horse-350.jpg 350w,

horse-500.jpg 500w,

horse-1024.jpg 1024w,

horse.jpg 2000w"

sizes="(min-width: 64em) 70vw,

(min-width: 37.5em) 95vw,

100vw"

alt="A horse" />

#1 Responsive Images

<img

src="horse-350.jpg"

srcset="horse-350.jpg 350w,

horse-500.jpg 500w,

horse-1024.jpg 1024w,

horse.jpg 2000w"

sizes="(min-width: 64em) 70vw,

(min-width: 37.5em) 95vw,

100vw"

alt="A horse" />

#1 Responsive Images

<img

src="horse-350.jpg"

srcset="horse-350.jpg 350w,

horse-500.jpg 500w,

horse-1024.jpg 1024w,

horse.jpg 2000w"

sizes="(min-width: 64em) 70vw,

(min-width: 37.5em) 95vw,

100vw"

alt="A horse" />

#1 Responsive Images

<img

src="horse-350.jpg"

srcset="horse-350.jpg 350w,

horse-500.jpg 500w,

horse-1024.jpg 1024w,

horse.jpg 2000w"

sizes="(min-width: 64em) 70vw,

(min-width: 37.5em) 95vw,

100vw"

alt="A horse" />

#1 Responsive Images

<img

src="horse-350.jpg"

srcset="horse-350.jpg 350w,

horse-500.jpg 500w,

horse-1024.jpg 1024w,

horse.jpg 2000w"

sizes="(min-width: 64em) 70vw,

(min-width: 37.5em) 95vw,

100vw"

alt="A horse" />

#1 Responsive Images

<img

src="horse-350.jpg"

srcset="horse-350.jpg 350w,

horse-500.jpg 500w,

horse-1024.jpg 1024w,

horse.jpg 2000w"

sizes="(min-width: 64em) 70vw,

(min-width: 37.5em) 95vw,

100vw"

alt="A horse" />

#1 Responsive Images

#1 Responsive Images

#1 Responsive Images

<img

src=""

srcset="horse-350.jpg 350w,

horse-500.jpg 500w,

horse-1024.jpg 1024w,

horse.jpg 2000w"

sizes="(min-width: 64em) 70vw,

(min-width: 37.5em) 95vw,

100vw"

alt="A horse" />

#1 Responsive Images

Things to consider

CSS Specific Images

@media & background-image

http://caniuse.com/#feat=css-image-set

#1 Responsive Images

Basics

#1 Responsive Images

• Think about whether you really need to include an image. Is it telling part of the story? Is the image core content, or is it decorative. One less image will mean a faster load time.

• Have you optimised images using ImageOptim? • Have you set expire headers for your images on your

server or .htaccess file? • PictureFill provides polyfill support for picture.

#1 Responsive Images

Advanced

#1 Responsive Images

• Lazy Load your images using Lazy Load Plugin jQuery • Use HTMLImageElement.Sizes and HTMLPictureElement for feature detection. This is shipped within Modernizr if you are already using it for feature detection.

#2 Improving Performance

#2 Improving Performance

#2 Improving Performance

http://speedcure.com

#2 Improving Performance

http://www.sitespeed.io/

#2 Improving Performance

https://github.com/addyosmani/grunt-uncss

#2 Improving Performance

https://github.com/addyosmani/grunt-uncss

#2 Improving Performance

https://unused-css.com

#2 Improving Performance

Critical CSS

#2 Improving Performance

#2 Improving Performance

#2 Improving Performance

• Capture all styles visible for the first

paint (imagine a screen shot)

• Move these into <style> within the

<head>

• Remove @font-face & background url

references

• Call CSS with Javascript Asynchronously

#2 Improving Performance

<script>

function loadCSS( href, before, media ){

"use strict";

var ss = window.document.createElement( "link" );

var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];

var sheets = window.document.styleSheets;

ss.rel = "stylesheet";

ss.href = href;

ss.media = "only x";

ref.parentNode.insertBefore( ss, ref );

function toggleMedia(){

var defined;

for( var i = 0; i < sheets.length; i++ ){

if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){

defined = true;

}

}

if( defined ){

ss.media = media || "all";

}

else {

setTimeout( toggleMedia );

}

}

toggleMedia();

return ss;

}

loadCSS( '/css/main.css' );

</script>

<noscript><link href="/css/main.css" rel="stylesheet"></noscript>

#2 Improving Performance

<script>

function loadCSS( href, before, media ){

"use strict";

var ss = window.document.createElement( "link" );

var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];

var sheets = window.document.styleSheets;

ss.rel = "stylesheet";

ss.href = href;

ss.media = "only x";

ref.parentNode.insertBefore( ss, ref );

function toggleMedia(){

var defined;

for( var i = 0; i < sheets.length; i++ ){

if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){

defined = true;

}

}

if( defined ){

ss.media = media || "all";

}

else {

setTimeout( toggleMedia );

}

}

toggleMedia();

return ss;

}

loadCSS( '/css/main.css' );

</script>

<noscript><link href="/css/main.css" rel="stylesheet"></noscript>

#2 Improving Performance

ss.media = media || "all";

}

else {

setTimeout( toggleMedia );

}

}

toggleMedia();

return ss;

}

loadCSS( '/css/main.css' );

</script>

<noscript><link href="/css/main.css" rel="stylesheet"></noscript>

#2 Improving Performance

#2 Improving Performance

https://github.com/filamentgroup/grunt-criticalcss

#2 Improving Performance

https://github.com/pocketjoso/penthouse

#2 Improving Performance

https://github.com/addyosmani/critical-path-css-demo

#2 Improving Performance

http://jonassebastianohlsson.com/criticalpathcssgenerator/

Can also user Sass to create our Critical CSS manually/

automatic.

#2 Improving Performance

https://css-tricks.com/authoring-critical-fold-css/

#2 Improving Performance

https://css-tricks.com/authoring-critical-fold-css/

#2 Improving Performance

https://css-tricks.com/authoring-critical-fold-css/

#2 Improving Performance

1. https://github.com/at-import/jacket 2. https://github.com/BPScott/breakup 3. https://gist.github.com/benedfit/46da533805566141c42f

Critical CSS with Wordpress

#2 Improving Performance

#2 Improving Performance

Critical CSS with Wordpress

#2 Improving Performance

Critical CSS with Wordpress

#2 Improving Performance

Basics

#2 Improving Performance

• Enable GZIPPing for files & set expire headers for all static content

• Lazy Load: a jQuery plugin that loads images when approaching the viewport or after a certain timeframe.

#2 Improving Performance

Advanced

#2 Improving Performance

• Set up Fastly or Cloudflare. • Enable SPDY for http2 enabled browsers to take advantage

of HTTP2 features like parallel http requests instead of synchronous. CloudFlare offer this for paid accounts.

• Social Count allows for conditional loading of your Social Icons.

• Ajax Include Pattern that will load content snippets from either a data-before, data-after data-replace attribute.

#2 Improving Performance

#3 Responsive Typography

#3 Responsive Typography

body {font-size: 100%;}

#3 Responsive Typography

body {font-size: 100%;} .by-line {font-size: 0.8rem;}

#3 Responsive Typography

:lang(de) article { max-width: 30em;}

#3 Responsive Typography

FOUT

#3 Responsive Typography

http://www.w3.org/blog/CSS/2015/06/22/minutes-new-york-f2f-2015-05-20-iii/

• Resolved: accept font-display-thing-whatever-loading property with four values to be renamed later: block | swap | fallback | optional

• block shows blank, swaps in fallback at 3s, swaps in real font whenever it loads

• swap shows fallback, swaps in real font whenever it loads • fallback shows fallback, swaps in real font if it loads before

3s • optional shows real font if it loads from cache, otherwise

shows fallback; optional allows UA to not continue loading the font for the next time

FontFace Observer

#3 Responsive Typography

https://github.com/bramstein/fontfaceobserver

FOUT

#3 Responsive Typography

#3 Responsive Typography

Heading @mixin

#3 Responsive Typography

Headings

#3 Responsive Typography

@include heading-1

#3 Responsive Typography

@include heading-1

#3 Responsive Typography

Basics

#3 Responsive Typography

• Base your font on 100% • Work in relative EM units • Set your margins to your line-height to maintain vertical

rhythm

#3 Responsive Typography

Advanced

#3 Responsive Typography

• Utilise Basket.js (http://addyosmani.github.io/basket.js/)

#3 Responsive Typography

#4 Media Queries in Javascript

#4 Media Queries in Javascript

http://www.simplestatemanager.com/

http://wicky.nillia.ms/enquire.js/

matchMedia()

#4 Media Queries in Javascript

http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/

#4 Media Queries in Javascript

http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/

getActiveMQ.js

#4 Media Queries in Javascript

https://gist.github.com/aarongustafson/a0558c185264355df359

getActiveMQ.js

#4 Media Queries in Javascript

<div id="getActiveMQ-watcher"></div>

#4 Media Queries in Javascript

watchResize()

#4 Media Queries in Javascript

https://gist.github.com/aarongustafson/4157402#file-watchresize-js

Basics

#4 Media Queries in Javascript

• Forget about javascript for different viewports. Provide content and website functions to users in a way they can access it across all viewports. We should never need javascript.

#4 Media Queries in Javascript

Advanced

#4 Media Queries in Javascript

• Extend getActiveMQ method by using Breakup as a predefined list of media queries and automating the creation of the list of font-families for #getActiveMQ-watcher

#4 Media Queries in Javascript

https://github.com/BPScott/breakup

#5 Layouts

#5 Layouts

The mighty float

#5 Layouts

#5 Layouts

#5 Layouts

#5 Layouts

#5 Layouts

#5 Layouts

#5 Layouts

#5 Layouts

Flexbox for Page Layout

#5 Layouts

#5 Layouts

#5 Layouts

#5 Layouts

Basics

#5 Layouts

• Set up a basic grid with floats and nth-child.

#5 Layouts

Advanced

#5 Layouts

• Add sprinkles of flexy-ness • Check out Haydon Pickering’s crazy nth-child adventures

(http://alistapart.com/article/quantity-queries-for-css)

#5 Layouts

“The ultimate RWD technique is to start off by…

…not using any advanced RWD techniques. That's it.

Start from the basics and go from there. Start with

structured content and build your way up. Only add a

breakpoint when the design breaks and the content

dictates it and... that's it.”

Thank you

@justinavery