Responsive Retrofitting

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.

Transcript

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. 72 PPI
41. 72 points-per-inch = 72 pixels-per-inch
42. 96 PPI 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
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 NA V 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/