next steps in responsive design
TRANSCRIPT
![Page 1: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/1.jpg)
The Next Steps in RWD
![Page 2: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/2.jpg)
Justin Avery @justinavery
![Page 3: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/3.jpg)
ami.responsivedesign.isresponsivedesign.is
![Page 4: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/4.jpg)
![Page 5: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/5.jpg)
1. Responsive Images
2. Improving Performance
3. Responsive Typography
4. Media queries in JavaScript
5. Layout
![Page 6: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/6.jpg)
#1 Responsive Images
![Page 7: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/7.jpg)
#1 Responsive Images
![Page 8: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/8.jpg)
#1 Responsive Images
![Page 9: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/9.jpg)
#1 Responsive Images
![Page 10: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/10.jpg)
#1 Responsive Images
http://moto.oakley.com/
![Page 12: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/12.jpg)
#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.
![Page 13: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/13.jpg)
#1 Responsive Images
10kB 20kB 45kB 73kB
![Page 14: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/14.jpg)
#1 Responsive Images
200px 400px 800px 1600px
![Page 15: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/15.jpg)
#1 Responsive Images
300px 400px 800px 1600px
600px 800px 1600px 3200px
![Page 16: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/16.jpg)
#1 Responsive Images
http://www.html5rocks.com/en/tutorials/responsive/picture-element/
![Page 17: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/17.jpg)
#1 Responsive Images
http://www.html5rocks.com/en/tutorials/responsive/picture-element/
![Page 18: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/18.jpg)
#1 Responsive Images
picture/srcset
![Page 19: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/19.jpg)
#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" />
![Page 20: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/20.jpg)
#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" />
![Page 21: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/21.jpg)
#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" />
![Page 22: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/22.jpg)
#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" />
![Page 23: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/23.jpg)
#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" />
![Page 24: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/24.jpg)
#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" />
![Page 25: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/25.jpg)
#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" />
![Page 26: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/26.jpg)
#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" />
![Page 27: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/27.jpg)
#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" />
![Page 28: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/28.jpg)
#1 Responsive Images
![Page 29: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/29.jpg)
#1 Responsive Images
![Page 30: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/30.jpg)
#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" />
![Page 31: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/31.jpg)
#1 Responsive Images
Things to consider
![Page 32: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/32.jpg)
CSS Specific Images
![Page 33: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/33.jpg)
@media & background-image
![Page 34: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/34.jpg)
![Page 35: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/35.jpg)
![Page 36: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/36.jpg)
http://caniuse.com/#feat=css-image-set
![Page 37: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/37.jpg)
#1 Responsive Images
Basics
![Page 38: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/38.jpg)
#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.
![Page 39: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/39.jpg)
#1 Responsive Images
Advanced
![Page 40: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/40.jpg)
#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.
![Page 41: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/41.jpg)
#2 Improving Performance
![Page 42: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/42.jpg)
#2 Improving Performance
![Page 43: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/43.jpg)
#2 Improving Performance
http://speedcure.com
![Page 45: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/45.jpg)
#2 Improving Performance
https://github.com/addyosmani/grunt-uncss
![Page 46: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/46.jpg)
#2 Improving Performance
https://github.com/addyosmani/grunt-uncss
![Page 47: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/47.jpg)
#2 Improving Performance
https://unused-css.com
![Page 48: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/48.jpg)
#2 Improving Performance
![Page 49: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/49.jpg)
Critical CSS
#2 Improving Performance
![Page 50: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/50.jpg)
#2 Improving Performance
![Page 51: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/51.jpg)
#2 Improving Performance
![Page 52: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/52.jpg)
• 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
![Page 53: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/53.jpg)
<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
![Page 54: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/54.jpg)
<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
![Page 55: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/55.jpg)
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
![Page 56: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/56.jpg)
#2 Improving Performance
https://github.com/filamentgroup/grunt-criticalcss
![Page 57: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/57.jpg)
#2 Improving Performance
https://github.com/pocketjoso/penthouse
![Page 58: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/58.jpg)
#2 Improving Performance
https://github.com/addyosmani/critical-path-css-demo
![Page 59: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/59.jpg)
#2 Improving Performance
http://jonassebastianohlsson.com/criticalpathcssgenerator/
![Page 60: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/60.jpg)
Can also user Sass to create our Critical CSS manually/
automatic.
#2 Improving Performance
https://css-tricks.com/authoring-critical-fold-css/
![Page 61: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/61.jpg)
#2 Improving Performance
https://css-tricks.com/authoring-critical-fold-css/
![Page 62: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/62.jpg)
#2 Improving Performance
https://css-tricks.com/authoring-critical-fold-css/
![Page 63: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/63.jpg)
#2 Improving Performance
1. https://github.com/at-import/jacket 2. https://github.com/BPScott/breakup 3. https://gist.github.com/benedfit/46da533805566141c42f
![Page 64: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/64.jpg)
Critical CSS with Wordpress
#2 Improving Performance
![Page 65: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/65.jpg)
#2 Improving Performance
![Page 66: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/66.jpg)
Critical CSS with Wordpress
#2 Improving Performance
![Page 67: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/67.jpg)
Critical CSS with Wordpress
#2 Improving Performance
![Page 68: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/68.jpg)
Basics
#2 Improving Performance
![Page 69: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/69.jpg)
• 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
![Page 70: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/70.jpg)
Advanced
#2 Improving Performance
![Page 71: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/71.jpg)
• 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
![Page 72: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/72.jpg)
#3 Responsive Typography
![Page 73: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/73.jpg)
#3 Responsive Typography
body {font-size: 100%;}
![Page 74: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/74.jpg)
#3 Responsive Typography
body {font-size: 100%;} .by-line {font-size: 0.8rem;}
![Page 75: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/75.jpg)
#3 Responsive Typography
:lang(de) article { max-width: 30em;}
![Page 76: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/76.jpg)
#3 Responsive Typography
FOUT
![Page 77: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/77.jpg)
![Page 78: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/78.jpg)
#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
![Page 79: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/79.jpg)
FontFace Observer
#3 Responsive Typography
https://github.com/bramstein/fontfaceobserver
![Page 80: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/80.jpg)
FOUT
#3 Responsive Typography
![Page 81: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/81.jpg)
#3 Responsive Typography
![Page 82: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/82.jpg)
Heading @mixin
#3 Responsive Typography
![Page 83: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/83.jpg)
Headings
#3 Responsive Typography
![Page 84: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/84.jpg)
@include heading-1
#3 Responsive Typography
![Page 85: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/85.jpg)
@include heading-1
#3 Responsive Typography
![Page 86: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/86.jpg)
Basics
#3 Responsive Typography
![Page 87: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/87.jpg)
• Base your font on 100% • Work in relative EM units • Set your margins to your line-height to maintain vertical
rhythm
#3 Responsive Typography
![Page 88: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/88.jpg)
Advanced
#3 Responsive Typography
![Page 89: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/89.jpg)
• Utilise Basket.js (http://addyosmani.github.io/basket.js/)
#3 Responsive Typography
![Page 90: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/90.jpg)
#4 Media Queries in Javascript
![Page 91: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/91.jpg)
#4 Media Queries in Javascript
http://www.simplestatemanager.com/
http://wicky.nillia.ms/enquire.js/
![Page 92: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/92.jpg)
matchMedia()
![Page 93: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/93.jpg)
#4 Media Queries in Javascript
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
![Page 94: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/94.jpg)
#4 Media Queries in Javascript
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
![Page 95: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/95.jpg)
getActiveMQ.js
#4 Media Queries in Javascript
https://gist.github.com/aarongustafson/a0558c185264355df359
![Page 96: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/96.jpg)
getActiveMQ.js
#4 Media Queries in Javascript
<div id="getActiveMQ-watcher"></div>
![Page 97: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/97.jpg)
#4 Media Queries in Javascript
![Page 98: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/98.jpg)
watchResize()
#4 Media Queries in Javascript
https://gist.github.com/aarongustafson/4157402#file-watchresize-js
![Page 99: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/99.jpg)
Basics
#4 Media Queries in Javascript
![Page 100: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/100.jpg)
• 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
![Page 101: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/101.jpg)
Advanced
#4 Media Queries in Javascript
![Page 102: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/102.jpg)
• 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
![Page 103: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/103.jpg)
#5 Layouts
![Page 104: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/104.jpg)
#5 Layouts
The mighty float
![Page 105: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/105.jpg)
#5 Layouts
![Page 106: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/106.jpg)
#5 Layouts
![Page 107: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/107.jpg)
#5 Layouts
![Page 108: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/108.jpg)
#5 Layouts
![Page 109: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/109.jpg)
#5 Layouts
![Page 110: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/110.jpg)
#5 Layouts
![Page 111: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/111.jpg)
#5 Layouts
![Page 112: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/112.jpg)
#5 Layouts
![Page 113: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/113.jpg)
Flexbox for Page Layout
#5 Layouts
![Page 114: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/114.jpg)
#5 Layouts
![Page 115: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/115.jpg)
#5 Layouts
![Page 116: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/116.jpg)
#5 Layouts
![Page 117: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/117.jpg)
Basics
#5 Layouts
![Page 118: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/118.jpg)
• Set up a basic grid with floats and nth-child.
#5 Layouts
![Page 119: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/119.jpg)
Advanced
#5 Layouts
![Page 120: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/120.jpg)
• Add sprinkles of flexy-ness • Check out Haydon Pickering’s crazy nth-child adventures
(http://alistapart.com/article/quantity-queries-for-css)
#5 Layouts
![Page 121: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/121.jpg)
“The ultimate RWD technique is to start off by…
![Page 122: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/122.jpg)
…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.”
![Page 123: Next Steps in Responsive Design](https://reader037.vdocuments.mx/reader037/viewer/2022102723/55c4f3fdbb61eb3a188b4640/html5/thumbnails/123.jpg)
Thank you
@justinavery