Responsive design sounds simple enough, but in practice it can have you banging your head against the wall. I conducted a poll with the readers on RWD Weekly to find out what was causing the biggest headaches. We will look through the 6 most common issues and techniques on how you can get started or flip to expert mode. Responsive Images Improving Performance Responsive Typography Media queries in JavaScript Layout

1. The Next Steps in
RWD

2. Justin Avery
@justinavery

3. ami.responsivedesign.isresponsivedesign.is

5. 1. Responsive Images
2. Improving Performance
3. Responsive Typography
4. Media queries in JavaScript
5. Layout

6. #1 Responsive Images

7. #1 Responsive Images

8. #1 Responsive Images

9. #1 Responsive Images

10. #1 Responsive Images
http://moto.oakley.com/

11. #1 Responsive Images
http://www.ricg.org

12. #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.

13. #1 Responsive Images
10kB 20kB 45kB 73kB

14. #1 Responsive Images
200px 400px 800px 1600px

15. #1 Responsive Images
300px 400px 800px 1600px
600px 800px 1600px 3200px

16. #1 Responsive Images
http://www.html5rocks.com/en/tutorials/responsive/picture-element/

17. #1 Responsive Images
http://www.html5rocks.com/en/tutorials/responsive/picture-element/

18. #1 Responsive Images
picture/srcset

19. #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" />

20. #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" />

21. #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" />

22. #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" />

23. #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" />

24. #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" />

25. #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" />

26. #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" />

27. #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" />

28. #1 Responsive Images

29. #1 Responsive Images

30. #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" />

31. #1 Responsive Images
Things to consider

32. CSS Specific Images

33. @media &
background-image

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

37. #1 Responsive Images
Basics

38. #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.

39. #1 Responsive Images
Advanced

40. #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.

41. #2 Improving Performance

42. #2 Improving Performance

43. #2 Improving Performance
http://speedcure.com

44. #2 Improving Performance
http://www.sitespeed.io/

45. #2 Improving Performance
https://github.com/addyosmani/grunt-uncss

46. #2 Improving Performance
https://github.com/addyosmani/grunt-uncss

47. #2 Improving Performance
https://unused-css.com

48. #2 Improving Performance

49. Critical CSS
#2 Improving Performance

50. #2 Improving Performance

51. #2 Improving Performance

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

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

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

55. }
else {
setTimeout( toggleMedia );
}
}
toggleMedia();
return ss;
}
loadCSS( '/css/main.css' );
</script>
<noscript><link href="/css/main.css" rel="stylesheet"></noscript>
#2 Improving Performance

56. #2 Improving Performance
https://github.com/filamentgroup/grunt-criticalcss

57. #2 Improving Performance
https://github.com/pocketjoso/penthouse

58. #2 Improving Performance
https://github.com/addyosmani/critical-path-css-demo

59. #2 Improving Performance
http://jonassebastianohlsson.com/criticalpathcssgenerator/

60. Can also user Sass to create
our Critical CSS manually/
automatic.
#2 Improving Performance
https://css-tricks.com/authoring-critical-fold-css/

61. #2 Improving Performance
https://css-tricks.com/authoring-critical-fold-css/

62. #2 Improving Performance
https://css-tricks.com/authoring-critical-fold-css/

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

64. Critical CSS with Wordpress
#2 Improving Performance

65. #2 Improving Performance

66. Critical CSS with
Wordpress
#2 Improving Performance

67. Critical CSS with
Wordpress
#2 Improving Performance

68. Basics
#2 Improving Performance

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

70. Advanced
#2 Improving Performance

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

72. #3 Responsive Typography

73. #3 Responsive Typography
body {font-size: 100%;}

74. #3 Responsive Typography
body {font-size: 100%;}
.by-line {font-size: 0.8rem;}

75. #3 Responsive Typography
:lang(de) article {
max-width: 30em;}

76. #3 Responsive Typography
FOUT

78. #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

79. FontFace Observer
#3 Responsive Typography
https://github.com/bramstein/fontfaceobserver

80. FOUT
#3 Responsive Typography

81. #3 Responsive Typography

82. Heading @mixin
#3 Responsive Typography

83. Headings
#3 Responsive Typography

84. @include
heading-1
#3 Responsive Typography

85. @include
heading-1
#3 Responsive Typography

86. Basics
#3 Responsive Typography

87. • Base your font on 100%
• Work in relative EM units
• Set your margins to your line-height to maintain vertical
rhythm
#3 Responsive Typography

88. Advanced
#3 Responsive Typography

89. • Utilise Basket.js (http://addyosmani.github.io/basket.js/)
#3 Responsive Typography

90. #4 Media Queries in
Javascript

91. #4 Media Queries in Javascript
http://www.simplestatemanager.com/
http://wicky.nillia.ms/enquire.js/

92. matchMedia()

93. #4 Media Queries in Javascript
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/

94. #4 Media Queries in Javascript
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/

95. getActiveMQ.js
#4 Media Queries in Javascript
https://gist.github.com/aarongustafson/a0558c185264355df359

96. getActiveMQ.js
#4 Media Queries in Javascript
<div id="getActiveMQ-watcher"></div>

97. #4 Media Queries in Javascript

98. watchResize()
#4 Media Queries in Javascript
https://gist.github.com/aarongustafson/4157402#file-watchresize-js

99. Basics
#4 Media Queries in Javascript

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

101. Advanced
#4 Media Queries in Javascript

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

103. #5 Layouts

104. #5 Layouts
The mighty float

105. #5 Layouts

106. #5 Layouts

107. #5 Layouts

108. #5 Layouts

109. #5 Layouts

110. #5 Layouts

111. #5 Layouts

112. #5 Layouts

113. Flexbox for Page Layout
#5 Layouts

114. #5 Layouts

115. #5 Layouts

116. #5 Layouts

117. Basics
#5 Layouts

118. • Set up a basic grid with floats and nth-child.
#5 Layouts

119. Advanced
#5 Layouts

120. • Add sprinkles of flexy-ness
• Check out Haydon Pickering’s crazy nth-child adventures
(http://alistapart.com/article/quantity-queries-for-css)
#5 Layouts

121. “The ultimate RWD technique is to start off by…

122. …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.”

123. Thank you
@justinavery