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.

Transcript

1. LIBRARIES RESPONSIVE MATTHEW REIDSMA WEB DESIGN FOR GRAND VALLEY STATE UNIVERSITY
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/
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%
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
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
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) { ... }
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
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 */ }
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%; } }
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
76. https://github.com/scottjehl/Respond/
77. <!--[if lt IE 9]> // Load IE-only styles here <![endif]-->
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