$30 off During Our Annual Pro Sale. View Details »

TLN: Responsive Web Design for Libraries

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.

Matthew Reidsma

October 03, 2014
Tweet

More Decks by Matthew Reidsma

Other Decks in Design

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