TLN: Responsive Web Design for Libraries

B852b104baed98f4b7f02f5a7a75ab6b?s=47 Matthew Reidsma
October 03, 2014

TLN: Responsive Web Design for Libraries

Slides for a talk I gave at The Library Network's Tech Forum, October 3, 2014 on Responsive Design.

B852b104baed98f4b7f02f5a7a75ab6b?s=128

Matthew Reidsma

October 03, 2014
Tweet

Transcript

  1. LIBRARIES RESPONSIVE MATTHEW REIDSMA WEB DESIGN FOR GRAND VALLEY STATE

    UNIVERSITY
  2. None
  3. 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 “
  4. http://www.flickr.com/photos/adactio/6153558098/

  5. None
  6. 2013-2014 US ADULTS OWN A SMARTPHONE 58% USE WEB MOSTLY

    ON PHONE 21% http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/ http://www.pewinternet.org/2013/09/16/main-findings-2/ OWN A CELL PHONE 91% USE WEB ON PHONE 57%
  7. 2013-2014 US ADULTS OF AFRICAN-AMERICAN 43% http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/ http://www.pewinternet.org/2013/09/16/main-findings-2/ OF WHITE/NON-HISPANIC

    27% OF HISPANIC 60%
  8. 2013-2014 US ADULTS COLLEGE DEGREE 21% http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/ http://www.pewinternet.org/2013/09/16/main-findings-2/ HIGH SCHOOL

    DIPLOMA 45%
  9. 2013-2014 US ADULTS > $75,000 A YEAR 27% http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/ http://www.pewinternet.org/2013/09/16/main-findings-2/

    < $30,000 A YEAR 45%
  10. None
  11. 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/
  12. 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/

  13. http://www.businessweek.com/news/2012-01-11/ebay-s-paypal-mobile-payment-volume-rose-to-4-billion-last-year.html http://bankinnovation.net/2014/01/paypal-processed-27-billion-in-mobile-payments-in-2013/ PAYPAL PAYMENTS $4 BILLION 2011 SALES ON MOBILE

    PAYPAL PAYMENTS $27 BILLION 2013 PAYPAL PAYMENTS
  14. 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.internetretailer.com/2014/01/22/ebay-reports-13-sales-growth-and-rejects-paypal-spinoff SALES ON MOBILE 3-4 FERRARIS SOLD /

    MONTH EBAY SALES $5 BILLION 2011 PAYPAL PAYMENTS $22 BILLION 2013 EBAY SALES
  15. US ADULTS > 1 6 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/ http://www.pewinternet.org/2014/09/10/younger-americans-and-public-libraries/ 2012 VISITED A LIBRARY WEBSITE IN THE PAST YEAR 36% 2014
  16. “ 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/
  17. DESIGN RESPONSIVE WEB

  18. PERFORMANCE 1

  19. WEBPAGE SIZE http://httparchive.org/interesting.php 312K 2008 2011 929K 2010 702K 2012

    1269K 1700K 2013 1850K 2014
  20. 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 2011 86 2010 74

    2012 88 2014 96
  21. NOT MOBILE-FRIENDLY? WON’T WAIT MORE THAN 3 SECONDS 60% WILL

    LEAVE IF NO MOBILE EXPERIENCE 61% SAY YOU DON’T CARE ABOUT THEM 48% http://googlemobileads.blogspot.com/2012/09/mobil-friendly-sites-turn-visitors.html https://web.archive.org/web/20130310221542/http://www.gomez.com/resources/whitepapers/survey- report-what-users-want-from-mobile/ 2012 WON’T WAIT MORE THAN 5 SECONDS 75%
  22. 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
  23. Half a second delay caused a 20% drop in traffic.

    Half a second delay killed user satisfaction. http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html “ Marissa Mayer
  24. <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” />
  25. one.css two.css both.css http://phette.net/prez/speed-feature-performance-mobile-web/files/index.html#/7

  26. <link rel=”stylesheet” href=”all.css” /> <head> </head>

  27. http://www.httparchive.org/interesting.php

  28. IMAGE SPRITES ICON FONTS CSS3 box-shadow border-radius etc. OPTIMIZE IMAGES

    60KB 40KB
  29. LAYOUT 2

  30. The control which designers know in the print medium, and

    often desire in the web medium, is simply a function of the limitation of the printed page. http://www.alistapart.com/articles/dao/ “ John Allsopp
  31. 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 “
  32. FLUID MEDIA

  33. None
  34. None
  35. img { max-size: 100%; }

  36. FLEXIBLE GRIDS

  37. { 80px { 24px

  38. 960px 288px 600px

  39. .left { float: left; width: 288px; } .right { float:

    right; width: 600px; }
  40. 960px 288px 600px

  41. None
  42. None
  43. None
  44. 960px 288px 600px

  45. 960px 288px 600px

  46. 960px 288px 600px

  47. 600 ÷ 960 = 62.5% 288 ÷ 960 = 30%

    TARGET ÷ CONTEXT = RESULT From Ethan Marcotte, Responsive Web Design, 2011.
  48. .left { float: left; width: 30%; } .right { float:

    right; width: 62.5%; }
  49. 100% 30% 62.5%

  50. MEDIA QUERIES

  51. @media screen { ... } @media print { ... }

    @media all { ... } @media handheld { ... }
  52. @media handheld { ... }

  53. @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) { ... }
  54. None
  55. BLOCK ELEMENTS NAVIGATION AT THE BOTTOM ANCHOR LINK TO NAV

    IN HEADER 1 2 3 STYLES BASE
  56. HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS

    SECTION #EVENTS SECTION #EXHIBITS FOOTER NAVIGATION
  57. BREAK POINT? WHEN LAYOUT BREAKS

  58. None
  59. FORM IN HEADER TO RIGHT NAVIGATION AT THE TOP ANCHOR

    LINK TO NAV IN HEADER GONE 1 2 3 STYLES >540PX
  60. HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS

    SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT INPUT NAVIGATION
  61. @media screen and (min-width: 540px) { /* Styles at least

    this wide go here */ }
  62. None
  63. NEWS & EVENTS IN RIGHT COLUMN EXHIBITS IN LEFT COLUMN

    1 2 STYLES >700PX
  64. SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT

    INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS
  65. <div id=”right-column”> <section id=”news”> ... </section> <section id=”events”> ... </section>

    </div>
  66. @media screen and (min-width: 700px) { #right-column { float: right;

    width: 30%; } #exhibits { float: right; width: 66%; } }
  67. None
  68. NEWS & EVENTS ACROSS THE TOP EXHIBITS IN LOWER ROW

    1 2 STYLES >1024PX HEADING CHANGED TO FULL NAME 3
  69. FOOTER HEADING 1 SUBMIT INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS

    SECTION #EXHIBITS SECTION #EVENTS SECTION #EXHIBITS
  70. @media screen and (min-width: 1024px) { #right-column { float: none;

    width: 100%; } #exhibits { float: none; width: 100%; } }
  71. <h1> <a href="index.html"> <abbr title="Library or Librarian"> LOL </abbr> <span>

    Library or Librarian </span> Library </a> </h1>
  72. h1 span { display: none; } @media screen and (min-width:

    1024px) { h1 abbr { display: none; } h1 span { display: inline; } }
  73. SUPPORT

  74. 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
  75. None
  76. https://github.com/scottjehl/Respond/

  77. <!--[if lt IE 9]> // Load IE-only styles here <![endif]-->

  78. None
  79. http://www.flickr.com/photos/adactio/6153558098/

  80. ???

  81. My website will meet you wherever you are... “ Trent

    Walton http://trentwalton.com/2011/05/10/fit-to-scale/
  82. RWD LIBRARIES & http://bit.ly/rwd-highered

  83. MORE LEARN

  84. http://www.abookapart.com/products/responsive-web-design

  85. Responsive Design for Libraries by Matthew Reidsma

  86. Responsive Design for Libraries: Beyond the Myth of the Mobile

    Web by Matthew Reidsma http://scholarworks.gvsu.edu/library_books/5/
  87. THANKYOU