Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 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 “
  2. 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%
  3. 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/
  4. 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
  5. “ 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/
  6. 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%
  7. 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
  8. 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
  9. <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” />
  10. 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
  11. 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 “
  12. 600 ÷ 960 = 62.5% 288 ÷ 960 = 30%

    TARGET ÷ CONTEXT = RESULT From Ethan Marcotte, Responsive Web Design, 2011.
  13. @media screen { ... } @media print { ... }

    @media all { ... } @media handheld { ... }
  14. @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) { ... }
  15. HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS

    SECTION #EVENTS SECTION #EXHIBITS FOOTER NAVIGATION
  16. FORM IN HEADER TO RIGHT NAVIGATION AT THE TOP ANCHOR

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

    SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT INPUT NAVIGATION
  18. SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT

    INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS
  19. @media screen and (min-width: 700px) { #right-column { float: right;

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

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

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

    width: 100%; } #exhibits { float: none; width: 100%; } }
  23. h1 span { display: none; } @media screen and (min-width:

    1024px) { h1 abbr { display: none; } h1 span { display: inline; } }
  24. 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
  25. ???

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

    Walton http://trentwalton.com/2011/05/10/fit-to-scale/
  27. Responsive Design for Libraries: Beyond the Myth of the Mobile

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