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. 2.
  2. 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 “
  3. 5.
  4. 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%
  5. 10.
  6. 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/
  7. 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
  8. 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/
  9. 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%
  10. 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
  11. 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
  12. 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” />
  13. 29.
  14. 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
  15. 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 “
  16. 33.
  17. 34.
  18. 41.
  19. 42.
  20. 43.
  21. 47.

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

    TARGET ÷ CONTEXT = RESULT From Ethan Marcotte, Responsive Web Design, 2011.
  22. 51.

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

    @media all { ... } @media handheld { ... }
  23. 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) { ... }
  24. 54.
  25. 56.

    HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS

    SECTION #EVENTS SECTION #EXHIBITS FOOTER NAVIGATION
  26. 58.
  27. 59.

    FORM IN HEADER TO RIGHT NAVIGATION AT THE TOP ANCHOR

    LINK TO NAV IN HEADER GONE 1 2 3 STYLES >540PX
  28. 60.

    HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS

    SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT INPUT NAVIGATION
  29. 62.
  30. 64.

    SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT

    INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS
  31. 66.

    @media screen and (min-width: 700px) { #right-column { float: right;

    width: 30%; } #exhibits { float: right; width: 66%; } }
  32. 67.
  33. 68.

    NEWS & EVENTS ACROSS THE TOP EXHIBITS IN LOWER ROW

    1 2 STYLES >1024PX HEADING CHANGED TO FULL NAME 3
  34. 69.

    FOOTER HEADING 1 SUBMIT INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS

    SECTION #EXHIBITS SECTION #EVENTS SECTION #EXHIBITS
  35. 70.

    @media screen and (min-width: 1024px) { #right-column { float: none;

    width: 100%; } #exhibits { float: none; width: 100%; } }
  36. 71.
  37. 72.

    h1 span { display: none; } @media screen and (min-width:

    1024px) { h1 abbr { display: none; } h1 span { display: inline; } }
  38. 73.
  39. 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
  40. 75.
  41. 78.
  42. 80.

    ???

  43. 81.

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

    Walton http://trentwalton.com/2011/05/10/fit-to-scale/
  44. 86.

    Responsive Design for Libraries: Beyond the Myth of the Mobile

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