Responsive Web Design for Libraries

Talk on Responsive Design for Libraries given to LACONI on April 19, 2013 in Skokie, IL.

Transcript

1. LIBRARIES RESPONSIVE MATTHEW REIDSMA WEB DESIGN FOR GRAND VALLEY STATE UNIVERSITY
2. http://www.telegraph.co.uk/news/worldnews/northamerica/usa/9640488/Interactive-compare-Hurricane-Sandy-to-Irene.html
3. http://www.theatlantic.com/infocus/2012/10/hurricane-sandy-in-photos/100395/
4. http://www.floridadisaster.org/SiteView.htm
5. GET HERE? HOW DID WE
6. http://www.youtube.com/watch?v=IaFjNyLuENk
8. http://adactio.com/journal/4443/ For over a decade, we have pretended that there’s a mythical perfect size [viewport] that every person will be using. Jeremy Keith “
9. Ethan Marcotte, Responsive Web Design, p. 3 The problem with this approach is that we’re one step removed from our actual canvas: the browser window Ethan Marco e “
10. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
11. https://twitter.com/zeldman/status/166653639383973889 Layout is an enhancement. Ethan Marco e “
12. http://bostonglobe.com
13. http://www.flickr.com/photos/splorp/6141775264/
14. The control which designers know in the print medium, and often desire in the web medium, is simply a func on of the limita on of the printed page. http://www.alistapart.com/articles/dao/ “ John Allsopp
15. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. http://www.alistapart.com/articles/dao/ John Allsopp “
16. http://techcrunch.com/2012/05/11/this-is-what-developing-for-android-looks-like/
17. http://opensignalmaps.com/reports/fragmentation.php
18. My website will meet you wherever you are... “ Trent Walton http://trentwalton.com/2011/05/10/fit-to-scale/
19. MOBILE DESKTOP VS.
22. OWN A SMARTPHONE 2011-12 US ADULTS 46% http://pewinternet.org/Reports/2012/Smartphone-Update-2012.aspx http://pewinternet.org/Reports/2011/Smartphones.aspx
23. OWN A SMARTPHONE 2011-12 US ADULTS 46% USE WEB ONLY ON PHONE 25% http://pewinternet.org/Reports/2012/Smartphone-Update-2012.aspx http://pewinternet.org/Reports/2011/Smartphones.aspx
24. OWN A SMARTPHONE 2011-12 US ADULTS 46% USE WEB ONLY ON PHONE 25% USE WEB ONLY ON PHONE 11% http://pewinternet.org/Reports/2012/Smartphone-Update-2012.aspx http://pewinternet.org/Reports/2011/Smartphones.aspx
25. OWN A SMARTPHONE 2011-12 US ADULTS 46% USE WEB ONLY ON PHONE 25% USE WEB ONLY ON PHONE 11% http://pewinternet.org/Reports/2012/Smartphone-Update-2012.aspx http://pewinternet.org/Reports/2011/Smartphones.aspx <$30K FASTEST RATE OF ADOPTION
26. WHITE, NON-HISPANIC 2012 US ADULTS 52% USE PHONE TO BROWSE WEB http://pewinternet.org/Reports/2012/Cell-Activities/Additional-Demographic-Analysis/Demographics.aspx
27. WHITE, NON-HISPANIC 2012 US ADULTS 52% BLACK, NON-HISPANIC 60% USE PHONE TO BROWSE WEB http://pewinternet.org/Reports/2012/Cell-Activities/Additional-Demographic-Analysis/Demographics.aspx
28. WHITE, NON-HISPANIC 2012 US ADULTS 52% BLACK, NON-HISPANIC 60% HISPANIC 66% USE PHONE TO BROWSE WEB http://pewinternet.org/Reports/2012/Cell-Activities/Additional-Demographic-Analysis/Demographics.aspx
29. 2013 US TEENS USE WEB SOMETIMES ON PHONE 74% http://pewinternet.org/Reports/2013/Teens-and-Tech.aspx
30. 2013 US TEENS USE WEB SOMETIMES ON PHONE 74% USE WEB ONLY ON PHONE 25% http://pewinternet.org/Reports/2013/Teens-and-Tech.aspx
31. 2013 US TEENS OWN A SMARTPHONE 37% USE WEB SOMETIMES ON PHONE 74% USE WEB ONLY ON PHONE 25% http://pewinternet.org/Reports/2013/Teens-and-Tech.aspx
32. 2013 US TEENS OWN A SMARTPHONE 37% USE WEB ONLY ON SMARTPHONE 50% USE WEB SOMETIMES ON PHONE 74% USE WEB ONLY ON PHONE 25% http://pewinternet.org/Reports/2013/Teens-and-Tech.aspx
33. AT HOME 2010 SMARTPHONE USE 84% http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
34. AT HOME 2010 SMARTPHONE USE 84% RANDOM DOWNTIMES 80% http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
35. AT HOME 2010 SMARTPHONE USE 84% RANDOM DOWNTIMES 80% WAITING IN LINE 76% http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
36. AT HOME 2010 SMARTPHONE USE 84% RANDOM DOWNTIMES 80% WAITING IN LINE 76% AT WORK 64% http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
37. AT HOME 2010 SMARTPHONE USE 84% RANDOM DOWNTIMES 80% WAITING IN LINE 76% AT WORK 64% IN THE BATHROOM 39% http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
38. LIARS 2010 SMARTPHONE USE 61% http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
39. http://techcrunch.com/2012/01/12/ebay-forecasts-8b-in-mobile-commerce-volume-in-2012-paypal-will-reach-7b/ http://reviews.cnet.com/8301-13746_7-20030552-48.html http://www.businessweek.com/news/2012-01-11/ebay-s-paypal-mobile-payment-volume-rose-to-4-billion-last-year.html PAYPAL PAYMENTS $4 BILLION 2011 SALES ON MOBILE
40. http://techcrunch.com/2012/01/12/ebay-forecasts-8b-in-mobile-commerce-volume-in-2012-paypal-will-reach-7b/ http://reviews.cnet.com/8301-13746_7-20030552-48.html http://www.businessweek.com/news/2012-01-11/ebay-s-paypal-mobile-payment-volume-rose-to-4-billion-last-year.html PAYPAL PAYMENTS $4 BILLION 2011 SALES ON MOBILE EBAY SALES $5 BILLION
41. http://techcrunch.com/2012/01/12/ebay-forecasts-8b-in-mobile-commerce-volume-in-2012-paypal-will-reach-7b/ http://reviews.cnet.com/8301-13746_7-20030552-48.html http://www.businessweek.com/news/2012-01-11/ebay-s-paypal-mobile-payment-volume-rose-to-4-billion-last-year.html PAYPAL PAYMENTS $4 BILLION 2011 SALES ON MOBILE EBAY SALES $5 BILLION 3-4 FERRARIS SOLD / MONTH @ EBAY
42. 2012 US ADULTS >16 VISITED A LIBRARY WEBSITE 39% http://libraries.pewinternet.org/2012/12/31/mobile-connections-to-libraries/
43. 2012 US ADULTS >16 VISITED A LIBRARY WEBSITE 39% VISITED IN PAST YEAR 25% http://libraries.pewinternet.org/2012/12/31/mobile-connections-to-libraries/
44. 2012 US ADULTS >16 VISITED ON MOBILE DEVICE 13% VISITED A LIBRARY WEBSITE 39% VISITED IN PAST YEAR 25% http://libraries.pewinternet.org/2012/12/31/mobile-connections-to-libraries/
45. 2012 US ADULTS >16 VISITED ON MOBILE DEVICE 13% VISITED ON MOBILE DEVICE 33% VISITED A LIBRARY WEBSITE 39% VISITED IN PAST YEAR 25% http://libraries.pewinternet.org/2012/12/31/mobile-connections-to-libraries/
46. “ There is no mobile web. There is only The Web, which we view in different ways. Stephen Hay http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
47. DESIGN RESPONSIVE WEB
48. Remember that RWD is a label for something that the web has always done na vely, but that we chose to break. https://twitter.com/anna_debenham/status/297328683721568256 Anna Debenham “
49. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
50. FLEXIBLE GRIDS 1
51. { 80px { 24px
52. 960px 288px 600px
53. .left { float: left; width: 288px; } .right { float: right; width: 600px; }
54. 960px 288px 600px
58. 960px 288px 600px
59. 960px 288px 600px
60. 960px 288px 600px
61. TARGET CONTEXT ÷ RESULT From Ethan Marcotte, Responsive Web Design, 2011.
63. 600 ÷ 960 = 62.5% 288 ÷ 960 = 30% TARGET ÷ CONTEXT = RESULT
64. .left { float: left; width: 30%; } .right { float: right; width: 62.5%; }
65. 100% 30% 62.5%
66. FLUID MEDIA 2
69. img { max-size: 100%; }
70. img, video, object, iframe { max-size: 100%; }
72. HEIGHT ÷ WIDTH = ASPECT RATIO http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
73. 315 ÷ 560 =56.25% http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
74. <div class=”video-wrap”> <iframe width=”560” height=”315” ...></iframe> </div> .video-wrap { padding-top: 56.25%; position: relative; } http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
75. http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
76. <div class=”video-wrap”> <iframe width=”560” height=”315” ...></iframe> </div> .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height:100%; } http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
77. http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
78. MEDIA QUERIES 3
79. @media screen { ... } @media print { ... } @media all { ... } @media handheld { ... }
80. @media handheld { ... }
81. @media screen and (min-width: 480px) { ... } /* Base styles */ ... /* Progressive styles */ @media screen and (min-width: 600px) { ... } @media screen and (min-width: 768px) { ... } @media screen and (min-width: 980px) { ... } @media screen and (min-width: 1024px) { ... }
83. OOPS. https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
84. Your CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser. http://www.quirksmode.org/mobile/viewports2.html “ Peter-Paul Koch
85. <meta name="viewport" content="width=device-width, initial-scale=1">
86. WITH VIEWPORT TAG https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
91. PERFORMANCE 4
92. WEBPAGE SIZE http://httparchive.org/interesting.php 312K 2008 2010 2011 2012 929K 702K 1269K
93. WEBPAGE REQUESTS http://www.websiteoptimization.com/speed/tweak/average-web-page/ http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Apr+1+2013#bytesTotal&reqTotal 50 2008 2010 2011 2012 86 74 88
94. GOOGLE .9 30 RESULTS PAGE LOAD TIME IN SECONDS .4 2006 http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html
95. GOOGLE .9 30 RESULTS 10 RESULTS PAGE LOAD TIME IN SECONDS .4 2006 http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html
96. Half a second delay caused a 20% drop in traffic. Half a second delay killed user sa sfac on. http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html “ Marissa Mayer
97. YOUTUBE “FEATHER” http://blog.chriszacharias.com/page-weight-matters 98KB FEATHER
98. YOUTUBE “FEATHER” http://blog.chriszacharias.com/page-weight-matters 98KB FEATHER ORIGINAL 1.2MB
99. Large numbers of people who were previously unable to use YouTube before were suddenly able to. http://blog.chriszacharias.com/page-weight-matters “ Chris Zacharias
100. PERFORMANCE IMPROVE
101. REDUCE SERVER REQUESTS 1 PERFORMANCE IMPROVE
102. REDUCE SERVER REQUESTS 1 PERFORMANCE IMPROVE 2 REDUCE BYTES SENT
103. <link rel=”stylesheet” href=”one.css” />
104. <link rel=”stylesheet” href=”one.css” /> <link rel=”stylesheet” href=”two.css” /> <link rel=”stylesheet” href=”three.css” /> <link rel=”stylesheet” href=”four.css” /> <link rel=”stylesheet” href=”five.css” /> <link rel=”stylesheet” href=”six.css” />
105. <link rel=”stylesheet” href=”one.css” /> <link rel=”stylesheet” href=”two.css” /> <link rel=”stylesheet” href=”three.css” /> <link rel=”stylesheet” href=”four.css” /> <link rel=”stylesheet” href=”five.css” /> <link rel=”stylesheet” href=”six.css” /> <script src=”one.js”></script> <script src=”two.js”></script> <script src=”three.js”></script> <script src=”four.js”></script> <script src=”five.js”></script>
106. one.css two.css http://phette.net/prez/speed-feature-performance-mobile-web/files/index.html#/7
107. one.css two.css both.css http://phette.net/prez/speed-feature-performance-mobile-web/files/index.html#/7
108. <link rel=”stylesheet” href=”all.css” /> <head> </head> </body>
109. <link rel=”stylesheet” href=”all.css” /> <script src=”all.js”></script> <head> </head> </body>
110. http://www.httparchive.org/interesting.php
111. OPTIMIZE IMAGES 60KB
112. OPTIMIZE IMAGES 60KB 40KB
113. IMAGE SPRITES OPTIMIZE IMAGES 60KB 40KB
114. IMAGE SPRITES ICON FONTS OPTIMIZE IMAGES 60KB 40KB
115. IMAGE SPRITES ICON FONTS CSS3 box-shadow border-radius etc. OPTIMIZE IMAGES 60KB 40KB
116. URIS DATA (THE NERDIEST PART OF THIS TALK)
117. URIS DATA .nerd-image { background: url(data:image/ gif;base64,R0lGODlhCwAOAMQfAP////7+/ vj4+Hh4eHd3d/v7+/ Dw8HV1dfLy8ubm5vX19e3t7fr6+nl5edra2nZ2dnx8fMHB wYODg/ b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX13Jycp2dnevr 6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/ o9imAsBtKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKTh enkwDgeGMiggDLEXQkDoThCKNLpQDgjeAsY7MHgECgx8YR 8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0DkgcEIQA7); }
118. MEDIA APPROPRIATE <video> ! <source src="high-res.mp4" media="min-width: 800px" /> ! <source src="lo-res.mp4" /> </video>
119. MEDIA APPROPRIATE github.com/scottjehl/picturefill
120. http://www.httparchive.org/interesting.php
121. JQUERY 280KB
122. JQUERY 280KB JQUERY.MIN 90KB
123. JQUERY 280KB JQUERY.MIN 90KB JQUERY.MIN GZIPPED 33KB
124. JQUERY 280KB JQUERY.MIN 90KB JQUERY.MIN GZIPPED 33KB JAVASCRIPT 0KB
125. CACHING TALK TO YOUR NERDS ABOUT & COMPRESSION
126. FOLLOW ALONG AT HOME www.lollibrary.org github.com/mreidsma/lol
127. SOURCE ORDER
129. CONTENT FIRST
130. https://twitter.com/kissane/status/324244397636067329
131. CONTENT FIRST
132. MOBILE FIRST
133. MOBILE STYLES BASE ARE
135. BLOCK ELEMENTS NAVIGATION AT THE BOTTOM ANCHOR LINK TO NAV IN HEADER 1 2 3 STYLES BASE
136. HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER NAVIGATION
137. h1 { float: left; width: 66%; } header .anchor { float: right; width: 33%; } HEADING 1 ANCHOR #
138. h1 { float: left; padding-left: .65%; width: 65%; } header .anchor { float: right; margin-right: 1%; width: 32%; }
139. INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” input[type=”text”] { display: block; margin: 0 1%; padding: .4em .96%; width: 96%; } input[type=”submit”] { display: block; margin: .5em 1%; width: 98%; }
140. SIZE ENHANCE WITH
141. @media screen and (min-width: 33.75em) { /* Styles at least this wide go here */ }
142. WHAT? EM
143. SIZ RELATIVE ES
144. = 1 EM 16 PX*
145. RELATIVE RELATIVE EMS ARE
146. = 33.75 EM 540 PX*
147. BREAK POINT? WHEN LAYOUT BREAKS
149. FORM IN HEADER TO RIGHT NAVIGATION AT THE TOP ANCHOR LINK TO NAV IN HEADER GONE 1 2 3 STYLES >33.75EM
150. HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER NAVIGATION
151. SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT INPUT NAVIGATION
152. header .anchor { display: none; }
153. h1 { width: 32%; } form { float: left; width: 66%; } input[type=”text”] { width: 66%; } input[type=”submit”] { float: right; width: 28%; } HEADING 1 INPUT SUBMIT
154. body { display: table; caption-side: top; } nav[role="navigation"] { display: table-caption; } nav[role="navigation"] ol { display: table-row; } nav[role="navigation"] ol li { display: table-cell; } NAVIGATION http://adactio.com/journal/4780/
156. NEWS & EVENTS IN RIGHT COLUMN EXHIBITS IN LEFT COLUMN 1 2 STYLES >43.75EM
157. SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT INPUT NAVIGATION
158. FOOTER HEADING 1 SUBMIT INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS
159. <div id=”right-column”> <section id=”news”> ... </section> <section id=”events”> ... </section> </div>
160. #right-column { float: right; width: 30%; } #exhibits { float: right; width: 66%; }
162. NEWS & EVENTS ACROSS THE TOP EXHIBITS IN LOWER ROW 1 2 STYLES >64 EM HEADING CHANGED TO FULL NAME 3
163. FOOTER HEADING 1 SUBMIT INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS
164. FOOTER HEADING 1 SUBMIT INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS
165. #right-column { float: none; margin-left: 0; width: 100%; } #events { clear: none; width: 66%; float: right; } #news { width: 30%; margin-left: 3%; float: right; }
166. .event-img { float: left; margin: 0 1.5%; width: 47%; }
167. #exhibits { ! width: 100%; ! float: none; ! clear: both; } ! #exhibits .exhibit-section { ! float: left; ! width: 31.3%; ! margin: 0 1%; }
168. <h1> <a href="index.html"> <abbr title="Library or Librarian"> LOL </abbr> <span> Library or Librarian </span> Library </a> </h1>
169. h1 span { display: none; } @media screen and (min-width: 64em) { h1 abbr { display: none; } h1 span { display: inline; } }
170. My website will meet you wherever you are... “ Trent Walton http://trentwalton.com/2011/05/10/fit-to-scale/
171. LIBRARIES OTHER (THAT EXIST)
172. http://gvsu.edu/library
173. http://lib.virginia.edu
174. http://cantonpl.org
175. http://www.hendrix.edu/baileylibrary/
176. http://allisonlibrary.regent-college.edu/
177. RWD LIBRARIES & http://bit.ly/rwd-highered
178. SUPPORT
179. The absence of support for @media queries is in fact the first @media query. http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu “ Bryan Rieger
181. https://github.com/scottjehl/Respond/
182. <!--[if lt IE 9]> // Load IE-only styles here <![endif]-->
183. MORE LEARN
184. http://www.abookapart.com/products/responsive-web-design
185. http://bradfrost.github.com/this-is-responsive/
186. Responsive Design for Libraries: Beyond the Myth of the Mobile Web by Matthew Reidsma http://scholarworks.gvsu.edu/library_books/5/
187. THANKYOU