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. LIBRARIES
    RESPONSIVE
    MATTHEW REIDSMA
    WEB DESIGN
    FOR
    GRAND VALLEY STATE UNIVERSITY

    View full-size slide

  2. 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 full-size slide

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

    View full-size slide

  4. 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 full-size slide

  5. 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 full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

  13. “ 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 full-size slide

  14. DESIGN
    RESPONSIVE
    WEB

    View full-size slide

  15. PERFORMANCE
    1

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

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

    View full-size slide

  27. FLEXIBLE GRIDS

    View full-size slide

  28. 960px
    288px 600px

    View full-size slide

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

    View full-size slide

  30. 960px
    288px 600px

    View full-size slide

  31. 960px
    288px 600px

    View full-size slide

  32. 960px
    288px 600px

    View full-size slide

  33. 960px
    288px 600px

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 100%
    30% 62.5%

    View full-size slide

  37. MEDIA QUERIES

    View full-size slide

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

    View full-size slide

  39. @media handheld { ... }

    View full-size slide

  40. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

  43. BREAK POINT?
    WHEN LAYOUT
    BREAKS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide




  53. LOL


    Library or Librarian

    Library


    View full-size slide

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

    View full-size slide

  55. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  58. My website will
    meet you wherever
    you are...

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. Responsive Design for
    Libraries
    by Matthew Reidsma

    View full-size slide

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

    View full-size slide