Next Steps in Responsive Design
-
Upload
justin-avery -
Category
Technology
-
view
3.602 -
download
0
Transcript of 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
#1 Responsive Images
#1 Responsive Images
#1 Responsive Images
#1 Responsive Images
http://moto.oakley.com/
#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
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