Save 37% off PRO during our Black Friday Sale! »

Responsive Web Design for Libraries

Responsive Web Design for Libraries

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

B852b104baed98f4b7f02f5a7a75ab6b?s=128

Matthew Reidsma

April 19, 2013
Tweet

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

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

  20. None
  21. None
  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

  55. None
  56. None
  57. None
  58. 960px 288px 600px

  59. 960px 288px 600px

  60. 960px 288px 600px

  61. TARGET CONTEXT ÷ RESULT From Ethan Marcotte, Responsive Web Design,

    2011.
  62. None
  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

  67. None
  68. None
  69. img { max-size: 100%; }

  70. img, video, object, iframe { max-size: 100%; }

  71. None
  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) { ... }
  82. None
  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

  87. None
  88. None
  89. None
  90. None
  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

  128. None
  129. CONTENT FIRST

  130. https://twitter.com/kissane/status/324244397636067329

  131. CONTENT FIRST

  132. MOBILE FIRST

  133. MOBILE STYLES BASE ARE

  134. None
  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

  148. None
  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/
  155. None
  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%; }
  161. None
  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
  180. None
  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