Next Steps in Responsive Design

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

http://moto.oakley.com/

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.

10kB 20kB 45kB 73kB

200px 400px 800px 1600px

300px 400px 800px 1600px

600px 800px 1600px 3200px

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

picture/srcset

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

src="horse-350.jpg"

horse-500.jpg 500w,

horse.jpg 2000w"

100vw"

alt="A horse" />

src="horse-350.jpg"

horse-500.jpg 500w,

horse.jpg 2000w"

100vw"

alt="A horse" />

src="horse-350.jpg"

horse-500.jpg 500w,

horse.jpg 2000w"

100vw"

alt="A horse" />

src="horse-350.jpg"

horse-500.jpg 500w,

horse.jpg 2000w"

100vw"

alt="A horse" />

src="horse-350.jpg"

horse-500.jpg 500w,

horse.jpg 2000w"

100vw"

alt="A horse" />

src="horse-350.jpg"

horse-500.jpg 500w,

horse.jpg 2000w"

100vw"

alt="A horse" />

src="horse-350.jpg"

horse-500.jpg 500w,

horse.jpg 2000w"

100vw"

alt="A horse" />

src="horse-350.jpg"

horse-500.jpg 500w,

horse.jpg 2000w"

100vw"

alt="A horse" />

src=""

horse-500.jpg 500w,

horse.jpg 2000w"

100vw"

alt="A horse" />

Things to consider

CSS Specific Images

@media & background-image

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

Basics

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

Advanced

• 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

http://speedcure.com

http://www.sitespeed.io/

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

https://unused-css.com

Critical CSS

• 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

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>

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

else {

toggleMedia();

return ss;

</script>

else {

toggleMedia();

return ss;

</script>

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

https://github.com/pocketjoso/penthouse

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

http://jonassebastianohlsson.com/criticalpathcssgenerator/

Can also user Sass to create our Critical CSS manually/

automatic.

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

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

Critical CSS with Wordpress

Basics

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

Advanced

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

#3 Responsive Typography

body {font-size: 100%;}

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

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

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

https://github.com/bramstein/fontfaceobserver

Heading @mixin

Headings

@include heading-1

Basics

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

rhythm

Advanced

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

#4 Media Queries in Javascript

http://www.simplestatemanager.com/

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

matchMedia()

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

getActiveMQ.js

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

getActiveMQ.js

watchResize()

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

Basics

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

Advanced

• 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

https://github.com/BPScott/breakup

#5 Layouts

The mighty float

#5 Layouts

Flexbox for Page Layout

#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

Next Steps in Responsive Design

Technology

Transcript of Next Steps in Responsive Design

ISIS Next Steps

Advocacy: Next Steps

Price Responsive Load Next Steps – Data Collection Paul Wattles Karen Farley DSWG and RMS sub team October 16, 2012.

The Next Step in Responsive - RESS

Next Steps:

Next Steps

Responsive prestashop next store theme

Pharo. Next Steps.

SXSW Next Gen Responsive Design

Next Steps…

“NEXT STEPS”

One Team: Relevant, Ready, Responsive, Reliable 1 MRGO Closure Status Next Steps & Status USACE & State negotiate and sign MOA Plans & Specifications for.

Lms next steps

Retail DR and Price Responsive Load Next Steps – Data Collection Paul Wattles Karen Farley Updates to DSWG & RMS January 2013.

5 Steps To Responsive Email Campaigns

Taking responsive design to the next level

PROMOTING GENDER- RESPONSIVE HEALTH GOVERNANCE · PDF filePROMOTING GENDER-RESPONSIVE HEALTH GOVERNANCE. Lessons and Next Steps . ... 9 Women’s ... a core group of indicators related

Non responsive coeliac disease: next steps for investigation · PDF fileNon‐responsive coeliac disease: next steps for investigation ... • Crohn’s disease ... nutritional requirements

Responsive Mobile - The Next Phase of Retail

Gender-Responsive Education Sector Planning · Gender-Responsive Education Sector Planning A pathway to gender equality in education 8 Resources and next steps for engagement THE