Covering tips on WordPress, web performance, navigation, HTML tables, and more, Responsive Retrofitting takes legacy sites with fixed-widths designs and make them ready for a mobile viewing. Until a time in the future starting over is financially and feasible, *responsively retrofitting* is financially effective and time saving solution.

1. RESPONSIVE
RETROFITTING
Christopher Schmitt
@teleject
http://E4H.tv

2. WHAT IS THE
WEB

3. “This is the web
@brad_frost

4. “
@brad_frost

5. Cars with their wifi and built-in browsers.

6. THE
CASE
FOR RESPONSIVE

7. “This is the web
@brad_frost

14. RESPONSIVE CONSIDERATIONS
➤ Different screen sizes from
various devices means our
designs need to scale
➤ Different resolutions of those
screens means our images
need to stay sharp.
➤ Different speeds of internet
(Hotel wifi vs Google Fiber)
means we need to optimize
performance, speed.

15. THE
CASE
FOR RETROFITTING

16. RETROFITTING
ALLOWS YOU TO
KEEP THE SAME DESIGN

17. RETROFITTING
ALLOWS YOU TO
SAVE MONEY

18. RETROFITTING
ALLOWS YOU TO
SAVE TIME

19. RETROFITTING
ALLOWS YOU TO PLAN
WHEN TO GO FULL RWD

20. GO RETROFITTING
➤ Keep the same design
➤ Same UI, happy current
visitors and members
➤ Saves money
➤ Saves time
➤ Plan on full RWD experience
when the time and budget
works for you.
➤ Until then…

22. LOOKING INTO
WORD
PRESS
FOR RETROFITTING

23. Find a RWD Theme and switch to it. Or use underscores.me and start
building your own.

24. DEVPRESS THEMES

25. WORDPRESS
PLUGINS
IN RETROFITTING

26. REGENERATE THUMBNAILS

27. You can either regenerate the thumbnails for all image uploads,
individual image uploads, or specific multiple image uploads.

28. RWD IMG PLUGIN/WP 4.4+

30. <img width="720" height="480" src="http://
christopher.org/wp-content/uploads/2016/03/zell-
leiw-720x480.jpg" class="attachment-post-
thumbnail size-post-thumbnail wp-post-image"
alt="Zell Leiw">

31. <img width="720" height="480" src="http://
christopher.org/wp-content/uploads/2016/03/zell-
leiw-720x480.jpg" class="attachment-post-
thumbnail size-post-thumbnail wp-post-image"
alt="Zell Leiw"
srcset="http://christopher.org/wp-content/
uploads/2016/03/zell-leiw-300x200.jpg 300w,
http://christopher.org/wp-content/uploads/
2016/03/zell-leiw-768x512.jpg 768w,
http://christopher.org/wp-content/uploads/
2016/03/zell-leiw-720x480.jpg 720w,
http://christopher.org/wp-content/uploads/
2016/03/zell-leiw.jpg 800w"
sizes="(max-width: 720px) 100vw, 720px">

32. SVG SUPPORT

34. W3 TOTAL CACHE

36. ADVANCED CACHING

37. AUTOPTIMIZE

38. <link type="text/css" media="all" href="/wp-
content/cache/autoptimize/css/
autoptimize_cb0a81ff0ddb86313b4880477e53c478.css"
rel="stylesheet" />
<script type="text/javascript" src="/wp-content/
cache/autoptimize/js/
autoptimize_2523fe169871bce9a1795831e486b2ed.js">
</script>

39. OPTIMIZING
IMAGES
IN RETROFITTING

40. 72PPI

41. 72 points-per-inch =
72 pixels-per-inch

42. 96PPI
IF A WINDOWS USER

43. 72 points-per-inch
x [1+(1/3)]
= 96 PPI

44. 78μm
“RETINA” DISPLAYS
300ppi at 12 inches from the eyes

46. “[In 2013, Intel sees their product line]
offer a higher resolution experience
than a top-of-the-line 1080p HDTV.”

47. 72 PPI

48. 240

49. 240 PPI

50. 240 PPI

51. 72 PPI

52. 72ppi “Retina”

53. 4x

54. LOW FILES ARE KEY:
OPTIMIZATION

57. HTML5 ELEMENTS:
SRCSET

58. <img src="swing-400.jpg" alt="Kettlebell Swing">

59. <img
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">

60. <img
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">

61. <img
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">

62. HTML5 ELEMENTS:
SRCSET+SIZES

63. <img sizes="(min-width: 30em) 100vw,
(min-width: 50em) 50vw, 200px"
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">

64. <img sizes="(min-width: 30em) 100vw,
(min-width: 50em) 50vw, 200px"
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">

65. <img sizes="(min-width: 30em) 100vw,
(min-width: 50em) 50vw, 200px"
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">

66. <img sizes="(min-width: 30em) 100vw,
(min-width: 50em) 50vw, 200px"
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">

67. …BUT IT’S ALL REALLY
FOR BROWSER TO DECIDE.

68. SIMPLE SETUP

69. <img src="rock-climbing-400px.jpg"
alt="Mountain Climber" />

70. <img src="rock-climbing-400px.jpg"
srcset="rock-climbing-400px.jpg 400w,
rock-climbing-compressed.jpg 600w"
alt="Mountain Climber" />

71. <img src="rock-climbing-400px.jpg"
srcset="rock-climbing-400px.jpg 400w,
rock-climbing-compressed.jpg 600w"
sizes="100vw"
alt="Mountain Climber" />

72. SCALABLE VECTOR
GRAPHIC IMAGES

77. PNG 16kb
SVG 7kb

83. HTML
TABLES
IN RETROFITTING

85. #1

87. @media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
xtop: 6px;
xleft: 6px;
left: 50%;
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-
width: 1024px)

88. @media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
xtop: 6px;
xleft: 6px;
left: 50%;
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}

89. @media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
xtop: 6px;
xleft: 6px;
left: 50%;
/* Hide table headers (but not display: none;,
for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

90. @media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
xtop: 6px;
xleft: 6px;
left: 50%;
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}

91. @media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
left: 50%;
top: 50%;
transform: translate(-70%, -50%);
width: 50%;
padding-right: 10px;
white-space: nowrap;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
left: 50%;
top: 50%;
transform: translate(-70%, -50%);
width: 50%;
padding-right: 10px;
white-space: nowrap;
}

92. position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
left: 50%;
top: 50%;
transform: translate(-70%, -50%);
width: 50%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "Film"; }
td:nth-of-type(2):before { content: "Release Date"; }
td:nth-of-type(3):before { content: "Director"; }
td:nth-of-type(4):before { content: "Screenwriter(s)"; }
td:nth-of-type(5):before { content: "Producer"; }
td:nth-of-type(6):before { content: "Distributor"; }
td:nth-of-type(7):before { content: "Status"; }
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "Film"; }
td:nth-of-type(2):before { content: "Release Date"; }
td:nth-of-type(3):before { content: "Director"; }
td:nth-of-type(4):before { content:
“Screenwriter(s)";}
td:nth-of-type(5):before { content: "Producer"; }
td:nth-of-type(6):before { content: "Distributor"; }
td:nth-of-type(7):before { content: "Status"; }
}

93. #2

96. /* Attach the Table CSS and Javascript */
<link rel="stylesheet" href="responsive-tables.css">
<script src="stylesheet" href="responsive-
tables.js"></script>

97. /* Put the responsive class on the table */
<table class="responsive">
<tr> …

98. MENU
NAV
IN RETROFITTING

99. #1

103. .nav ul {
display: none;
list-style: none;
padding: 0px;
margin: 0px;
font-weight: bold;
text-align: center;
}
.nav ul li {
display: inline-block;
text-align: left;
}
.nav ul li a {
display: block;
padding: 15px 10px;
text-decoration: none;
color: #444;
}
.nav ul li a:hover {
background-color: #ccc;
}
.anchor-link {
display: inline-block;
text-align: center;
padding: 10px 15px;
color: #fff;
background-color: #0084B4;
text-decoration: none; margin: 3px; float: right;
}
.example-footer {
font-size: 1.1em;
.nav ul {
display: none;
list-style: none;
padding: 0px;
margin: 0px;
font-weight: bold;
text-align: center;
}
.nav ul li {
display: inline-block;
text-align: left;
}
.nav ul li a {
display: block;
padding: 15px 10px;
text-decoration: none;
color: #444;
}
.nav ul li a:hover {
background-color: #ccc;
}

104. .nav ul {
display: none;
list-style: none;
padding: 0px;
margin: 0px;
font-weight: bold;
text-align: center;
}
.nav ul li {
display: inline-block;
text-align: left;
}
.nav ul li a {
display: block;
padding: 15px 10px;
text-decoration: none;
color: #444;
}
.nav ul li a:hover {
background-color: #ccc;
}
.anchor-link {
display: inline-block;
text-align: center;
padding: 10px 15px;
color: #fff;
background-color: #0084B4;
text-decoration: none;
margin: 3px;
float: right;
}
.example-footer {
.anchor-link {
display: inline-block;
text-align: center;
padding: 10px 15px;
color: #fff;
background-color: #0084B4;
text-decoration: none;
margin: 3px;
float: right;
}

105. margin: 3px;
float: right;
}
.example-footer {
font-size: 1.1em;
}
#mobile-nav {
display: block;
}
#mobile-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#mobile-nav ul li {
list-style: none;
text-align: center;
}
#mobile-nav ul li a {
display: block;
padding: 20px 10px;
border-bottom: 1px solid #ccc;
text-decoration: none;
}
#mobile-nav ul li a:hover {
background-color: #ccc;
color: #fff;
}
@media all and (min-width:48em){
.nav ul { display: block; }
.anchor-link { display: none; }
#mobile-nav { display: none; }
}
@media all and (min-width: 48em){
.nav ul { display: block; }
.anchor-link { display: none; }
#mobile-nav { display: none; }
}

108. #2

111. .nav ul li {
display: inline-block;
}
.nav ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #444;
}
.nav ul li a:hover {
background-color: #888;
color: #fff;
}
@media (max-width:48.000em){
.example-header .container {
width: 100%;
}
.nav ul {
width: 100%;
font-weight: normal;
}
.nav ul li {
width: 50%;
float: left;
}
.nav ul li:nth-of-type(odd) a {
border-right: 1px solid #ccc;
}
.nav ul li a {
padding: 8px 0px;
border-bottom: 1px solid #ccc;
display: block;
}
}
@media (max-width:48.000em){
.example-header .container {
width: 100%;
}
.nav ul {
width: 100%;
font-weight: normal;
}
.nav ul li {
width: 50%;
float: left;
}
.nav ul li:nth-of-type(odd) a {
border-right: 1px solid #ccc;
}
.nav ul li a {
padding: 8px 0px;
border-bottom: 1px solid #ccc;
display: block;
}
}

112. .nav {
width: 100%;
}
.nav ul {
list-style: none;
padding: 0px;
margin: 0px;
font-weight: bold;
text-align: center;
}
.nav ul li {
display: inline-block;
}
.nav ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #444;
}
.nav ul li a:hover {
background-color: #888;
color: #fff;
}
@media (max-width:48.000em){
.example-header .container {
width: 100%;
}
.nav ul {
width: 100%;
font-weight: normal;
}
.nav ul li {
width: 50%;
.nav {
width: 100%;
}
.nav ul {
list-style: none;
padding: 0px;
margin: 0px;
font-weight: bold;
text-align: center;
}
.nav ul li {
display: inline-block;
}
.nav ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #444;
}
.nav ul li a:hover {
background-color: #888;
color: #fff;
}

114. #3

118. $(function () {
$(“.nav>ul").tinyNav();
});

119. /* styles for desktop */
.tinynav {
display: none
}
/* styles for mobile */
@media screen and (max-width: 600px) {
.tinynav {
display: block;
margin: 1em auto; }
#nav {
display: none;
}
}

120. #4
http://codepen.io/teleject/pen/BKzBbd/

124. .anchor-link {
display: none;
text-align:
right; padding: 0 1em 0;
text-align: center;
padding: 10px 15px;
color: #fff;
background-color: #0084B4; text-decoration:
none; margin: 3px;
float: right;
}
#mobile-nav {
display:none;
}

125. @media (max-width:48.000em){
ul.simple-toggle {
display: none;
}
.anchor-link, #mobile-nav {
display: block;
}
ul.open {
background-color: #F4F4F4;
box-shadow: 2px 2px 3px #444444;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 5px;
top: 100%;
width: 70%;
z-index: 500;

126. $(document).ready(function() {
$('#menu-toggle').click(function () {
$('#menu').toggleClass('open');
e.preventDefault();
});
});
http://codepen.io/teleject/pen/ONXLgR

133. GO RETROFITTING
➤ Keep the same design
➤ Same UI, happy current
visitors and members
➤ Saves money
➤ Saves time
➤ Plan on full RWD experience
when the time and budget
works for you.
➤ Until then…

134. “
@brad_frost

135. Beyond the web, the internet of things and voice

136. FIND ME AT
➤ TWITTER @teleject
➤ EMAIL schmitt@christopher.org
➤ WEB http://christopher.org
➤ Hosting virtual Responsive Web Design Summit March 29-31
➤ http://RWDSummit.com/