TLN: Responsive Web Design for Libraries

Transcript

1. 1.

   LIBRARIES RESPONSIVE MATTHEW REIDSMA WEB DESIGN FOR GRAND VALLEY STATE

   UNIVERSITY
2. 2.

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

   http://www.flickr.com/photos/adactio/6153558098/

5. 5.

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

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

    DESIGN RESPONSIVE WEB

18. 18.

    PERFORMANCE 1

19. 19.

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

    1269K 1700K 2013 1850K 2014
20. 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. 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. 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. 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. 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. 25.

    one.css two.css both.css http://phette.net/prez/speed-feature-performance-mobile-web/files/index.html#/7

26. 26.

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

27. 27.

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

28. 28.

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

    60KB 40KB
29. 29.

    LAYOUT 2

30. 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. 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. 32.

    FLUID MEDIA

33. 33.

    None
34. 34.

    None
35. 35.

    img { max-size: 100%; }

36. 36.

    FLEXIBLE GRIDS

37. 37.

    { 80px { 24px

38. 38.

    960px 288px 600px

39. 39.

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

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

    960px 288px 600px

41. 41.

    None
42. 42.

    None
43. 43.

    None
44. 44.

    960px 288px 600px

45. 45.

    960px 288px 600px

46. 46.

    960px 288px 600px

47. 47.

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

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

    .left { float: left; width: 30%; } .right { float:

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

    100% 30% 62.5%

50. 50.

    MEDIA QUERIES

51. 51.

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

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

    @media handheld { ... }

53. 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. 54.

    None
55. 55.

    BLOCK ELEMENTS NAVIGATION AT THE BOTTOM ANCHOR LINK TO NAV

    IN HEADER 1 2 3 STYLES BASE
56. 56.

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

    SECTION #EVENTS SECTION #EXHIBITS FOOTER NAVIGATION
57. 57.

    BREAK POINT? WHEN LAYOUT BREAKS

58. 58.

    None
59. 59.

    FORM IN HEADER TO RIGHT NAVIGATION AT THE TOP ANCHOR

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

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

    SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT INPUT NAVIGATION
61. 61.

    @media screen and (min-width: 540px) { /* Styles at least

    this wide go here */ }
62. 62.

    None
63. 63.

    NEWS & EVENTS IN RIGHT COLUMN EXHIBITS IN LEFT COLUMN

    1 2 STYLES >700PX
64. 64.

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

    INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS
65. 65.

    <div id=”right-column”> <section id=”news”> ... </section> <section id=”events”> ... </section>

    </div>
66. 66.

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

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

    None
68. 68.

    NEWS & EVENTS ACROSS THE TOP EXHIBITS IN LOWER ROW

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

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

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

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

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

    <h1> <a href="index.html"> <abbr title="Library or Librarian"> LOL </abbr> <span>

    Library or Librarian </span> Library </a> </h1>
72. 72.

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

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

    SUPPORT

74. 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. 75.

    None
76. 76.

    https://github.com/scottjehl/Respond/

77. 77.

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

78. 78.

    None
79. 79.

    http://www.flickr.com/photos/adactio/6153558098/

80. 80.

    ???

81. 81.

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

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

    RWD LIBRARIES & http://bit.ly/rwd-highered

83. 83.

    MORE LEARN

84. 84.

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

85. 85.

    Responsive Design for Libraries by Matthew Reidsma

86. 86.

    Responsive Design for Libraries: Beyond the Myth of the Mobile

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

    THANKYOU