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
   

   View Slide

2. View Slide

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
   “
   

   View Slide

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

   View Slide

5. View Slide

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%
   

   View Slide

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%
   

   View Slide

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%
   

   View Slide

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%
   

   View Slide

10. View Slide

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/
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

17. DESIGN
    RESPONSIVE
    WEB
    

    View Slide

18. PERFORMANCE
    1
    

    View Slide

19. WEBPAGE SIZE
    http://httparchive.org/interesting.php
    312K
    2008 2011
    929K
    2010
    702K
    2012
    1269K
    1700K
    2013
    1850K
    2014
    

    View Slide

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
    

    View Slide

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%
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. 
    
    
    
    
    
    

    View Slide

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

    View Slide

26. 
    
    
    

    View Slide

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

    View Slide

28. IMAGE
    SPRITES
    ICON
    FONTS
    CSS3
    box-shadow
    border-radius
    etc.
    OPTIMIZE
    IMAGES 60KB 40KB
    

    View Slide

29. LAYOUT
    2
    

    View Slide

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
    

    View Slide

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
    “
    

    View Slide

32. FLUID MEDIA
    

    View Slide

33. View Slide

34. View Slide

35. img {
    max-size: 100%;
    }
    

    View Slide

36. FLEXIBLE GRIDS
    

    View Slide

37. {
    80px
    {
    24px
    

    View Slide

38. 960px
    288px 600px
    

    View Slide

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

    View Slide

40. 960px
    288px 600px
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. 960px
    288px 600px
    

    View Slide

45. 960px
    288px 600px
    

    View Slide

46. 960px
    288px 600px
    

    View Slide

47. 600 ÷ 960 = 62.5%
    288 ÷ 960 = 30%
    TARGET ÷ CONTEXT = RESULT
    From Ethan Marcotte, Responsive Web Design, 2011.
    

    View Slide

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

    View Slide

49. 100%
    30% 62.5%
    

    View Slide

50. MEDIA QUERIES
    

    View Slide

51. @media screen { ... }
    @media print { ... }
    @media all { ... }
    @media handheld { ... }
    

    View Slide

52. @media handheld { ... }
    

    View Slide

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) { ... }
    

    View Slide

54. View Slide

55. BLOCK ELEMENTS
    NAVIGATION AT THE BOTTOM
    ANCHOR LINK TO NAV IN HEADER
    1
    2
    3
    STYLES
    BASE
    

    View Slide

56. HEADING 1 ANCHOR #
    INPUT TYPE=”TEXT”
    INPUT TYPE=”SUBMIT”
    SECTION #NEWS
    SECTION #EVENTS
    SECTION #EXHIBITS
    FOOTER
    NAVIGATION
    

    View Slide

57. BREAK POINT?
    WHEN LAYOUT
    BREAKS
    

    View Slide

58. View Slide

59. FORM IN HEADER TO RIGHT
    NAVIGATION AT THE TOP
    ANCHOR LINK TO NAV IN HEADER GONE
    1
    2
    3
    STYLES
    >540PX
    

    View Slide

60. HEADING 1 ANCHOR #
    INPUT TYPE=”TEXT”
    INPUT TYPE=”SUBMIT”
    SECTION #NEWS
    SECTION #EVENTS
    SECTION #EXHIBITS
    FOOTER
    HEADING 1
    SUBMIT
    INPUT
    NAVIGATION
    

    View Slide

61. @media screen and (min-width: 540px) {
    /* Styles at least this wide go here */
    }
    

    View Slide

62. View Slide

63. NEWS & EVENTS IN RIGHT COLUMN
    EXHIBITS IN LEFT COLUMN
    1
    2
    STYLES
    >700PX
    

    View Slide

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

    View Slide

65. 
    
    ...
    
    
    ...
    
    
    

    View Slide

66. @media screen and (min-width: 700px) {
    #right-column {
    float: right;
    width: 30%; }
    #exhibits {
    float: right;
    width: 66%; }
    }
    

    View Slide

67. View Slide

68. NEWS & EVENTS ACROSS THE TOP
    EXHIBITS IN LOWER ROW
    1
    2
    STYLES
    >1024PX
    HEADING CHANGED TO FULL NAME
    3
    

    View Slide

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

    View Slide

70. @media screen and (min-width: 1024px) {
    #right-column {
    float: none;
    width: 100%; }
    #exhibits {
    float: none;
    width: 100%; }
    }
    

    View Slide

71. 
    
    
    LOL
    
    
    Library or Librarian
    
    Library
    
    
    

    View Slide

72. h1 span {
    display: none; }
    @media screen and (min-width: 1024px) {
    h1 abbr {
    display: none; }
    h1 span {
    display: inline; }
    }
    

    View Slide

73. SUPPORT
    

    View Slide

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
    

    View Slide

75. View Slide

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

    View Slide

77. 
    

    View Slide

78. View Slide

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

    View Slide

80. ???
    

    View Slide

81. My website will
    meet you wherever
    you are...
    “
    Trent Walton
    http://trentwalton.com/2011/05/10/fit-to-scale/
    

    View Slide

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

    View Slide

83. MORE
    LEARN
    

    View Slide

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

    View Slide

85. Responsive Design for
    Libraries
    by Matthew Reidsma
    

    View Slide

86. Responsive Design for
    Libraries: Beyond the
    Myth of the Mobile Web
    by Matthew Reidsma
    http://scholarworks.gvsu.edu/library_books/5/
    

    View Slide

87. THANKYOU
    

    View Slide